;
diff --git a/src/pages/Bugs/Filters/CustomStatusFilter.tsx b/src/pages/Bugs/Filters/CustomStatusFilter.tsx
deleted file mode 100644
index 6c6594bac..000000000
--- a/src/pages/Bugs/Filters/CustomStatusFilter.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- getIsNaBugExcluded,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-import { getCustomStatusInfo } from 'src/common/components/utils/getCustomStatusInfo';
-import { BugCustomStatus } from 'src/features/api';
-import { getExcludeNotABugInfo } from 'src/common/components/utils/getExcludeNotABugInfo';
-import { useFilterData } from '../Drawer/useFilterData';
-
-export const CustomStatusFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { counters } = useFilterData('customStatuses');
- const { t } = useTranslation();
- const currentIsNaBugExcluded = getIsNaBugExcluded();
-
- if (
- !data ||
- !counters ||
- !data.customStatuses ||
- !data.customStatuses.available ||
- !data.customStatuses.available.length
- )
- return null;
-
- const customStatusNotABugInfo = getExcludeNotABugInfo(t);
-
- const shallDisable = (item: BugCustomStatus): boolean => {
- if (item.id !== customStatusNotABugInfo.customStatusId)
- return !counters[item.id];
- if (currentIsNaBugExcluded) return currentIsNaBugExcluded;
- return !counters[item.id];
- };
-
- return (
-
- t(`Status ({{count}})`, { count }),
- noItems: t('__BUGS_CUSTOM_STATUS_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- customStatuses: selected.map((item) => ({
- id: item.itemId,
- name: item.label,
- })),
- },
- })
- );
- }}
- options={data.customStatuses.available
- .slice(0)
- .reverse()
- .map((item) => ({
- itemId: item.id,
- label: getCustomStatusInfo(item.name as BugState, t).text,
- disabled: shallDisable(item),
- selected: data.customStatuses.selected
- .map((i) => i.id)
- .includes(item.id),
- }))}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/DeviceFilter.tsx b/src/pages/Bugs/Filters/DeviceFilter.tsx
deleted file mode 100644
index d633ff5a7..000000000
--- a/src/pages/Bugs/Filters/DeviceFilter.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const DeviceFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (
- !data ||
- !data.devices ||
- !data.devices.available ||
- !data.devices.available.length
- )
- return null;
-
- const options = data.devices.available.map((item) => ({
- itemId: item.device,
- label: item.device,
- selected: data.devices.selected.map((i) => i.device).includes(item.device),
- }));
-
- return (
-
- t(`Devices ({{count}})`, { count }),
- noItems: t('__BUGS_DEVICES_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- devices: selected.map((item) => ({
- id: item.itemId,
- device: item.label,
- })),
- },
- })
- );
- }}
- options={options}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/DropdownLabel.tsx b/src/pages/Bugs/Filters/DropdownLabel.tsx
deleted file mode 100644
index f58dab631..000000000
--- a/src/pages/Bugs/Filters/DropdownLabel.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const DropdownLabel = styled.div`
- display: flex;
- align-items: center;
- column-gap: ${({ theme }) => theme.space.xs};
-`;
diff --git a/src/pages/Bugs/Filters/ItemGroup.tsx b/src/pages/Bugs/Filters/ItemGroup.tsx
deleted file mode 100644
index 7c54eb22f..000000000
--- a/src/pages/Bugs/Filters/ItemGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { ReactChild } from 'react';
-import styled from 'styled-components';
-
-const ItemGroupWrapper = styled.div`
- height: max-content;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: start;
- justify-content: start;
-`;
-
-const TitleSpan = styled.span`
- padding: ${({ theme }) => `${theme.space.md} ${theme.space.sm}`};
- font-weight: ${({ theme }) => theme.fontWeights.semibold};
-`;
-
-const ItemGroup = ({
- title,
- children,
-}: {
- title: string | undefined;
- children: ReactChild | ReactChild[];
-}) => (
-
- {title || ''}
- {children}
-
-);
-
-export default ItemGroup;
diff --git a/src/pages/Bugs/Filters/OsFilter.tsx b/src/pages/Bugs/Filters/OsFilter.tsx
deleted file mode 100644
index 7051f997b..000000000
--- a/src/pages/Bugs/Filters/OsFilter.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const OsFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (!data || !data.os || !data.os.available || !data.os.available.length)
- return null;
-
- const options = data.os.available.map((item) => ({
- itemId: item.os,
- label: item.os,
- selected: data.os.selected.map((i) => i.os).includes(item.os),
- }));
-
- return (
-
- t(`OS ({{count}})`, { count }),
- noItems: t('__BUGS_OS_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- os: selected.map((item) => ({
- id: item.itemId,
- os: item.label,
- })),
- },
- })
- );
- }}
- options={options}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/PriorityFilter.tsx b/src/pages/Bugs/Filters/PriorityFilter.tsx
deleted file mode 100644
index ab1167933..000000000
--- a/src/pages/Bugs/Filters/PriorityFilter.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-import { getPriorityInfo } from 'src/common/components/utils/getPriorityInfo';
-import { useFilterData } from '../Drawer/useFilterData';
-
-export const PriorityFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { counters } = useFilterData('priorities');
- const { t } = useTranslation();
-
- if (
- !data ||
- !counters ||
- !data.priorities ||
- !data.priorities.available ||
- !data.priorities.available.length
- )
- return null;
-
- return (
-
- t(`Priority ({{count}})`, { count }),
- noItems: t('__BUGS_PRIORITY_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- priorities: selected.map((item) => ({
- id: item.itemId,
- name: item.label,
- })),
- },
- })
- );
- }}
- options={data.priorities.available.map((item) => ({
- itemId: item.id,
- label: getPriorityInfo(item.name as Priority, t).text,
- icon: getPriorityInfo(item.name as Priority, t).icon,
- disabled: !counters[item.id],
- selected: data.priorities.selected.map((i) => i.id).includes(item.id),
- }))}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/ReplicabilityFilter.tsx b/src/pages/Bugs/Filters/ReplicabilityFilter.tsx
deleted file mode 100644
index 1d8eaf8b8..000000000
--- a/src/pages/Bugs/Filters/ReplicabilityFilter.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const ReplicabilityFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (
- !data ||
- !data.replicabilities ||
- !data.replicabilities.available ||
- !data.replicabilities.available.length
- )
- return null;
-
- return (
-
- t(`Replicability ({{count}})`, { count }),
- noItems: t('__BUGS_REPLICABILITY_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- replicabilities: selected.map((item) => ({
- id: item.itemId,
- name: item.label,
- })),
- },
- })
- );
- }}
- options={data.replicabilities.available.map((item) => ({
- itemId: item.id,
- label: item.name,
- selected: data.replicabilities.selected
- .map((i) => i.id)
- .includes(item.id),
- }))}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/TagFilter.tsx b/src/pages/Bugs/Filters/TagFilter.tsx
deleted file mode 100644
index c151bd359..000000000
--- a/src/pages/Bugs/Filters/TagFilter.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const TagFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (
- !data ||
- !data.tags ||
- !data.tags.available ||
- !data.tags.available.length
- )
- return null;
-
- const options = data.tags.available.map((item) => ({
- itemId: item.tag_id,
- label: item.display_name,
- selected: data.tags.selected.map((i) => i.tag_id).includes(item.tag_id),
- }));
-
- // Add no tags option
- options.push({
- itemId: 'none',
- label: t('__BUGS_TAGS_FILTER_ITEM_NO_TAGS'),
- selected: data.tags.selected.map((i) => i.tag_id).includes('none'),
- });
-
- return (
-
- t(`Tags ({{count}})`, { count }),
- noItems: t('__BUGS_TAGS_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- tags: selected.map((item) => ({
- tag_id: item.itemId,
- display_name: item.label,
- })),
- },
- })
- );
- }}
- options={options}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/TypeFilter.tsx b/src/pages/Bugs/Filters/TypeFilter.tsx
deleted file mode 100644
index a86c3ea79..000000000
--- a/src/pages/Bugs/Filters/TypeFilter.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const TypeFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (
- !data ||
- !data.types ||
- !data.types.available ||
- !data.types.available.length
- )
- return null;
-
- return (
-
- t(`Typology ({{count}})`, { count }),
- noItems: t('__BUGS_TYPES_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- types: selected.map((item) => ({
- id: item.itemId,
- name: item.label,
- })),
- },
- })
- );
- }}
- options={data.types.available.map((item) => ({
- itemId: item.id,
- label: item.name,
- selected: data.types.selected.map((i) => i.id).includes(item.id),
- }))}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/UseCaseFilter.tsx b/src/pages/Bugs/Filters/UseCaseFilter.tsx
deleted file mode 100644
index 91aeec990..000000000
--- a/src/pages/Bugs/Filters/UseCaseFilter.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { CounterMultiselect } from '@appquality/unguess-design-system';
-import {
- getCurrentCampaignData,
- updateFilters,
-} from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-
-export const UseCaseFilter = () => {
- const dispatch = useAppDispatch();
- const data = getCurrentCampaignData();
- const { t } = useTranslation();
-
- if (
- !data ||
- !data.useCases ||
- !data.useCases.available ||
- !data.useCases.available.length
- )
- return null;
-
- const options = data.useCases.available.map((item) => ({
- itemId: item.id,
- label: item.title.full,
- selected: data.useCases.selected.map((i) => i.id).includes(item.id),
- }));
-
- return (
-
- t(`Use Cases ({{count}})`, { count }),
- noItems: t('__BUGS_USECASES_FILTER_ITEM_NO_ITEMS'),
- }}
- onChange={(selected) => {
- dispatch(
- updateFilters({
- filters: {
- useCases: selected.map((item) => ({
- id: item.itemId,
- title: {
- full: item.label,
- },
- })),
- },
- })
- );
- }}
- options={options}
- />
-
- );
-};
diff --git a/src/pages/Bugs/Filters/index.tsx b/src/pages/Bugs/Filters/index.tsx
index 281fcdd16..d05892d6d 100644
--- a/src/pages/Bugs/Filters/index.tsx
+++ b/src/pages/Bugs/Filters/index.tsx
@@ -41,7 +41,7 @@ const HideOnMobile = styled.div`
${hideOnMobile}
`;
-export const FlexWrapper = styled.div<{
+const FlexWrapper = styled.div<{
orderXl?: number;
hideOnMobile?: boolean;
}>`
diff --git a/src/pages/Campaign/CampaignWidgets.tsx b/src/pages/Campaign/CampaignWidgets.tsx
index 4891df4c0..2151a3b16 100644
--- a/src/pages/Campaign/CampaignWidgets.tsx
+++ b/src/pages/Campaign/CampaignWidgets.tsx
@@ -6,6 +6,7 @@ import {
StyledDivider,
} from 'src/common/components/navigation/asideNav';
import { useParams } from 'react-router-dom';
+import { appTheme } from 'src/app/theme';
import { EmptyState } from './EmptyState';
import { useWidgets } from './useWidgets';
@@ -49,7 +50,15 @@ export const CampaignWidgets = () => {
}
})}
{footers.length > 0 && }
- {footers.map((widget) => widget.content)}
+
+ {footers.map((widget) => widget.content)}
+
>
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx
index 287fc5af1..ce8619f7c 100644
--- a/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx
+++ b/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx
@@ -58,8 +58,6 @@ export const Methodology = ({
...(!isPreview && { showAsCustomer: true }),
});
- const servicesRoute = useLocalizeRoute(`services/#experience-optimization`);
-
if (
isLoading ||
cpIsLoading ||
@@ -143,7 +141,7 @@ export const Methodology = ({
-
+
{t('__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK')}
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/useFilterData.ts b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/useFilterData.ts
index 7d89cedac..bda8d7e5f 100644
--- a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/useFilterData.ts
+++ b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/useFilterData.ts
@@ -4,7 +4,7 @@ import { useGetCampaignsByCidUxQuery } from 'src/features/api';
import { getSelectedUxFiltersIds } from 'src/features/uxFilters';
type Filter = 'clusters' | 'severities';
-export interface CounterItems {
+interface CounterItems {
[key: string | number]: number;
}
diff --git a/src/pages/Campaign/useWidgets/Functional/widgets.tsx b/src/pages/Campaign/useWidgets/Functional/widgets.tsx
index c37d4e1bc..eab1e8c4a 100644
--- a/src/pages/Campaign/useWidgets/Functional/widgets.tsx
+++ b/src/pages/Campaign/useWidgets/Functional/widgets.tsx
@@ -3,23 +3,13 @@ import {
useGetCampaignsByCidBugsQuery,
useGetCampaignsByCidQuery,
} from 'src/features/api';
-import {
- getLocalizedFunctionalDashboardUrl,
- getLocalizedPlanUrl,
-} from 'src/hooks/useLocalizeDashboardUrl';
-import styled from 'styled-components';
+import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl';
import { ExternalLink } from '../../ExternalLink';
import { Additionals } from './Additionals';
import { CampaignOverview } from './CampaignOverview';
import { DevicesAndTypes } from './DevicesAndTypes';
import { UniqueBugsSection } from './UniqueBugsSection';
-const NavFooterCTAContainer = styled.div`
- display: flex;
- flex-direction: column;
- gap: ${({ theme }) => theme.space.sm};
-`;
-
const useAdditionalFieldsWidget = ({ campaignId }: { campaignId: number }) => {
const { t } = useTranslation();
const { data, isLoading } = useGetCampaignsByCidBugsQuery({
@@ -87,25 +77,15 @@ export const widgets = ({ campaignId }: { campaignId: number }) => {
...additionalFieldsWidget,
{
content: (
-
- {campaign.plan && (
-
- {t('__CAMPAIGN_PAGE_NAVIGATION_PLAN_EXTERNAL_LINK_LABEL')}
-
+
- {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL')}
-
-
+ >
+ {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL')}
+
),
type: 'footer' as const,
},
diff --git a/src/pages/Campaign/useWidgets/Report/widgets.tsx b/src/pages/Campaign/useWidgets/Report/widgets.tsx
index 1127b0217..cb9b414e4 100644
--- a/src/pages/Campaign/useWidgets/Report/widgets.tsx
+++ b/src/pages/Campaign/useWidgets/Report/widgets.tsx
@@ -4,10 +4,12 @@ import {
useGetCampaignsByCidQuery,
useGetCampaignsByCidReportsQuery,
} from 'src/features/api';
+import { getLocalizedPlanUrl } from 'src/hooks/useLocalizeDashboardUrl';
+import { ExternalLink } from '../../ExternalLink';
import { ReportRow } from './ReportRow';
export const widgets = ({ campaignId }: { campaignId: number }) => {
- const { t } = useTranslation();
+ const { t, i18n } = useTranslation();
const { data: campaign } = useGetCampaignsByCidQuery({
cid: campaignId.toString(),
});
@@ -49,5 +51,21 @@ export const widgets = ({ campaignId }: { campaignId: number }) => {
type: 'item' as const,
title: t('__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL'),
},
+ ...(campaign?.plan
+ ? [
+ {
+ id: 'anchor-plan-navigation',
+ content: (
+
+ {t('__CAMPAIGN_PAGE_NAVIGATION_PLAN_EXTERNAL_LINK_LABEL')}
+
+ ),
+ type: 'footer' as const,
+ },
+ ]
+ : []),
];
};
diff --git a/src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx b/src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx
index d5430c71b..b7e51ae9d 100644
--- a/src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx
+++ b/src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx
@@ -1,69 +1,11 @@
+import { useMemo } from 'react';
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-client';
+import useWindowSize from 'src/hooks/useWindowSize';
import styled from 'styled-components';
import { useFlipCardContext } from './context/FlipCardContext';
import { FlipCardBodyProps } from './types';
-const durationMilliseconds = 500;
-
-const FlipCardFaceContainer = styled.div<{ breakpoint: number }>`
- container-type: inline-size;
- .flipcard-face {
- transform-style: preserve-3d;
- animation-duration: ${durationMilliseconds}ms;
- animation-timing-function: linear;
- animation-fill-mode: forwards;
- }
- .flipcard-face-back {
- animation-name: show;
- }
- .flipcard-face-front {
- animation-name: hide;
- }
- @container (min-width: ${(p) => p.breakpoint}px) {
- .flipcard-face-front {
- z-index: 2;
- }
- .flipcard-face-back {
- z-index: 1;
- }
- &.flipcard.front {
- .flipcard-face-front {
- animation-name: show;
- }
- .flipcard-face-back {
- animation-name: hide;
- }
- }
- &.flipcard.back {
- .flipcard-face-front {
- animation-name: hide;
- }
- .flipcard-face-back {
- animation-name: show;
- }
- }
- }
- @keyframes hide {
- 0% {
- opacity: 1;
- height: auto;
- }
- 100% {
- opacity: 0;
- height: 0;
- }
- }
- @keyframes show {
- 0% {
- opacity: 0;
- height: 0;
- }
- 100% {
- opacity: 1;
- height: auto;
- }
- }
-`;
-
const FlipCardFaceContent = styled.div`
display: flex;
flex-direction: column;
@@ -75,18 +17,29 @@ const FlipCardFaceContent = styled.div`
export const FlipCardBody = ({ front, back }: FlipCardBodyProps) => {
const { visibleFace, breakpoint } = useFlipCardContext();
+ const { width } = useWindowSize();
+ const isMobile = width < breakpoint;
+
+ const cardContent = useMemo(() => {
+ if (isMobile) return back;
+ if (visibleFace === 'front') return front;
+ return back;
+ }, [isMobile, visibleFace, front, back]);
return (
-
-
- {back}
-
-
- {front}
-
-
+
+
+
+ {cardContent}
+
+
+
);
};
diff --git a/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx b/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx
index 594befa3b..807de4a83 100644
--- a/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx
+++ b/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx
@@ -10,7 +10,7 @@ const FlipButton = styled(IconButton)`
margin-left: ${(p) => p.theme.space.xs};
`;
-export const FlipButtonContainer = styled.div<{ breakpoint: number }>`
+const FlipButtonContainer = styled.div<{ breakpoint: number }>`
display: none;
@container (min-width: ${(p) => p.breakpoint}px) {
display: flex;
diff --git a/src/pages/Dashboard/CardContainer.tsx b/src/pages/Dashboard/CardContainer.tsx
deleted file mode 100644
index 481d209bf..000000000
--- a/src/pages/Dashboard/CardContainer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Row } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const StyledRow = styled(Row)``;
-
-export const CardsContainer = styled.div`
- ${StyledRow} {
- overflow-x: auto;
- flex-direction: row;
- flex-wrap: nowrap;
- }
-`;
diff --git a/src/pages/Dashboard/Modals/DeleteProjectModal.tsx b/src/pages/Dashboard/Modals/DeleteProjectModal.tsx
index 7a6bb33f0..8d95b58ed 100644
--- a/src/pages/Dashboard/Modals/DeleteProjectModal.tsx
+++ b/src/pages/Dashboard/Modals/DeleteProjectModal.tsx
@@ -6,8 +6,6 @@ import {
Button,
FooterItem,
Notification,
- MD,
- Span,
useToast,
Dots,
} from '@appquality/unguess-design-system';
diff --git a/src/pages/Dashboard/campaigns-list/list.tsx b/src/pages/Dashboard/campaigns-list/list.tsx
index 1fa647701..4b6244f97 100644
--- a/src/pages/Dashboard/campaigns-list/list.tsx
+++ b/src/pages/Dashboard/campaigns-list/list.tsx
@@ -47,7 +47,6 @@ const CardGroup = ({ items }: { items: Array }) => {
- {/* */}
{campaigns.map((campaign) => (
}) => {
/>
))}
- {/* */}
{items.length > 4 && (
diff --git a/src/pages/Dashboard/filters/styledMenu.tsx b/src/pages/Dashboard/filters/styledMenu.tsx
deleted file mode 100644
index 01e8a8c8c..000000000
--- a/src/pages/Dashboard/filters/styledMenu.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Menu } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const UgMenu = styled(Menu)`
- @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
- width: auto !important;
- min-width: 100%;
- }
-`;
diff --git a/src/pages/Dashboard/filters/utils.tsx b/src/pages/Dashboard/filters/utils.tsx
index cae4c33ca..0e9c80a34 100644
--- a/src/pages/Dashboard/filters/utils.tsx
+++ b/src/pages/Dashboard/filters/utils.tsx
@@ -3,7 +3,7 @@ import { Span } from '@appquality/unguess-design-system';
export interface DropdownItems {
[key: string]: DropdownItem;
}
-export interface DropdownItem {
+interface DropdownItem {
label: string;
value: string;
icon?: React.ReactElement;
diff --git a/src/pages/ExpressWizard/ActionModals/DiscardChangesModal.tsx b/src/pages/ExpressWizard/ActionModals/DiscardChangesModal.tsx
deleted file mode 100644
index 614b6ddb0..000000000
--- a/src/pages/ExpressWizard/ActionModals/DiscardChangesModal.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
- Button,
- FooterItem,
- Modal,
- ModalClose,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { useTranslation } from 'react-i18next';
-import { ReactComponent as AlertIcon } from 'src/assets/icons/alert-icon.svg';
-import styled from 'styled-components';
-
-const DangerHeader = styled(Modal.Header)`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-left: ${({ theme }) => theme.space.xs};
- padding-left: ${({ theme }) => theme.space.xs};
- gap: ${({ theme }) => theme.space.xs};
- ${(props) => retrieveComponentStyles('text.danger', props)};
-`;
-
-const DiscardChangesModal = ({
- handleCancel,
- onClose,
-}: {
- handleCancel: () => void;
- onClose?: () => void;
-}) => {
- const { t } = useTranslation();
- return (
-
-
-
- {t('__EXPRESS_WIZARD_CONFIRM_CLOSE_HEADER')}
-
- {t('__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE')}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default DiscardChangesModal;
diff --git a/src/pages/ExpressWizard/cardDivider.tsx b/src/pages/ExpressWizard/cardDivider.tsx
deleted file mode 100644
index b092a8c33..000000000
--- a/src/pages/ExpressWizard/cardDivider.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Divider } from 'src/common/components/divider';
-import styled from 'styled-components';
-
-export const CardDivider = styled(Divider)`
- background-color: ${({ theme }) => theme.palette.grey[200]};
- margin: ${({ theme }) => theme.space.base * 3}px 0;
-`;
diff --git a/src/pages/ExpressWizard/drawer.tsx b/src/pages/ExpressWizard/drawer.tsx
deleted file mode 100644
index b39a86922..000000000
--- a/src/pages/ExpressWizard/drawer.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import {
- Button,
- Drawer,
- MD,
- Paragraph,
- Tag,
- UnorderedList,
- XL,
- theme,
-} from '@appquality/unguess-design-system';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { toggleChat } from 'src/common/utils';
-import { TagItem } from 'src/features/backoffice/strapi';
-import {
- closeDrawer,
- resetExpressTypeId,
- resetWizard,
-} from 'src/features/express/expressSlice';
-import { useCampaignTemplateById } from 'src/hooks/useCampaignTemplateById';
-import { useSendGTMevent } from 'src/hooks/useGTMevent';
-import styled from 'styled-components';
-import { CardDivider } from './cardDivider';
-import { Notes, NotesTitle } from './notesCard';
-import { ProjectDropdown } from './projectDropdown';
-
-const SelectTitle = styled(MD)`
- padding-top: ${theme.space.base * 3}px;
- margin-bottom: ${theme.space.base * 2}px;
-`;
-
-const TagsContainer = styled.div`
- margin-top: ${theme.space.base * 4}px;
- display: flex;
- flex-align: flex-start;
- justify-content: flex-start;
- flex-wrap: wrap;
-`;
-
-const BodyTitle = styled(XL)`
- margin-top: ${theme.space.xxs};
- margin-bottom: ${theme.space.sm};
-`;
-
-const StyledTag = styled(Tag)`
- margin-right: ${theme.space.base * 2}px;
- margin-bottom: ${theme.space.base * 2}px;
-
- &:last-child {
- margin-right: 0;
- margin-bottom: 0;
- }
-`;
-
-export const ExpressDrawer = ({ onCtaClick }: { onCtaClick: () => void }) => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const sendGTMEvent = useSendGTMevent();
- const navigate = useNavigate();
- const { isDrawerOpen, project, templateId } = useAppSelector(
- (state) => state.express
- );
- const {
- data: template,
- isLoading,
- isError,
- } = useCampaignTemplateById(templateId.toString());
-
- const onClose = () => {
- dispatch(resetWizard());
- dispatch(resetExpressTypeId());
- dispatch(closeDrawer());
- toggleChat(true);
- };
-
- useEffect(() => {
- if (isDrawerOpen) {
- sendGTMEvent({
- event: 'express_navigation',
- category: template.slug,
- content: 'drawer_open',
- });
- }
- }, [isDrawerOpen]);
-
- if (isError) {
- return null;
- }
- return !isLoading && isDrawerOpen ? (
- {
- sendGTMEvent({
- action: 'drawer_close',
- event: 'express_navigation',
- category: template.slug,
- });
- onClose();
- }}
- restoreFocus={false}
- focusOnMount={false}
- >
- {t('__WIZARD_EXPRESS_HEADER_TITLE')}
-
- {template.title}
- {template.description}
-
- {template.tags &&
- template.tags.length > 0 &&
- template.tags.map((tag: TagItem) => (
-
-
-
-
- {tag.label}
-
- ))}
- {template.price && (
-
- {template.price.icon && (
-
-
-
- )}
- {template.price.label}
-
- )}
-
-
-
- {t('__WIZARD_EXPRESS_BODY_SELECT_PROJECT_TITLE')}
-
-
- {template.requirements &&
- (template.requirements.description || template.requirements.list) && (
-
- {t('__WIZARD_EXPRESS_BODY_NOTES_TITLE')}
-
- {template.requirements.description && (
- {template.requirements?.description}
- )}
- {template.requirements?.list &&
- template.requirements.list.length > 0 && (
-
- {template.requirements?.list.map((reason) => (
- {reason.item}
- ))}
-
- )}
-
- )}
-
-
-
-
-
-
-
-
-
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/fields/confirm.ts b/src/pages/ExpressWizard/fields/confirm.ts
deleted file mode 100644
index 1b5e78261..000000000
--- a/src/pages/ExpressWizard/fields/confirm.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ConfirmStep {
- campaign_more_info?: string;
-}
diff --git a/src/pages/ExpressWizard/fields/how.ts b/src/pages/ExpressWizard/fields/how.ts
deleted file mode 100644
index 5af22a936..000000000
--- a/src/pages/ExpressWizard/fields/how.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { UseCaseTemplate } from 'src/features/api/api';
-
-export interface UseCase {
- id: number;
- title: string;
- functionality?: UseCaseTemplate;
- logged: boolean;
- description: string;
- link?: string;
-}
-
-export const emptyUseCase: UseCase = {
- id: 0,
- title: '',
- logged: false,
- description:
- 'Descrizione della funzionalità
Stai per testare la funzionalità “barra di ricerca” il cui scopo è quello di “cercare prodotti”
Azioni da compiere per validare il funzionamento
Per testare il funzionamento:
Usa la barra di ricerca per cercare contenuti all’interno del sito, sia attraverso stringhe parziali che totali.
Usa eventuali opzioni di filtro e ordinamento
Assicurati che
I contenuti trovati siano sempre coerenti con quanto desiderato, in base ai loro dettagli
',
- link: '',
-};
-
-export interface HowStep {
- test_description?: string;
- use_cases?: UseCase[];
-}
diff --git a/src/pages/ExpressWizard/fields/what.ts b/src/pages/ExpressWizard/fields/what.ts
deleted file mode 100644
index cae750dbe..000000000
--- a/src/pages/ExpressWizard/fields/what.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface WhatStep {
- campaign_name?: string;
- campaign_reason?: string;
- product_type?: string;
-}
diff --git a/src/pages/ExpressWizard/fields/when.ts b/src/pages/ExpressWizard/fields/when.ts
deleted file mode 100644
index 886b68fc1..000000000
--- a/src/pages/ExpressWizard/fields/when.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface WhenStep {
- campaign_date?: Date;
- campaign_date_end?: Date;
-}
diff --git a/src/pages/ExpressWizard/fields/whereApp.ts b/src/pages/ExpressWizard/fields/whereApp.ts
deleted file mode 100644
index 5793a0413..000000000
--- a/src/pages/ExpressWizard/fields/whereApp.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface WhereAppStep {
- iOSLink?: string;
- androidLink?: string;
- isIOS?: boolean;
- isAndroid?: boolean;
- withSmartphone?: boolean;
- withTablet?: boolean;
- hasOutOfScope?: boolean;
- outOfScope?: string;
-}
diff --git a/src/pages/ExpressWizard/fields/whereWeb.ts b/src/pages/ExpressWizard/fields/whereWeb.ts
deleted file mode 100644
index f4c4b56e8..000000000
--- a/src/pages/ExpressWizard/fields/whereWeb.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface WhereWebStep {
- link?: string;
-
- withSmartphone?: boolean;
- withTablet?: boolean;
- withDesktop?: boolean;
-
- customBrowser?: boolean;
- customBrowserFilled?: boolean;
- withChrome?: boolean;
- withSafari?: boolean;
- withFirefox?: boolean;
- withEdge?: boolean;
- hasOutOfScope?: boolean;
- outOfScope?: string;
-}
diff --git a/src/pages/ExpressWizard/fields/who.ts b/src/pages/ExpressWizard/fields/who.ts
deleted file mode 100644
index 72aadde9a..000000000
--- a/src/pages/ExpressWizard/fields/who.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface WhoStep {
- campaign_language?: string;
- age_range?: string;
- gender?: string;
- digital_literacy?: string;
- target_size?: number;
-}
diff --git a/src/pages/ExpressWizard/getLanguage.ts b/src/pages/ExpressWizard/getLanguage.ts
deleted file mode 100644
index a21904a8f..000000000
--- a/src/pages/ExpressWizard/getLanguage.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as dateFns from 'date-fns';
-import { enGB, it, es, fr } from 'date-fns/locale';
-import { t } from 'i18next';
-import { RELATIVE_DATE_FORMAT_OPTS } from 'src/constants';
-
-interface Language {
- label: string;
- locale: dateFns.Locale;
- relativeDateFormat: { [key: string]: string };
-}
-
-export const getLanguage = (lang: string): Language => {
- let label;
- let locale;
- let relativeDateFormat;
- switch (lang) {
- case 'en':
- label = t('__APP_LANGUANGE_EN_TEXT');
- locale = enGB;
- relativeDateFormat = RELATIVE_DATE_FORMAT_OPTS.en;
- break;
- case 'it':
- label = t('__APP_LANGUANGE_IT_TEXT');
- locale = it;
- relativeDateFormat = RELATIVE_DATE_FORMAT_OPTS.it;
- break;
- case 'es':
- label = t('__APP_LANGUANGE_ES_TEXT');
- locale = es;
- relativeDateFormat = RELATIVE_DATE_FORMAT_OPTS.en;
- break;
- case 'fr':
- label = t('__APP_LANGUANGE_FR_TEXT');
- locale = fr;
- relativeDateFormat = RELATIVE_DATE_FORMAT_OPTS.en;
- break;
- default:
- label = t('__APP_LANGUANGE_EN_TEXT');
- locale = enGB;
- relativeDateFormat = RELATIVE_DATE_FORMAT_OPTS.en;
- break;
- }
-
- return {
- label,
- locale,
- relativeDateFormat,
- };
-};
diff --git a/src/pages/ExpressWizard/getPlatform.ts b/src/pages/ExpressWizard/getPlatform.ts
deleted file mode 100644
index ec243eb88..000000000
--- a/src/pages/ExpressWizard/getPlatform.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {
- DESKTOP_MAC,
- DESKTOP_WINDOWS,
- SMARTPHONE_ANDROID,
- SMARTPHONE_IOS,
- TABLET_ANDROID,
- TABLET_IOS,
-} from 'src/constants';
-import { PlatformObject } from 'src/features/api';
-import { WizardModel } from './wizardModel';
-
-export const getPlatform = (values: WizardModel): Array => {
- const { withSmartphone, withTablet, withDesktop, isIOS, isAndroid } = values;
-
- const platforms = [];
-
- if (withSmartphone) {
- if (!isIOS && !isAndroid) {
- // WhereWeb Step
- platforms.push(SMARTPHONE_ANDROID);
- platforms.push(SMARTPHONE_IOS);
- } else {
- // WhereApp Step
- if (isIOS) {
- platforms.push(SMARTPHONE_IOS);
- }
-
- if (isAndroid) {
- platforms.push(SMARTPHONE_ANDROID);
- }
- }
- }
-
- if (withTablet) {
- if (!isIOS && !isAndroid) {
- // WhereWeb Step
- platforms.push(TABLET_ANDROID);
- platforms.push(TABLET_IOS);
- } else {
- // WhereApp Step
- if (isIOS) {
- platforms.push(TABLET_IOS);
- }
-
- if (isAndroid) {
- platforms.push(TABLET_ANDROID);
- }
- }
- }
-
- if (withDesktop) {
- platforms.push(DESKTOP_MAC);
- platforms.push(DESKTOP_WINDOWS);
- }
-
- return platforms;
-};
diff --git a/src/pages/ExpressWizard/index.tsx b/src/pages/ExpressWizard/index.tsx
deleted file mode 100644
index 4a622dee0..000000000
--- a/src/pages/ExpressWizard/index.tsx
+++ /dev/null
@@ -1,544 +0,0 @@
-import {
- Col,
- ContainerCard,
- Grid,
- Message,
- ModalFullScreen,
- Row,
- Stepper,
-} from '@appquality/unguess-design-system';
-import { addBusinessDays, format } from 'date-fns';
-import {
- Form,
- Formik,
- FormikHelpers,
- FormikProps,
- setNestedObjectValues,
-} from 'formik';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useNavigationType } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import {
- createCrons,
- createPages,
- createTasks,
- createUseCases,
-} from 'src/common/campaigns';
-import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { extractStrapiData } from 'src/common/getStrapiData';
-import { isDev } from 'src/common/isDevEnvironment';
-import { toggleChat } from 'src/common/utils';
-import {
- BASE_DATE_FORMAT,
- EXPRESS_1_CAMPAIGN_TYPE_ID,
- EXPRESS_2_CAMPAIGN_TYPE_ID,
- EXPRESS_3_CAMPAIGN_TYPE_ID,
- EXPRESS_4_CAMPAIGN_TYPE_ID,
- ZAPIER_WEBHOOK_TRIGGER,
-} from 'src/constants';
-import {
- Campaign,
- Project,
- usePostCampaignsMutation,
- usePostProjectsMutation,
-} from 'src/features/api';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import {
- closeDrawer,
- closeWizard,
- resetWizard,
- setExpressProject,
-} from 'src/features/express/expressSlice';
-import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-import { useSendGTMevent } from 'src/hooks/useGTMevent';
-import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import i18n from 'src/i18n';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import DiscardChangesModal from './ActionModals/DiscardChangesModal';
-import { getPlatform } from './getPlatform';
-import {
- mapBrowsers,
- mapLanguages,
- mapProductType,
- mapTesterRequirements,
-} from './mapToCampaignFields';
-import { reasonItems } from './steps/express-1/what';
-import { ThankYouStep } from './steps/thankYou';
-import { StepItem, useExpressStep } from './steps/useSteps';
-import { WizardHeader } from './wizardHeader';
-import defaultValues from './wizardInitialValues';
-import { WizardModel } from './wizardModel';
-
-const StyledContainer = styled(ContainerCard)`
- position: sticky;
- top: 0;
- padding: ${({ theme }) => theme.space.xxl};
- max-height: calc(
- 100vh - ${({ theme }) => theme.components.chrome.header.height}
- );
- overflow-y: auto;
-
- @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0;
- }
-`;
-
-const StyledFooterItem = styled(ModalFullScreen.FooterItem)`
- align-items: center;
-`;
-
-const ModalFooter = styled(ModalFullScreen.Footer)`
- background-color: ${({ theme }) => theme.palette.white};
-`;
-
-const StyledModal = styled(ModalFullScreen)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-
-const ModalHeaderContent = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
-const PullRight = styled.div`
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 ${({ theme }) => theme.space.lg};
-
- @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0;
- }
-`;
-
-const getValidationSchema = (step: number, steps: StepItem[]) => {
- if (step in steps) {
- return steps[step as number].validationSchema;
- }
- return Yup.object();
-};
-
-const getExpressCPTypeId = (expressSlug: string) => {
- switch (expressSlug) {
- case 'ux-tagging':
- return EXPRESS_4_CAMPAIGN_TYPE_ID;
- case 'unmoderated-usability-testing':
- return EXPRESS_3_CAMPAIGN_TYPE_ID;
- case 'bug-hunting':
- return EXPRESS_2_CAMPAIGN_TYPE_ID;
- default: // accessibility check
- return EXPRESS_1_CAMPAIGN_TYPE_ID;
- }
-};
-
-export const ExpressWizardContainer = () => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const formRef = useRef>(null);
- const navigate = useNavigate();
- const [stepperTitle, setStepperTitle] = useState('');
- const { userData } = useAppSelector((state) => state.user);
- const { project } = useAppSelector((state) => state.express);
- const projRoute = useLocalizeRoute(`projects/${project?.id}`);
- const { activeWorkspace } = useActiveWorkspace();
- const navigationType = useNavigationType();
- const {
- isWizardOpen,
- steps: draftSteps,
- expressTypeId,
- } = useAppSelector((state) => state.express);
- const sendGTMEvent = useSendGTMevent();
-
- // TODO: show an alert if isError is set
- const { data } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId.toString(),
- locale: i18n.language,
- populate: {
- express: {
- populate: '*',
- },
- },
- });
-
- const expressTypeData = extractStrapiData(data);
- const expressTypeMeta = extractStrapiData(expressTypeData.express);
-
- const [activeStep, setStep] = useState(0);
- const [isThankyou, setThankyou] = useState(false);
- const [createCampaign] = usePostCampaignsMutation();
- const [createProject] = usePostProjectsMutation();
-
- // Reduce draftSteps to array of data
- const draft: WizardModel = Object.values(draftSteps).reduce(
- (filtered: {}, step) => ({
- ...filtered,
- ...step.data,
- }),
- {}
- );
-
- const initialValues = {
- ...defaultValues,
- ...draft,
- };
-
- const steps: Array = useExpressStep(expressTypeMeta.slug);
-
- const onNext = () => {
- if (activeStep === steps.length - 1) {
- setThankyou(true);
- } else if (formRef.current) {
- formRef.current?.validateForm().then((errors) => {
- if (formRef.current?.isValid) {
- setStep(activeStep + 1);
- } else {
- // We want to touch all the fields to show the error
- formRef.current?.setTouched(setNestedObjectValues(errors, true));
- }
- });
- }
- };
- const onBack = () => {
- if (activeStep > 0) {
- setStep(activeStep - 1);
- }
- };
-
- // Form actions
- const handleSubmit = async (
- values: WizardModel,
- { setSubmitting, setStatus }: FormikHelpers
- ) => {
- const projectHandle = async () => {
- // Create project if it doesn't exist
- if (
- project &&
- project.id === -1 &&
- activeWorkspace &&
- activeWorkspace.id
- ) {
- const prj = await createProject({
- body: {
- name: project.name,
- customer_id: activeWorkspace.id,
- },
- }).unwrap();
-
- if (prj) dispatch(setExpressProject(prj));
-
- return prj;
- }
-
- return project;
- };
-
- const campaignHandle = async (prj: Project) => {
- const fallBackDate = format(
- addBusinessDays(new Date(), 1),
- BASE_DATE_FORMAT
- );
- // Create the campaign
- const cp = await createCampaign({
- body: {
- title: values.campaign_name || 'Express campaign',
- start_date: values.campaign_date
- ? format(values.campaign_date, BASE_DATE_FORMAT)
- : fallBackDate,
- end_date: values.campaign_date_end
- ? format(values.campaign_date_end, BASE_DATE_FORMAT)
- : fallBackDate,
- close_date: values.campaign_date_end
- ? format(values.campaign_date_end, BASE_DATE_FORMAT)
- : fallBackDate,
- customer_title: values.campaign_name,
- campaign_type_id: getExpressCPTypeId(expressTypeMeta.slug),
- project_id: prj?.id || -1,
- pm_id: activeWorkspace?.csm.id || -1,
- platforms: getPlatform(values),
- customer_id: activeWorkspace?.id || -1,
- express_slug: expressTypeMeta.slug,
- has_bug_form: values.has_bug_form ? 1 : 0,
- has_bug_parade: values.has_bug_parade ? 1 : 0,
- ...(values.use_cases && { use_cases: values.use_cases }),
- outOfScope: values.outOfScope,
- productLink:
- values.product_type === 'mobileapp'
- ? [values.androidLink, values.iOSLink]
- .filter((link) => link)
- .join(',')
- : values.link,
- languages: mapLanguages([values.campaign_language || '']),
- productType: mapProductType(values.product_type || ''),
- browsers: mapBrowsers(values),
- goal: values.test_description,
- testerRequirements: mapTesterRequirements(values),
- targetSize: values.target_size,
- },
- }).unwrap();
-
- return cp;
- };
-
- const zapierHandle = async (cp: Campaign) => {
- // Post on webhook Zapier axios call
- await fetch(expressTypeData.webhook_url ?? ZAPIER_WEBHOOK_TRIGGER, {
- method: 'POST',
- mode: 'no-cors',
- headers: {
- 'Content-Type': 'application/json',
- Accept: 'application/json',
- },
- body: JSON.stringify({
- cp: {
- ...values,
- id: cp.id,
- ...(values.campaign_date && {
- start_date: format(values.campaign_date, BASE_DATE_FORMAT),
- }),
- ...(values.campaign_date_end && {
- end_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
- }),
- ...(values.campaign_date_end && {
- close_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
- }),
- ...(values.campaign_reason && {
- reason: reasonItems[values.campaign_reason],
- }),
- },
- user: userData,
- workspace: activeWorkspace,
- environment: isDev() ? 'staging' : 'production',
- }),
- });
- };
-
- const wordpressHandle = async (cp: Campaign) => {
- // Post on webhook WordPress axios call
- try {
- if (!values.use_cases) {
- await createUseCases(cp.id);
- }
-
- await createPages(cp.id);
- await createCrons(cp.id);
- await createTasks(cp.id);
- } catch (e) {
- // eslint-disable-next-line no-console
- console.log('Something went wrong with wp', e);
- }
- };
-
- try {
- const prj = await projectHandle();
-
- if (prj) {
- const cp = await campaignHandle(prj);
- if (cp) {
- await zapierHandle(cp);
- await wordpressHandle(cp);
- onNext();
- } else {
- throw Error('Something went wrong with campaign');
- }
- } else {
- throw Error('Something went wrong with project');
- }
- } catch (e) {
- // eslint-disable-next-line no-console
- console.error('Submission error:', e);
-
- setSubmitting(false);
-
- // TODO: Show error message modal
- setStatus({ submitError: true });
-
- // Send error to GTM
- sendGTMEvent({
- action: 'express_error',
- event: 'express_navigation',
- category: expressTypeMeta.slug,
- });
- }
- };
-
- const [showDiscardChangesModal, setShowDiscardChangesModal] = useState(false);
- const closeExpressWizard = () => {
- if (isWizardOpen) {
- if (isThankyou) {
- dispatch(closeDrawer());
- dispatch(closeWizard());
- dispatch(resetWizard());
- setStep(0);
- setThankyou(false);
- navigate(projRoute);
- } else {
- setShowDiscardChangesModal(true);
- }
- }
- };
-
- useEffect(() => {
- if (navigationType === 'POP') {
- dispatch(closeDrawer());
- dispatch(closeWizard());
- dispatch(resetWizard());
- setStep(0);
- setThankyou(false);
- }
- }, [navigationType]);
-
- useEffect(() => {
- if (isWizardOpen) {
- setStepperTitle(
- t('__EXPRESS_WIZARD_STEPPER_ACCORDION_TITLE_MOBILE')
- .replace('{current_step}', (activeStep + 1).toString())
- .replace('{total_steps}', steps.length.toString())
- );
-
- sendGTMEvent({
- event: 'express_navigation',
- category: expressTypeMeta.slug,
- content: `express_step_${activeStep + 1}_of_${steps.length}`,
- });
- }
- }, [isWizardOpen, activeStep]);
-
- useEffect(() => {
- if (isWizardOpen && isThankyou)
- sendGTMEvent({
- action: 'express_end',
- event: 'express_navigation',
- category: expressTypeMeta.slug,
- content: 'thank_you_page',
- });
- }, [isWizardOpen, isThankyou]);
-
- return isWizardOpen ? (
- <>
-
- {!isThankyou ? (
-
- {(formProps: FormikProps) => (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {formProps.status &&
- formProps.status.submitError && (
-
- {t('__EXPRESS_WIZARD_SUBMIT_ERROR')}
-
- )}
-
-
- {steps[activeStep as number].buttons({
- formikArgs: formProps,
- onBackClick: onBack,
- onNextClick: onNext,
- })}
-
-
-
-
-
-
-
- >
- )}
-
- ) : (
-
- )}
-
- {showDiscardChangesModal && (
- setShowDiscardChangesModal(false)}
- onClose={() => {
- setShowDiscardChangesModal(false);
- dispatch(closeDrawer());
- dispatch(closeWizard());
- dispatch(resetWizard());
- setStep(0);
- setThankyou(false);
- if (formRef.current) {
- formRef.current?.resetForm();
- }
- toggleChat(true);
- sendGTMEvent({
- action: 'express_close',
- event: 'express_navigation',
- category: expressTypeMeta.slug,
- });
- }}
- />
- )}
- >
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/mapToCampaignFields.tsx b/src/pages/ExpressWizard/mapToCampaignFields.tsx
deleted file mode 100644
index 3e31ed053..000000000
--- a/src/pages/ExpressWizard/mapToCampaignFields.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-export const mapLanguages = (language: string[]) =>
- language
- .map((lang) => {
- if (lang === 'en') return 'English';
- if (lang === 'it') return 'Italian';
- if (lang === 'es') return 'Spanish';
- if (lang === 'fr') return 'French';
- return '';
- })
- .filter((lang) => lang !== '');
-
-export const mapProductType = (productType: string) => {
- if (productType === 'webapp') return 1;
- if (productType === 'mobileapp') return 2;
- return 100;
-};
-
-export const mapBrowsers = (values: {
- withChrome?: boolean;
- withSafari?: boolean;
- withFirefox?: boolean;
- withEdge?: boolean;
-}) => {
- const { withChrome, withSafari, withFirefox, withEdge } = values;
- const browsers = [];
- if (withChrome) browsers.push(1);
- if (withFirefox) browsers.push(2);
- if (withSafari) browsers.push(3);
- if (withEdge) browsers.push(4);
- return browsers;
-};
-
-export const mapTesterRequirements = (values: {
- age_range?: string;
- gender?: string;
- digital_literacy?: string;
-}) => {
- const { age_range, gender, digital_literacy } = values;
-
- let requirements = '';
-
- if (age_range) {
- if (age_range === 'all') requirements += `Age Range: All ages\n`;
- else requirements += `Age Range: ${age_range}\n`;
- }
-
- if (gender) {
- if (gender === 'all') requirements += `Gender: All genders\n`;
- else requirements += `Gender: ${gender}\n`;
- }
-
- if (digital_literacy) {
- if (digital_literacy === 'all')
- requirements += `Digital Literacy: All levels\n`;
- else requirements += `Digital Literacy: ${digital_literacy}\n`;
- }
-
- return requirements;
-};
diff --git a/src/pages/ExpressWizard/planningModal.tsx b/src/pages/ExpressWizard/planningModal.tsx
deleted file mode 100644
index 8ee7b47c9..000000000
--- a/src/pages/ExpressWizard/planningModal.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import {
- Button,
- Col,
- Datepicker,
- FormField as Field,
- Input,
- Label,
- Modal,
- ModalClose,
- Row,
-} from '@appquality/unguess-design-system';
-import { addBusinessDays, format, isTomorrow } from 'date-fns';
-import { t } from 'i18next';
-import { useState } from 'react';
-import {
- EXPRESS_BUSINESS_DAYS_TO_ADD,
- EXPRESS_START_DATE_MAX_VALUE,
-} from 'src/constants';
-import i18n from 'src/i18n';
-import styled from 'styled-components';
-import { getLanguage } from './getLanguage';
-
-const InBodyFooter = styled.div`
- margin-top: 60px;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
-`;
-
-const PlanningModal = ({
- startDate,
- duration = EXPRESS_BUSINESS_DAYS_TO_ADD,
- onClose,
- onSave,
-}: {
- startDate: Date;
- duration: number;
- onSave: (start: Date, end: Date) => void;
- onClose: () => void;
-}) => {
- const [launchDate, setlaunchDate] = useState(startDate);
- const [endDate, setEndDate] = useState(
- addBusinessDays(startDate, duration)
- );
- const lang = getLanguage(i18n.language || 'en');
-
- const handleDateChange = (date: Date) => {
- // We have to add 2 business days to determine the end date
- setlaunchDate(date);
- setEndDate(addBusinessDays(date, duration));
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_SUBMIT_PLANNING_TOOLTIP_TITLE')}
-
-
-
-
-
-
-
- isTomorrow(date)
- ? `${t(
- '__EXPRESS_WIZARD_STEP_WHEN_FIELD_CAMPAIGN_DATE_TOMORROW_LABEL'
- )} (${format(date, 'EEEE d MMMM Y', {
- locale: lang.locale,
- })})`
- : format(date, 'EEEE d MMMM Y', { locale: lang.locale })
- }
- onChange={handleDateChange}
- minValue={addBusinessDays(new Date(), 1)}
- maxValue={
- new Date(
- new Date().setDate(
- new Date().getDate() + EXPRESS_START_DATE_MAX_VALUE
- )
- )
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export { PlanningModal };
diff --git a/src/pages/ExpressWizard/projectDropdown.tsx b/src/pages/ExpressWizard/projectDropdown.tsx
deleted file mode 100644
index fbaa261f4..000000000
--- a/src/pages/ExpressWizard/projectDropdown.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
- Autocomplete,
- DropdownFieldNew as Field,
- Skeleton,
-} from '@appquality/unguess-design-system';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-
-import { ReactComponent as FolderIcon } from 'src/assets/icons/folder-icon.svg';
-import { useGetWorkspacesByWidProjectsQuery } from 'src/features/api';
-import { setExpressProject } from 'src/features/express/expressSlice';
-import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-import { useCanAccessToActiveWorkspace } from 'src/hooks/useCanAccessToActiveWorkspace';
-
-export const ProjectDropdown = () => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const { activeWorkspace } = useActiveWorkspace();
- const canAccessWorkspace = useCanAccessToActiveWorkspace();
- const { project, projectLocked } = useAppSelector((state) => state.express);
-
- const isProjectPage = useLocation().pathname.includes('/projects/');
- const { projectId } = useParams();
-
- // Get workspaces projects from rtk query
- const { data, isLoading, isFetching } = useGetWorkspacesByWidProjectsQuery({
- wid: activeWorkspace?.id.toString() || '',
- });
-
- const projects = data?.items;
-
- if (!projects) return null;
-
- useEffect(() => {
- if (projectId) {
- const proj = projects.find((prj) => prj.id.toString() === projectId);
- if (proj) {
- dispatch(setExpressProject(proj));
- }
- }
- }, [projects]);
-
- return isLoading || isFetching ? (
-
- ) : (
-
- }
- {...(projectLocked && project && { isDisabled: true })}
- onCreateNewOption={async (value) => {
- const v = { name: value, id: -1, campaigns_count: 0 };
- dispatch(setExpressProject(v));
- return {
- id: '-1',
- label: value,
- value: v,
- };
- }}
- onOptionClick={({ selectionValue, inputValue }) => {
- if (!inputValue || !selectionValue) return;
- const value = projects.find(
- (prj) => prj.id.toString() === selectionValue
- );
- dispatch(setExpressProject(value));
- }}
- options={(projects || []).map((prj) => ({
- id: prj.id.toString(),
- value: prj.id.toString(),
- label: prj.name,
- isSelected: isProjectPage && projectId === prj.id.toString(),
- }))}
- placeholder={t('__WIZARD_EXPRESS_DEFAULT_ITEM')}
- />
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm.tsx b/src/pages/ExpressWizard/steps/express-1/confirm.tsx
deleted file mode 100644
index 0ed6f7409..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import {
- ContainerCard,
- Grid,
- Label,
- Paragraph,
- Row,
- Span,
- Textarea,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useEffect } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { ReactComponent as NotAllowedIcon } from 'src/assets/icons/not-allowed-icon.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { WhatConfirm } from './confirm/whatConfirm';
-import { WhereConfirm } from './confirm/whereConfirm';
-import { WhoConfirm } from './confirm/whoConfirm';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
-
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledCard = styled(ContainerCard)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
- padding: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-const StyledTextarea = styled(Textarea)`
- margin-top: ${({ theme }) => theme.space.base * 2}px;
-`;
-
-const TextareaNote = styled(Paragraph)`
- color: ${({ theme }) => theme.palette.grey[600]};
- margin-top: ${({ theme }) => theme.space.base * 3}px;
- font-size: ${({ theme }) => theme.fontSizes.sm};
- line-height: 1.2;
-
- svg {
- margin-bottom: -${({ theme }) => theme.space.base / 2}px;
- margin-right: ${({ theme }) => theme.space.base}px;
- }
-`;
-
-export const ConfirmationStep = (props: FormikProps) => {
- const { values, getFieldProps, setFieldValue } = props;
-
- const hasWhereStep = values.link || values.iOSLink || values.androidLink;
- const hasWhoStep = values.campaign_language;
-
- useEffect(() => {
- // Tryber campaign configuration specific for this XPS campaign
- setFieldValue('has_bug_form', true);
- }, []);
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_TITLE')}
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_DESCRIPTION')}
-
-
-
-
-
-
-
-
- {hasWhereStep ? (
-
-
-
-
-
- ) : null}
-
- {hasWhoStep ? (
-
-
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_OUT_OF_SCOPE_LABEL')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_MORE_TEXTAREA_NOTE')}
-
-
-
-
-
-
-
- );
-};
-
-export const ConfirmationValidationSchema = Yup.object().shape({
- campaign_name: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/browsers.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/browsers.tsx
deleted file mode 100644
index f009653d3..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/browsers.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Browsers = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withChrome)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_CHROME'));
- if (values.withSafari)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_SAFARI'));
- if (values.withFirefox)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_FIREFOX'));
- if (values.withEdge)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_EDGE'));
-
- return values.customBrowser ? (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_BROWSERS')}
- {items.join(', ')}.
- >
- ) : (
- <>{t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_BROWSERS_EMPTY')}>
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/devices.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/devices.tsx
deleted file mode 100644
index cbf8935eb..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/devices.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Devices = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withSmartphone)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE'));
- if (values.withTablet)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_TABLET'));
- if (values.withDesktop)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_DEVICES')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/operativeSystems.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/operativeSystems.tsx
deleted file mode 100644
index 6ac04a0eb..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/operativeSystems.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const OperativeSystems = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.isAndroid)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL'));
- if (values.isIOS)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_IOS_LABEL'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_OS')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/whatConfirm.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/whatConfirm.tsx
deleted file mode 100644
index 019547c53..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/whatConfirm.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import styled from 'styled-components';
-import { ReactComponent as WhatIcon } from 'src/assets/icons/step-what-icon.svg';
-import { useTranslation, Trans } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhatConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { project } = useAppSelector((state) => state.express);
- const { values } = props;
-
- const productType =
- values.product_type === 'webapp'
- ? t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_WEBAPP_LABEL')
- : t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_MOBILEAPP_LABEL');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
-
- ,
- }}
- values={{
- campaign_name: values.campaign_name,
- project_name: project?.name,
- product_type: productType,
- }}
- default="Stai lanciando la campagna {{ campaign_name }} all'interno del progetto {{ project_name }} per {{ product_type }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/whereConfirm.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/whereConfirm.tsx
deleted file mode 100644
index 1b7735829..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/whereConfirm.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhereIcon } from 'src/assets/icons/step-where-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { Browsers } from './browsers';
-import { Devices } from './devices';
-import { OperativeSystems } from './operativeSystems';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhereConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LABEL')}
-
-
-
- {values.product_type === 'webapp' ? (
-
- ) : (
-
- )}
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/confirm/whoConfirm.tsx b/src/pages/ExpressWizard/steps/express-1/confirm/whoConfirm.tsx
deleted file mode 100644
index e136f0bc4..000000000
--- a/src/pages/ExpressWizard/steps/express-1/confirm/whoConfirm.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhoIcon } from 'src/assets/icons/step-who-icon.svg';
-import styled from 'styled-components';
-import { useTranslation, Trans } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { getLanguage } from 'src/pages/ExpressWizard/getLanguage';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhoConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const lang = getLanguage(values.campaign_language || 'en');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
-
- ,
- }}
- default="Testers speak {{ campaign_language }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/forms/ConfirmationForm.tsx b/src/pages/ExpressWizard/steps/express-1/forms/ConfirmationForm.tsx
deleted file mode 100644
index ed800c6b6..000000000
--- a/src/pages/ExpressWizard/steps/express-1/forms/ConfirmationForm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { WizardSubmit } from 'src/pages/ExpressWizard/wizardSubmit';
-import { Button } from '@appquality/unguess-design-system';
-import { ConfirmationStep } from '../confirm';
-
-export const ConfirmationForm = (props: FormikProps) => (
-
-);
-
-export const ConfirmationFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, formikArgs } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/forms/WhatForm.tsx b/src/pages/ExpressWizard/steps/express-1/forms/WhatForm.tsx
deleted file mode 100644
index 9a7992248..000000000
--- a/src/pages/ExpressWizard/steps/express-1/forms/WhatForm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhatStep } from '../what';
-
-export const WhatForm = (props: FormikProps) => (
-
-);
-
-export const WhatFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onNextClick } = props;
-
- return (
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/forms/WhereForm.tsx b/src/pages/ExpressWizard/steps/express-1/forms/WhereForm.tsx
deleted file mode 100644
index 48367e637..000000000
--- a/src/pages/ExpressWizard/steps/express-1/forms/WhereForm.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhereWebStep } from '../whereWeb';
-import { WhereAppStep } from '../whereApp';
-
-export const WhereForm = (props: FormikProps) => {
- const { values } = props;
- return values.product_type === 'webapp' ? (
-
- ) : (
-
- );
-};
-
-export const WhereFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/forms/WhoForm.tsx b/src/pages/ExpressWizard/steps/express-1/forms/WhoForm.tsx
deleted file mode 100644
index dfcc6abad..000000000
--- a/src/pages/ExpressWizard/steps/express-1/forms/WhoForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhoStep } from '../who';
-
-export const WhoForm = (props: FormikProps) => (
-
-);
-
-export const WhoFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/index.ts b/src/pages/ExpressWizard/steps/express-1/index.ts
deleted file mode 100644
index 26fc3a7c7..000000000
--- a/src/pages/ExpressWizard/steps/express-1/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { t } from 'i18next';
-import { WhatStepValidationSchema } from './what';
-import { WhereStepValidationSchema } from './whereWeb';
-import { WhoStepValidationSchema } from './who';
-import { ConfirmationValidationSchema } from './confirm';
-import { WhatForm, WhatFormButtons } from './forms/WhatForm';
-import { WhereForm, WhereFormButtons } from './forms/WhereForm';
-import { WhoForm, WhoFormButtons } from './forms/WhoForm';
-
-import {
- ConfirmationForm,
- ConfirmationFormButtons,
-} from './forms/ConfirmationForm';
-
-export const What = {
- id: 'what',
- label: t('__EXPRESS_WIZARD_STEP_WHAT_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION'),
- form: WhatForm,
- validationSchema: WhatStepValidationSchema,
- buttons: WhatFormButtons,
-};
-
-export const Where = {
- id: 'where',
- label: t('__EXPRESS_WIZARD_STEP_WHERE_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION'),
- form: WhereForm,
- validationSchema: WhereStepValidationSchema,
- buttons: WhereFormButtons,
-};
-
-export const Who = {
- id: 'who',
- label: t('__EXPRESS_WIZARD_STEP_WHO_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION'),
- form: WhoForm,
- validationSchema: WhoStepValidationSchema,
- buttons: WhoFormButtons,
-};
-
-export const Confirmation = {
- id: 'confirmation',
- label: t('__EXPRESS_WIZARD_STEP_CONFIRM_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_CONFIRM_DESCRIPTION'),
- form: ConfirmationForm,
- validationSchema: ConfirmationValidationSchema,
- buttons: ConfirmationFormButtons,
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/what.tsx b/src/pages/ExpressWizard/steps/express-1/what.tsx
deleted file mode 100644
index a38072d36..000000000
--- a/src/pages/ExpressWizard/steps/express-1/what.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import {
- Col,
- ContainerCard,
- FormField,
- Grid,
- Paragraph,
- RadioCard,
- Row,
- Select,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as FlagIcon } from 'src/assets/icons/flag-icon.svg';
-import { ReactComponent as MobileappIconActive } from 'src/assets/icons/mobileapp-active.svg';
-import { ReactComponent as MobileappIcon } from 'src/assets/icons/mobileapp.svg';
-import { ReactComponent as WebappIconActive } from 'src/assets/icons/webapp-active.svg';
-import { ReactComponent as WebappIcon } from 'src/assets/icons/webapp.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-interface Reasons {
- [key: string]: string;
-}
-
-export const reasonItems: Reasons = {
- 'reason-a': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_1'),
- 'reason-b': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_2'),
- 'reason-c': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_3'),
-};
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledOrCol = styled(Col)`
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- display: none;
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledProductTypeTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-export const WhatStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.product_type);
- const [selectedItem, setSelectedItem] = useState(values.campaign_reason);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('product_type', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_LABEL')}
-
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="webapp"
- checked={radioValue === 'webapp'}
- onChecked={handleRadioClick}
- />
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_OR_LABEL')}
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="mobileapp"
- checked={radioValue === 'mobileapp'}
- onChecked={handleRadioClick}
- />
-
-
-
- {errors.product_type && (
-
- {errors.product_type}
-
- )}
-
-
-
-
-
-
-
-
- );
-};
-
-export const WhatStepValidationSchema = Yup.object().shape({
- campaign_reason: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_REQUIRED')
- ),
- product_type: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-1/where/outOfScope.tsx b/src/pages/ExpressWizard/steps/express-1/where/outOfScope.tsx
deleted file mode 100644
index 2f1665af6..000000000
--- a/src/pages/ExpressWizard/steps/express-1/where/outOfScope.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
- FormField as Field,
- Label,
- MD,
- Message,
- Span,
- Textarea,
- Toggle,
- XL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { StyledRow } from './styled';
-
-export const OutOfScopeSection = ({
- errors,
- values,
- getFieldProps,
-}: FormikProps) => {
- const { t } = useTranslation();
-
- return (
- <>
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_TITLE')}
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TOGGLE_LABEL')}
-
-
-
-
-
-
-
-
-
-
-
-
- {values.hasOutOfScope && (
-
-
-
-
-
-
-
-
- )}
- {values.hasOutOfScope && errors.outOfScope && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_ERROR')}
-
-
- )}
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/where/styled.tsx b/src/pages/ExpressWizard/steps/express-1/where/styled.tsx
deleted file mode 100644
index 75e605b7b..000000000
--- a/src/pages/ExpressWizard/steps/express-1/where/styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- FormField as Field,
- Row,
- Span,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-export const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-export const SpacedField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.sm};
-`;
diff --git a/src/pages/ExpressWizard/steps/express-1/whereApp.tsx b/src/pages/ExpressWizard/steps/express-1/whereApp.tsx
deleted file mode 100644
index 76a9d70da..000000000
--- a/src/pages/ExpressWizard/steps/express-1/whereApp.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import {
- CheckboxCard,
- ContainerCard,
- Fieldset,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- Radio,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-const InnerField = styled(FormField)`
- margin-top: ${({ theme }) => theme.space.sm};
- margin-left: ${({ theme }) => theme.space.base * 6}px;
-`;
-
-export const WhereAppStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, handleChange, getFieldProps } = props;
- let initialRadioValue = 'none';
- if (values.isIOS) {
- initialRadioValue = 'ios';
- } else if (values.isAndroid) {
- initialRadioValue = 'android';
- }
-
- const [radioValue, setRadioValue] = useState(initialRadioValue);
-
- // Reset web step
- if (values.customBrowser) setFieldValue('customBrowser', false);
- if (values.withDesktop) setFieldValue('withDesktop', false);
-
- useEffect(() => {
- if (radioValue === 'ios') {
- setFieldValue('isIOS', true);
- setFieldValue('isAndroid', false);
- } else if (radioValue === 'android') {
- setFieldValue('isIOS', false);
- setFieldValue('isAndroid', true);
- }
- }, [radioValue, setFieldValue]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose what kind of devices do you want to
- test on
-
- *
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- name="withSmartphone"
- defaultChecked={values.withSmartphone}
- onToggle={(isChecked) => {
- setFieldValue('withSmartphone', isChecked);
- }}
- />
-
-
-
-
- }
- iconActive={}
- name="withTablet"
- defaultChecked={values.withTablet}
- onToggle={(isChecked) => {
- setFieldValue('withTablet', isChecked);
- }}
- />
-
-
-
- {(errors.withSmartphone || errors.withTablet) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Operating System --- */}
-
-
- {t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_TITLE')}
-
-
-
-
-
-
-
- {(errors.isIOS || errors.isAndroid) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
-
- )}
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-1/whereWeb.tsx b/src/pages/ExpressWizard/steps/express-1/whereWeb.tsx
deleted file mode 100644
index ca30f5de7..000000000
--- a/src/pages/ExpressWizard/steps/express-1/whereWeb.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-import {
- Checkbox,
- CheckboxCard,
- ContainerCard,
- FormField,
- Hint,
- Input,
- Label,
- MD,
- MediaInput,
- Message,
- Paragraph,
- Row,
- Span,
- Toggle,
- XXL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as LaptopIconActive } from 'src/assets/icons/device-laptop-active.svg';
-import { ReactComponent as LaptopIcon } from 'src/assets/icons/device-laptop.svg';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes, NotesTitle } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import * as Yup from 'yup';
-import { PrimarySpan, SpacedField, StyledRow } from './where/styled';
-
-export const WhereWebStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, getFieldProps } = props;
-
- // Reset App step
- if (values.isIOS) setFieldValue('isIOS', false);
- if (values.isAndroid) setFieldValue('isAndroid', false);
-
- const { t } = useTranslation();
-
- useEffect(() => {
- const atLeastOneChecked =
- values.withChrome ||
- values.withFirefox ||
- values.withSafari ||
- values.withEdge;
- setFieldValue('customBrowserFilled', atLeastOneChecked);
- }, [
- setFieldValue,
- values.withChrome,
- values.withEdge,
- values.withFirefox,
- values.withSafari,
- ]);
-
- // Max two devices allowed
- let selectedDevices = [
- values.withSmartphone,
- values.withTablet,
- values.withDesktop,
- ].filter(Boolean).length;
-
- useEffect(() => {
- selectedDevices = [
- values.withSmartphone,
- values.withTablet,
- values.withDesktop,
- ].filter(Boolean).length;
- }, [values.withSmartphone, values.withTablet, values.withDesktop]);
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose what kind of devices do you want to
- test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- name="withSmartphone"
- defaultChecked={values.withSmartphone}
- onToggle={(isChecked) => {
- setFieldValue('withSmartphone', isChecked);
- }}
- {...(!values.withSmartphone &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
-
- }
- iconActive={}
- name="withTablet"
- defaultChecked={values.withTablet}
- onToggle={(isChecked) => {
- setFieldValue('withTablet', isChecked);
- }}
- {...(!values.withTablet &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
-
- }
- iconActive={}
- name="withDesktop"
- defaultChecked={values.withDesktop}
- onToggle={(isChecked) => {
- setFieldValue('withDesktop', isChecked);
- }}
- {...(!values.withDesktop &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
- {(errors.withSmartphone ||
- errors.withTablet ||
- errors.withDesktop) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Website Url --- */}
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LINK_DESCRIPTION')}
- }
- type="url"
- placeholder="https://www.example.com"
- {...getFieldProps('link')}
- {...(errors.link && { validation: 'error' })}
- />
-
-
- {errors.link
- ? t('__EXPRESS_WIZARD_STEP_WHERE_LINK_ERROR')
- : t('__EXPRESS_WIZARD_STEP_WHERE_LINK_INFO')}
-
-
-
-
-
- {/** --- Browsers --- */}
-
- {/** LG: 32px */}
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TITLE')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!values.customBrowser ? (
- <>
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_TITLE')}
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_DESCRIPTION')}
-
- >
- ) : (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- )}
-
-
- {values.customBrowser && errors.customBrowserFilled && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_ERROR')}
-
-
- )}
-
-
- );
-};
-
-export const WhereStepValidationSchema = Yup.object().shape(
- {
- // Where APP STEP
- isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
- is: (isAndroid: boolean, product_type: string) =>
- !isAndroid && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
- is: (isIOS: boolean, product_type: string) =>
- !isIOS && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- iOSLink: Yup.string().url().when('isIOS', {
- is: true,
- then: Yup.string().url().required(),
- }),
- androidLink: Yup.string().url().when('isAndroid', {
- is: true,
- then: Yup.string().url().required(),
- }),
-
- // Where WEB STEP
- link: Yup.string().url().when('product_type', {
- is: 'webapp',
- then: Yup.string().url().required(),
- }),
- withSmartphone: Yup.bool().when(['withTablet', 'withDesktop'], {
- is: (withTablet: boolean, withDesktop: boolean) =>
- !withTablet && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withTablet: Yup.bool().when(['withSmartphone', 'withDesktop'], {
- is: (withSmartphone: boolean, withDesktop: boolean) =>
- !withSmartphone && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withDesktop: Yup.bool().when(['withSmartphone', 'withTablet'], {
- is: (withSmartphone: boolean, withTablet: boolean) =>
- !withSmartphone && !withTablet,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- customBrowser: Yup.bool(),
- customBrowserFilled: Yup.bool().when('customBrowser', {
- is: true,
- then: Yup.bool().oneOf([true], 'Custom Browser is required'),
- }),
- },
- [
- ['withTablet', 'withDesktop'],
- ['withSmartphone', 'withDesktop'],
- ['withSmartphone', 'withTablet'],
- ['isIOS', 'product_type'],
- ['isAndroid', 'product_type'],
- ['isIOS', 'isAndroid'],
- ]
-);
diff --git a/src/pages/ExpressWizard/steps/express-1/who.tsx b/src/pages/ExpressWizard/steps/express-1/who.tsx
deleted file mode 100644
index 5ba6ecd55..000000000
--- a/src/pages/ExpressWizard/steps/express-1/who.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import {
- ContainerCard,
- FormField as Field,
- Label,
- Message,
- Paragraph,
- Radio,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledLanguageTitle = styled(XL)`
- padding-top: ${({ theme }) => theme.space.md};
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-const StyledRadioField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-export const WhoStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.campaign_language);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('campaign_language', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_TITLE')}
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_DESCRIPTION')}
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
- {errors.campaign_language && (
- {errors.campaign_language}
- )}
-
-
- );
-};
-
-export const WhoStepValidationSchema = Yup.object().shape({
- campaign_language: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHO_FIELD_CAMPAIGN_LANGUAGE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/index.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/index.tsx
deleted file mode 100644
index ff9a8c9c2..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ModalUseCase } from './modalUseCase';
-
-export { ModalUseCase };
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCase.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCase.tsx
deleted file mode 100644
index 00449b87b..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCase.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import {
- Col,
- Grid,
- ModalFullScreen,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { closeUseCaseModal } from 'src/features/express/expressSlice';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ModalUseCaseBody } from './modalUseCaseBody';
-import { ModalUseCaseHeader } from './modalUseCaseHeader';
-import { ModalUseCaseHelp } from './modalUseCaseHelp';
-import { ModalUseCaseTabLayout } from './modalUseCaseTabLayout';
-
-const Body = styled(ModalFullScreen.Body)`
- padding: 0;
- overflow-x: hidden;
-
- ::-webkit-scrollbar {
- display: none;
- }
-`;
-
-const ContentCol = styled(Col)`
- flex-wrap: nowrap;
- align-items: stretch;
- align-content: stretch;
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 0;
-`;
-
-const HelpCol = styled(Col)`
- border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
- border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
- background-color: white;
- margin-bottom: 0;
- height: 100%;
- position: sticky;
- top: 0;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.lg}) {
- display: none;
- }
-`;
-
-const TextCasesTabs = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: ${({ theme }) => theme.space.md} 0;
- width: 100%;
- position: sticky;
- top: 0;
- z-index: 1;
- background: #f6f6f8;
- box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
- padding-left: calc(
- ${({ theme }) => theme.space.lg} + ${({ theme }) => theme.space.xxl}
- );
- margin-bottom: ${({ theme }) => theme.space.lg};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => theme.space.md} 0;
- }
-`;
-
-const StyledModal = styled(ModalFullScreen)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-
-const ModalBodyLayout = styled(LayoutWrapper)`
- padding: 0;
-`;
-
-export const ModalUseCase = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const dispatch = useAppDispatch();
- const { validateForm } = useFormikContext();
- const { isUseCaseModalOpen } = useAppSelector((state) => state.express);
-
- const closeModal = () => {
- validateForm().then(() => {
- dispatch(closeUseCaseModal());
- });
- };
-
- return isUseCaseModalOpen ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseBody.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseBody.tsx
deleted file mode 100644
index 71119296e..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseBody.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
- Button,
- ContainerCard,
- LG,
- Paragraph,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
-import { ReactComponent as EmptyImg } from 'src/assets/modal-use-case-empty.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ScrollingContainer } from './modalUseCaseHelp';
-import { UseCaseDetails } from './useCaseDetails';
-
-const CenteredContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- flex: 1;
-`;
-
-const PullLeft = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const BodyScrollingContainer = styled(ScrollingContainer)`
- padding-left: calc(
- ${({ theme }) => theme.space.xxl} + ${({ theme }) => theme.space.xxl}
- );
- padding-right: ${({ theme }) => theme.space.lg};
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0 ${({ theme }) => theme.space.sm};
- }
-`;
-
-const EmptyStateTitle = styled(LG)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- text-align: center;
-`;
-
-const EmptyStateText = styled(Paragraph)`
- color: ${({ theme }) => theme.palette.grey[600]};
- text-align: center;
-`;
-
-const StyledContainerCard = styled(ContainerCard)`
- padding: ${({ theme }) => theme.space.xl};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => `${theme.space.lg} ${theme.space.md}`};
- }
-`;
-
-export const ModalUseCaseBody = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const { t } = useTranslation();
- const { values } = useFormikContext();
- const { use_cases } = values;
-
- const useCaseIndex =
- currentUseCase && use_cases && Array.isArray(use_cases) && use_cases.length
- ? use_cases.findIndex((item) => item.id === currentUseCase.id)
- : 0;
-
- return (
-
-
- {use_cases && currentUseCase && use_cases.length ? (
- <>
-
-
-
- {({ remove }) => (
-
- )}
-
-
- >
- ) : (
-
-
-
- {t(
- '__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_LABEL'
- )}
-
-
- {t(
- '__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_DESCRIPTION'
- )}
-
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHeader.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHeader.tsx
deleted file mode 100644
index 27677a626..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHeader.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import {
- XL,
- Button,
- Anchor,
- IconButton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-circle.svg';
-import { ReactComponent as ArrowLeft } from 'src/assets/icons/chevron-left-icon.svg';
-import useWindowSize from 'src/hooks/useWindowSize';
-import { appTheme } from 'src/app/theme';
-
-const Container = styled.div`
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-grow: 1;
-`;
-
-const ModalTitle = styled(XL)`
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin: ${({ theme }) => theme.space.xxs} 0;
-`;
-
-const TitleContainer = styled.div`
- display: flex;
- flex-direction: column;
-`;
-
-const BackContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: ${({ theme }) => theme.space.xs};
-`;
-
-export const ModalUseCaseHeader = ({ onClose }: { onClose: () => void }) => {
- const { t } = useTranslation();
-
- const { width } = useWindowSize();
- const breakpointSm = parseInt(appTheme.breakpoints.md, 10);
-
- return (
-
-
-
-
-
-
-
-
- {t('__WIZARD_EXPRESS_2_USE_CASE_MODAL_PRE_TITLE')}
-
- {t('__WIZARD_EXPRESS_USE_CASE_MODAL_TITLE')}
-
- {width > breakpointSm && (
-
- )}
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHelp.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHelp.tsx
deleted file mode 100644
index 6ec73a0e9..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseHelp.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import {
- Paragraph,
- Timeline,
- XL,
- XXL,
- Skeleton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as HelpImg } from 'src/assets/modal-use-case-help.svg';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-icon.svg';
-import { ReactComponent as CancelIcon } from 'src/assets/icons/cancel-icon.svg';
-import styled from 'styled-components';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { useAppSelector } from 'src/app/hooks';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import i18n from 'src/i18n';
-import { appTheme } from 'src/app/theme';
-
-export const ScrollingContainer = styled.div`
- overflow-x: hidden;
- overflow-y: auto;
- max-height: calc(
- 100vh - ${({ theme }) => theme.components.chrome.header.height}
- );
- padding: 0;
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-`;
-
-const HelpContainer = styled.div`
- padding: ${({ theme }) => theme.space.xl};
- overflow-x: hidden;
-`;
-
-const GroupTitle = styled.div`
- margin-bottom: ${({ theme }) => theme.space.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin-top: ${({ theme }) => theme.space.lg};
- text-transform: uppercase;
-`;
-
-export const ModalUseCaseHelp = () => {
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading, isFetching, isError } =
- useGeti18nExpressTypesByIdQuery({
- id: expressTypeId.toString(),
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- localizations: {
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- },
- },
- },
- });
-
- const expressType = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- const { use_cases_help: useCaseHelp } = expressType;
-
- return (
-
-
-
- {data && useCaseHelp && !isError && !isFetching && !isLoading ? (
- <>
- {useCaseHelp.title ? (
-
- {useCaseHelp.title}
-
- ) : null}
- {useCaseHelp.description ? (
-
- {useCaseHelp.description}
-
- ) : null}
- {useCaseHelp.suggestions && useCaseHelp.suggestions.length > 0
- ? useCaseHelp.suggestions.map(
- (suggestion: any, index: number) => (
- <>
- {suggestion.group_title && {
- ...(index === useCaseHelp.suggestions.length - 1 ? (
-
- {suggestion.group_title}
-
- ) : (
- {suggestion.group_title}
- )),
- }}
-
- {suggestion.items && suggestion.items.length > 0 && (
-
- {suggestion.items.map((item: any) => (
- :
- }
- hiddenLine
- >
-
-
- {item.title}
-
-
- {item.content}
-
-
-
- ))}
-
- )}
- >
- )
- )
- : null}
- >
- ) : (
- <>
-
-
-
- >
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseTabLayout.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseTabLayout.tsx
deleted file mode 100644
index 0544d863a..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/modalUseCaseTabLayout.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import {
- Card,
- Span,
- getColor,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const Container = styled.div`
- width: 100%;
-`;
-
-const CardTitle = styled(Span)``;
-
-const UseCaseCard = styled(Card)`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- background-color: white;
- text-align: center;
- border: 1px solid ${({ theme }) => theme.palette.grey[300]};
- ${(props) => retrieveComponentStyles('text.primary', props)};
- padding: 0;
- height: ${({ theme }) => theme.space.base * 15}px;
- width: 20%;
- cursor: pointer;
- user-select: none;
-
- &.current-card {
- background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- border: 2px solid ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- color: white;
- }
-
- &.add-card {
- background-color: ${({ theme }) => theme.palette.blue[100]};
- color: ${({ theme }) => theme.palette.grey[600]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
-
- svg {
- margin-bottom: ${({ theme }) => theme.space.base}px;
- margin-right: ${({ theme }) => theme.space.xs};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- margin: 0;
- }
- }
- }
-
- &.empty-card {
- background-color: transparent;
- color: ${({ theme }) => theme.palette.grey[500]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
- pointer-events: none;
- }
-
- &:focus {
- outline: none;
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- ${CardTitle} {
- display: none;
- }
- }
-`;
-
-const UseCasesWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 0 ${({ theme }) => theme.space.xxl};
- width: 100%;
-
- ${UseCaseCard} {
- margin-right: ${({ theme }) => theme.space.sm};
- &:first-child {
- margin-left: 0;
- }
- &:last-child {
- margin-right: 0;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0;
- }
-`;
-
-export const ModalUseCaseTabLayout = ({
- handleCurrentUseCase,
- currentUseCase,
-}: {
- handleCurrentUseCase: (useCase: UseCase) => void;
- currentUseCase?: UseCase;
-}) => {
- const { t } = useTranslation();
- const { values, validateForm } = useFormikContext();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const { use_cases } = values;
-
- const remainingSpots =
- EXPRESS_USE_CASES_LIMIT - (use_cases ? use_cases.length : 0);
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- return (
-
-
- {({ push }) => (
-
- {use_cases &&
- Array.isArray(use_cases) &&
- use_cases.map((useCase: UseCase, index: number) => (
- handleCurrentUseCase(useCase)}
- >
-
- {t(
- '__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL'
- )}{' '}
- {index + 1}
-
-
- ))}
- {use_cases && use_cases.length < EXPRESS_USE_CASES_LIMIT && (
- {
- validateForm().then(() => {
- push({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- handleCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
- });
- }}
- >
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_ADD_USE_CASE_BUTTON'
- )}
-
-
- )}
- {remainingSpots > 0 &&
- [...Array(remainingSpots - 1)].map(() => (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_LABEL')}
-
-
- ))}
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/templateDropdown.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/templateDropdown.tsx
deleted file mode 100644
index e0aa0e10d..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/templateDropdown.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
- Autocomplete,
- DropdownFieldNew as DropdownField,
- ItemContent,
- Label,
- Skeleton,
- Span,
-} from '@appquality/unguess-design-system';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as FunctionalityIcon } from 'src/assets/icons/functionality-icon.svg';
-import { useGetTemplatesQuery } from 'src/features/api';
-import { UseCaseTemplate } from 'src/features/api/api';
-import i18n from 'src/i18n';
-
-export const TemplateDropdown = (props: TemplateDropdownProps) => {
- const { selectedItem, onSelect, deviceType } = props;
- const { t } = useTranslation();
- const { data, isLoading, isFetching } = useGetTemplatesQuery({
- filterBy: {
- device_type: deviceType,
- locale: i18n.language,
- },
- });
-
- const templates = data || [];
-
- // Group templates by category id
- const groupedTemplates = templates.reduce(
- (acc: UseCaseTemplate[][], template: UseCaseTemplate) => {
- const categoryId = template?.category?.id ?? -1;
- if (!acc[categoryId as number]) {
- acc[categoryId as number] = [];
- }
-
- acc[categoryId as number].push(template);
- return acc;
- },
- []
- );
-
- if (!groupedTemplates) return null;
-
- return isLoading || isFetching ? (
-
- ) : (
-
-
- {
- const item = templates.find(
- (template) => template.id === Number(selectionValue)
- );
- if (!item || !item.title) return;
- onSelect(item);
- }}
- startIcon={}
- options={(groupedTemplates || []).map((group) => {
- const category = group[0].category || { name: 'No category', id: 0 };
- return {
- id: (category.id || 0).toString(),
- label: category.name,
- options: group.map((template) => ({
- id: (template.id || 0).toString(),
- value: (template.id || 0).toString(),
- label: template.title,
- isSelected: selectedItem?.id === template.id,
- children: (
-
- ),
- })),
- };
- })}
- />
-
- );
-};
-
-interface TemplateDropdownProps {
- deviceType?: string;
- selectedItem?: UseCaseTemplate;
- onSelect: (item: UseCaseTemplate | undefined) => void;
-}
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetails.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetails.tsx
deleted file mode 100644
index 559741a18..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetails.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AnimatedContainer } from 'src/common/components/animatedContainer';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { UseCaseEditor } from './useCaseDetailsEditor';
-import { UseCaseLink } from './useCaseDetailsLink';
-import { UseCaseTitle } from './useCaseDetailsTitle';
-
-export const UseCaseDetails = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => (
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsDropdown.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsDropdown.tsx
deleted file mode 100644
index 035486aae..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsDropdown.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import {
- FormField,
- Label,
- Paragraph,
- Toggle,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import i18n from 'i18next';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { Divider } from 'src/common/components/divider';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { UseCaseTemplate } from 'src/features/api/api';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { Notes } from 'src/pages/ExpressWizard/notesCard';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { TemplateDropdown } from './templateDropdown';
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const InlineRow = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
-`;
-
-const UseCaseDropdown = ({
- useCase,
- useCaseIndex,
- setEditorContent,
- setIsEditing,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
- setEditorContent: (content: string) => void;
- setIsEditing: (value: boolean) => void;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, setFieldValue, validateForm, values } =
- useFormikContext();
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const [selectedFunc, setSelectedFunc] = useState(
- useCase ? useCase.functionality : undefined
- );
-
- const { data } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- const handleDropdownChange = useCallback(
- (item: UseCaseTemplate | undefined) => {
- let isLogged = emptyUseCase.logged;
- let content =
- expressData && expressData.default_use_case_text
- ? expressData.default_use_case_text
- : emptyUseCase.description;
-
- if (item && item.id !== -1) {
- isLogged = !!item.requiresLogin;
- content = item.content;
- }
-
- setFieldValue(`use_cases[${useCaseIndex}].logged`, isLogged);
- setFieldValue(`use_cases[${useCaseIndex}].description`, content);
- setFieldValue(`use_cases[${useCaseIndex}].functionality`, item);
-
- setEditorContent(content);
- useCase.description = content;
-
- useCase.logged = isLogged;
- useCase.functionality = item;
-
- setSelectedFunc(item ?? undefined);
- validateForm();
- },
- [selectedFunc]
- );
-
- useEffect(() => {
- setSelectedFunc(useCase ? useCase.functionality : undefined);
- setIsEditing(false);
- }, [useCase]);
-
- return (
-
-
-
-
- {!selectedFunc && (
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_FUNCTIONALITY_REQUIRED'
- )}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {values &&
- values.use_cases &&
- values.use_cases[useCaseIndex as number] &&
- values.use_cases[useCaseIndex as number].logged ? (
- <>
-
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LOGGED_FIELD_DESCRIPTION'
- )}
-
-
- >
- ) : null}
-
-
- );
-};
-
-export { UseCaseDropdown };
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsEditor.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsEditor.tsx
deleted file mode 100644
index be9984e50..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsEditor.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import {
- Button,
- Col,
- Editor,
- LG,
- Paragraph,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as EditIcon } from 'src/assets/icons/edit-icon.svg';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { Notes, NotesTitle } from 'src/pages/ExpressWizard/notesCard';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { UseCaseDropdown } from './useCaseDetailsDropdown';
-
-const UseCaseEditor = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { setFieldValue } = useFormikContext();
- const [isEditing, setIsEditing] = useState(false);
- const [editorContent, setEditorContent] = useState(
- useCase ? useCase.description : ''
- );
- const [editorChars, setEditorChars] = useState(
- useCase ? useCase.description.length : 0
- );
-
- const handleSave = useCallback(() => {
- if (editorChars) {
- setFieldValue(`use_cases[${useCaseIndex}].description`, editorContent);
- useCase.description = editorContent;
- setIsEditing(false);
- }
- }, [editorChars, editorContent]);
-
- const memoEditor = useMemo(
- () => (
-
-
- {editorContent}
-
-
-
- ),
- [useCase, editorContent]
- );
-
- useEffect(() => {
- setIsEditing(false);
- }, [useCase]);
-
- return (
- <>
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_DESCRIPTION'
- )}
-
- {isEditing ? (
-
{
- setEditorChars(editor.storage.characterCount.characters());
- setEditorContent(editor.getHTML());
- }}
- hasInlineMenu
- onSave={handleSave}
- >
- {useCase ? useCase.description : ''}
-
- ) : (
- memoEditor
- )}
-
- {isEditing && (
-
-
- {!editorChars ? (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_SUBTITLE'
- )}
-
-
- ) : (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_SUBTITLE'
- )}
-
-
- )}
-
-
-
-
-
-
- )}
- >
- );
-};
-
-export { UseCaseEditor };
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsLink.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsLink.tsx
deleted file mode 100644
index beecd548b..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsLink.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
- Label,
- MediaInput,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseLink = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_SUBTITLE')}
-
-
}
- type="text"
- placeholder={t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_PLACEHOLDER'
- )}
- focusInset
- {...(useCase &&
- useCase.link && {
- value: useCase.link,
- })}
- {...getFieldProps(`use_cases[${useCaseIndex}].link`)}
- {...(useCaseErrors && useCaseErrors?.link && { validation: 'error' })}
- onBlur={() => validateForm()}
- />
- {useCaseErrors && useCaseErrors?.link ? (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_INVALID')}
-
- ) : (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_MESSAGE')}
-
- )}
-
- );
-};
-
-export { UseCaseLink };
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx
deleted file mode 100644
index 90bd072b1..000000000
--- a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { InputToggle, Span } from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseTitle = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
- <>
-
- {t('__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_FIELD_TITLE')}
- *
-
-
- {
- validateForm();
- }}
- />
-
- {useCaseErrors && useCaseErrors?.title && (
-
- {t('__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_REQUIRED')}
-
- )}
- >
- );
-};
-
-export { UseCaseTitle };
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm.tsx b/src/pages/ExpressWizard/steps/express-2/confirm.tsx
deleted file mode 100644
index 4a8270e6c..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import {
- ContainerCard,
- Grid,
- Label,
- Paragraph,
- Row,
- Span,
- Textarea,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useEffect } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { ReactComponent as NotAllowedIcon } from 'src/assets/icons/not-allowed-icon.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { HowConfirm } from './confirm/howConfirm';
-import { WhatConfirm } from './confirm/whatConfirm';
-import { WhereConfirm } from './confirm/whereConfirm';
-import { WhoConfirm } from './confirm/whoConfirm';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
-
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledCard = styled(ContainerCard)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
- padding: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-const StyledTextarea = styled(Textarea)`
- margin-top: ${({ theme }) => theme.space.base * 2}px;
-`;
-
-const TextareaNote = styled(Paragraph)`
- color: ${({ theme }) => theme.palette.grey[600]};
- margin-top: ${({ theme }) => theme.space.base * 3}px;
- font-size: ${({ theme }) => theme.fontSizes.sm};
- line-height: 1.2;
-
- svg {
- margin-bottom: -${({ theme }) => theme.space.base / 2}px;
- margin-right: ${({ theme }) => theme.space.base}px;
- }
-`;
-
-export const ConfirmationStep = (props: FormikProps) => {
- const { values, getFieldProps, setFieldValue } = props;
-
- const hasWhereStep = values.link || values.iOSLink || values.androidLink;
- const hasWhoStep = values.campaign_language;
- const hasHowStep = values?.use_cases?.length;
-
- useEffect(() => {
- // Tryber campaign configuration specific for this XPS campaign
- setFieldValue('has_bug_form', true);
- }, []);
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_TITLE')}
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_DESCRIPTION')}
-
-
-
-
-
-
-
-
- {hasWhereStep ? (
-
-
-
-
-
- ) : null}
-
- {hasWhoStep ? (
-
-
-
-
-
- ) : null}
-
- {hasHowStep ? (
-
-
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_OUT_OF_SCOPE_LABEL')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_MORE_TEXTAREA_NOTE')}
-
-
-
-
-
-
-
- );
-};
-
-export const ConfirmationValidationSchema = Yup.object().shape({
- campaign_name: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/browsers.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/browsers.tsx
deleted file mode 100644
index f009653d3..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/browsers.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Browsers = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withChrome)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_CHROME'));
- if (values.withSafari)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_SAFARI'));
- if (values.withFirefox)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_FIREFOX'));
- if (values.withEdge)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_EDGE'));
-
- return values.customBrowser ? (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_BROWSERS')}
- {items.join(', ')}.
- >
- ) : (
- <>{t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_BROWSERS_EMPTY')}>
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/devices.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/devices.tsx
deleted file mode 100644
index cbf8935eb..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/devices.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Devices = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withSmartphone)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE'));
- if (values.withTablet)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_TABLET'));
- if (values.withDesktop)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_DEVICES')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/howConfirm.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/howConfirm.tsx
deleted file mode 100644
index d75ddf3b4..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/howConfirm.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
- OrderedList,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as HowIcon } from 'src/assets/icons/step-how-icon.svg';
-import styled from 'styled-components';
-import { useTranslation, Trans } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const HowConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const useCasesCount = values.use_cases ? values.use_cases.length : 0;
- const useCases = values.use_cases || [];
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
-
- ,
- }}
- values={{
- use_cases_count: useCasesCount,
- }}
- default="You inserted {{ use_cases_count }} test cases:"
- />
-
- {useCases.map((useCase) => (
-
- {useCase.title};
-
- ))}
-
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/operativeSystems.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/operativeSystems.tsx
deleted file mode 100644
index 6ac04a0eb..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/operativeSystems.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const OperativeSystems = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.isAndroid)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL'));
- if (values.isIOS)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_IOS_LABEL'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_OS')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/whatConfirm.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/whatConfirm.tsx
deleted file mode 100644
index 64c3c6432..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/whatConfirm.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import styled from 'styled-components';
-import { ReactComponent as WhatIcon } from 'src/assets/icons/step-what-icon.svg';
-import { useTranslation, Trans } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhatConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { project } = useAppSelector((state) => state.express);
- const { values } = props;
-
- const productType =
- values.product_type === 'webapp'
- ? t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_WEBAPP_LABEL')
- : t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_MOBILEAPP_LABEL');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
-
- ,
- span_count: ,
- }}
- values={{
- campaign_name: values.campaign_name,
- project_name: project?.name,
- product_type: productType,
- }}
- default="Stai lanciando la campagna {{ campaign_name }} all'interno del progetto {{ project_name }} per {{ product_type }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/whereConfirm.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/whereConfirm.tsx
deleted file mode 100644
index 1b7735829..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/whereConfirm.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhereIcon } from 'src/assets/icons/step-where-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { Browsers } from './browsers';
-import { Devices } from './devices';
-import { OperativeSystems } from './operativeSystems';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhereConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LABEL')}
-
-
-
- {values.product_type === 'webapp' ? (
-
- ) : (
-
- )}
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/confirm/whoConfirm.tsx b/src/pages/ExpressWizard/steps/express-2/confirm/whoConfirm.tsx
deleted file mode 100644
index e136f0bc4..000000000
--- a/src/pages/ExpressWizard/steps/express-2/confirm/whoConfirm.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhoIcon } from 'src/assets/icons/step-who-icon.svg';
-import styled from 'styled-components';
-import { useTranslation, Trans } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { getLanguage } from 'src/pages/ExpressWizard/getLanguage';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhoConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const lang = getLanguage(values.campaign_language || 'en');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
-
- ,
- }}
- default="Testers speak {{ campaign_language }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/forms/ConfirmationForm.tsx b/src/pages/ExpressWizard/steps/express-2/forms/ConfirmationForm.tsx
deleted file mode 100644
index a06007b87..000000000
--- a/src/pages/ExpressWizard/steps/express-2/forms/ConfirmationForm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { WizardSubmit } from 'src/pages/ExpressWizard/wizardSubmit';
-import { Button } from '@appquality/unguess-design-system';
-import { ConfirmationStep } from '../confirm';
-
-export const ConfirmationForm = (props: FormikProps) => (
-
-);
-
-export const ConfirmationFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, formikArgs } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/forms/HowForm.tsx b/src/pages/ExpressWizard/steps/express-2/forms/HowForm.tsx
deleted file mode 100644
index 0e3f73c06..000000000
--- a/src/pages/ExpressWizard/steps/express-2/forms/HowForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { HowStep } from '../how';
-
-export const HowForm = (props: FormikProps) => (
-
-);
-
-export const HowFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/forms/WhatForm.tsx b/src/pages/ExpressWizard/steps/express-2/forms/WhatForm.tsx
deleted file mode 100644
index 9a7992248..000000000
--- a/src/pages/ExpressWizard/steps/express-2/forms/WhatForm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhatStep } from '../what';
-
-export const WhatForm = (props: FormikProps) => (
-
-);
-
-export const WhatFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onNextClick } = props;
-
- return (
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/forms/WhereForm.tsx b/src/pages/ExpressWizard/steps/express-2/forms/WhereForm.tsx
deleted file mode 100644
index 48367e637..000000000
--- a/src/pages/ExpressWizard/steps/express-2/forms/WhereForm.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhereWebStep } from '../whereWeb';
-import { WhereAppStep } from '../whereApp';
-
-export const WhereForm = (props: FormikProps) => {
- const { values } = props;
- return values.product_type === 'webapp' ? (
-
- ) : (
-
- );
-};
-
-export const WhereFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/forms/WhoForm.tsx b/src/pages/ExpressWizard/steps/express-2/forms/WhoForm.tsx
deleted file mode 100644
index dfcc6abad..000000000
--- a/src/pages/ExpressWizard/steps/express-2/forms/WhoForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhoStep } from '../who';
-
-export const WhoForm = (props: FormikProps) => (
-
-);
-
-export const WhoFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/how.tsx b/src/pages/ExpressWizard/steps/express-2/how.tsx
deleted file mode 100644
index 096acdfd6..000000000
--- a/src/pages/ExpressWizard/steps/express-2/how.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import {
- Card,
- ContainerCard,
- Label,
- Paragraph,
- SM,
- Span,
- Textarea,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as RightArrow } from 'src/assets/icons/chevron-right-icon.svg';
-import { ReactComponent as ErrorIcon } from 'src/assets/icons/error-icon.svg';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { ReactComponent as SuccessIcon } from 'src/assets/icons/success-icon.svg';
-import { ReactComponent as WarningIcon } from 'src/assets/icons/warning-icon.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { openUseCaseModal } from 'src/features/express/expressSlice';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { ModalUseCase } from './ModalUseCase/modalUseCase';
-import { HowLoading } from './howLoading';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const UseCaseCardButton = styled(Card)`
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: ${({ theme }) => theme.space.md} ${({ theme }) => theme.space.xl};
- border-radius: ${({ theme }) => theme.borderRadii.xl};
-`;
-
-const UseCaseCardButtonText = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- padding: 0 ${({ theme }) => theme.space.base * 4}px;
- color: ${({ theme }) => theme.palette.grey[800]};
-`;
-
-const UseCaseCardButtonDescription = styled(SM)`
- color: ${({ theme }) => theme.palette.grey[500]};
-`;
-
-const WarningMessage = styled(SM)`
- color: ${({ theme }) => theme.palette.yellow[800]};
-`;
-
-const UseCaseEditLabel = styled(Paragraph)`
- display: flex;
- align-items: center;
- svg {
- margin-right: ${({ theme }) => theme.space.sm};
- }
- ${(props) => retrieveComponentStyles('text.primary', props)};
- margin-right: ${({ theme }) => theme.space.xs};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
-`;
-
-export const HowStep = (props: FormikProps) => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const [currentUseCase, setCurrentUseCase] = useState();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const {
- values,
- getFieldProps,
- setValues,
- validateForm,
- errors,
- touched,
- setTouched,
- } = props;
- const { use_cases } = values;
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- useEffect(() => {
- if (Array.isArray(use_cases) && use_cases.length > 0) {
- validateForm();
- }
- }, []);
-
- if (isLoading) {
- return ;
- }
-
- return (
- <>
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_HOW_SUBTITLE')}
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_FIELD_DESCRIPTION_DESCRIPTION')}
-
-
-
- {use_cases &&
- use_cases.length > 0 &&
- use_cases.map((useCase: UseCase, index: number) => (
- {
- setCurrentUseCase(useCase);
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1] ? (
-
- ) : (
-
- )}
-
-
- {index + 1}/{EXPRESS_USE_CASES_LIMIT}{' '}
- {t('__EXPRESS_2_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL')}
-
- {useCase.title}
- {errors &&
- errors.use_cases &&
- errors.use_cases[useCase.id - 1] && (
-
- {t(
- '__EXPRESS_2_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_INCOMEPLETE_LABEL'
- )}
-
- )}
-
-
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1]
- ? t(
- '__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL_INCOMPLETE'
- )
- : t('__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL')}
-
-
-
- ))}
-
- {use_cases && EXPRESS_USE_CASES_LIMIT - use_cases.length > 0 ? (
- {
- if (values.use_cases) {
- setValues({
- ...values,
- use_cases: [
- ...values.use_cases,
- {
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- },
- ],
- });
- }
-
- setCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- ) : (
-
- )}
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_TITLE')}
-
- {/* UseCase validation message */}
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- {errors.use_cases}
-
- ) : (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_SUBTITLE')}
-
- )}
-
-
-
- ) : null}
- >
- );
-};
-
-export const HowStepValidationSchema = Yup.object().shape({
- test_description: Yup.string().required(
- i18n.t('__EXPRESS_WIZARD_STEP_HOW_FIELD_DESCRIPTION_REQUIRED')
- ),
- use_cases: Yup.array()
- .of(
- Yup.object().shape({
- title: Yup.string().required(),
- functionality: Yup.object().shape({
- title: Yup.string().required(),
- }),
- description: Yup.string().required(),
- link: Yup.string().url(),
- })
- )
- .min(1, i18n.t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_MIN_ERROR')),
-});
diff --git a/src/pages/ExpressWizard/steps/express-2/howLoading.tsx b/src/pages/ExpressWizard/steps/express-2/howLoading.tsx
deleted file mode 100644
index 59b6a30dd..000000000
--- a/src/pages/ExpressWizard/steps/express-2/howLoading.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- ContainerCard,
- Paragraph,
- Skeleton,
-} from '@appquality/unguess-design-system';
-
-export const HowLoading = () => (
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-2/index.ts b/src/pages/ExpressWizard/steps/express-2/index.ts
deleted file mode 100644
index 7a308983d..000000000
--- a/src/pages/ExpressWizard/steps/express-2/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { t } from 'i18next';
-import { WhatStepValidationSchema } from './what';
-import { WhereStepValidationSchema } from './whereWeb';
-import { WhoStepValidationSchema } from './who';
-import { HowStepValidationSchema } from './how';
-import { ConfirmationValidationSchema } from './confirm';
-import { WhatForm, WhatFormButtons } from './forms/WhatForm';
-import { WhereForm, WhereFormButtons } from './forms/WhereForm';
-import { WhoForm, WhoFormButtons } from './forms/WhoForm';
-import { HowForm, HowFormButtons } from './forms/HowForm';
-import {
- ConfirmationForm,
- ConfirmationFormButtons,
-} from './forms/ConfirmationForm';
-
-export const What = {
- id: 'what',
- label: t('__EXPRESS_WIZARD_STEP_WHAT_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION'),
- form: WhatForm,
- validationSchema: WhatStepValidationSchema,
- buttons: WhatFormButtons,
-};
-
-export const Where = {
- id: 'where',
- label: t('__EXPRESS_WIZARD_STEP_WHERE_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION'),
- form: WhereForm,
- validationSchema: WhereStepValidationSchema,
- buttons: WhereFormButtons,
-};
-
-export const Who = {
- id: 'who',
- label: t('__EXPRESS_WIZARD_STEP_WHO_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION'),
- form: WhoForm,
- validationSchema: WhoStepValidationSchema,
- buttons: WhoFormButtons,
-};
-
-export const How = {
- id: 'how',
- label: t('__EXPRESS_WIZARD_STEP_HOW_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_HOW_DESCRIPTION'),
- form: HowForm,
- validationSchema: HowStepValidationSchema,
- buttons: HowFormButtons,
-};
-
-export const Confirmation = {
- id: 'confirmation',
- label: t('__EXPRESS_WIZARD_STEP_CONFIRM_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_CONFIRM_DESCRIPTION'),
- form: ConfirmationForm,
- validationSchema: ConfirmationValidationSchema,
- buttons: ConfirmationFormButtons,
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/what.tsx b/src/pages/ExpressWizard/steps/express-2/what.tsx
deleted file mode 100644
index 15f90b253..000000000
--- a/src/pages/ExpressWizard/steps/express-2/what.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import {
- Col,
- ContainerCard,
- FormField,
- Grid,
- Paragraph,
- RadioCard,
- Row,
- Select,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as FlagIcon } from 'src/assets/icons/flag-icon.svg';
-import { ReactComponent as MobileappIconActive } from 'src/assets/icons/mobileapp-active.svg';
-import { ReactComponent as MobileappIcon } from 'src/assets/icons/mobileapp.svg';
-import { ReactComponent as WebappIconActive } from 'src/assets/icons/webapp-active.svg';
-import { ReactComponent as WebappIcon } from 'src/assets/icons/webapp.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-interface Reasons {
- [key: string]: string;
-}
-
-export const reasonItems: Reasons = {
- 'reason-a': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_1'),
- 'reason-b': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_2'),
- 'reason-c': t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_OPTION_3'),
-};
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledOrCol = styled(Col)`
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- display: none;
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledProductTypeTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-export const WhatStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.product_type);
- const [selectedItem, setSelectedItem] = useState(values.campaign_reason);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('product_type', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION')}
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_LABEL')}
-
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="webapp"
- checked={radioValue === 'webapp'}
- onChecked={handleRadioClick}
- />
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_OR_LABEL')}
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="mobileapp"
- checked={radioValue === 'mobileapp'}
- onChecked={handleRadioClick}
- />
-
-
-
- {errors.product_type && (
-
- {errors.product_type}
-
- )}
-
-
-
- );
-};
-
-export const WhatStepValidationSchema = Yup.object().shape({
- campaign_reason: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_REQUIRED')
- ),
- product_type: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-2/where/outOfScope.tsx b/src/pages/ExpressWizard/steps/express-2/where/outOfScope.tsx
deleted file mode 100644
index 71800472d..000000000
--- a/src/pages/ExpressWizard/steps/express-2/where/outOfScope.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
- FormField as Field,
- Label,
- MD,
- Message,
- Span,
- Textarea,
- Toggle,
- XL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { StyledRow } from './styled';
-
-export const OutOfScopeSection = ({
- errors,
- values,
- getFieldProps,
-}: FormikProps) => {
- const { t } = useTranslation();
-
- return (
- <>
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_TITLE')}
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TOGGLE_LABEL')}
-
-
-
-
-
-
-
-
-
-
-
-
- {values.hasOutOfScope && (
-
-
-
-
-
-
-
-
- )}
- {values.hasOutOfScope && errors.outOfScope && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_ERROR')}
-
-
- )}
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/where/styled.tsx b/src/pages/ExpressWizard/steps/express-2/where/styled.tsx
deleted file mode 100644
index 75e605b7b..000000000
--- a/src/pages/ExpressWizard/steps/express-2/where/styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- FormField as Field,
- Row,
- Span,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-export const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-export const SpacedField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.sm};
-`;
diff --git a/src/pages/ExpressWizard/steps/express-2/whereApp.tsx b/src/pages/ExpressWizard/steps/express-2/whereApp.tsx
deleted file mode 100644
index 682ee312f..000000000
--- a/src/pages/ExpressWizard/steps/express-2/whereApp.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import {
- CheckboxCard,
- ContainerCard,
- Fieldset,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- Radio,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-const InnerField = styled(FormField)`
- margin-top: ${({ theme }) => theme.space.sm};
- margin-left: ${({ theme }) => theme.space.base * 6}px;
-`;
-
-export const WhereAppStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, handleChange, getFieldProps } = props;
- let initialRadioValue = 'none';
- if (values.isIOS) {
- initialRadioValue = 'ios';
- } else if (values.isAndroid) {
- initialRadioValue = 'android';
- }
-
- const [radioValue, setRadioValue] = useState(initialRadioValue);
-
- // Reset web step
- if (values.customBrowser) setFieldValue('customBrowser', false);
- if (values.withDesktop) setFieldValue('withDesktop', false);
-
- useEffect(() => {
- if (radioValue === 'ios') {
- setFieldValue('isIOS', true);
- setFieldValue('isAndroid', false);
- } else if (radioValue === 'android') {
- setFieldValue('isIOS', false);
- setFieldValue('isAndroid', true);
- }
- }, [radioValue, setFieldValue]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose what kind of devices do you want to
- test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- name="withSmartphone"
- defaultChecked={values.withSmartphone}
- onToggle={(isChecked) => {
- setFieldValue('withSmartphone', isChecked);
- }}
- />
-
-
-
-
- }
- iconActive={}
- name="withTablet"
- defaultChecked={values.withTablet}
- onToggle={(isChecked) => {
- setFieldValue('withTablet', isChecked);
- }}
- />
-
-
-
- {(errors.withSmartphone || errors.withTablet) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Operating System --- */}
-
-
- {t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_TITLE')}
-
-
-
-
-
-
-
- {(errors.isIOS || errors.isAndroid) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
-
- )}
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-2/whereWeb.tsx b/src/pages/ExpressWizard/steps/express-2/whereWeb.tsx
deleted file mode 100644
index 72d3819e8..000000000
--- a/src/pages/ExpressWizard/steps/express-2/whereWeb.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-import {
- Checkbox,
- CheckboxCard,
- ContainerCard,
- FormField,
- Hint,
- Input,
- Label,
- MD,
- MediaInput,
- Message,
- Paragraph,
- Row,
- Span,
- Toggle,
- XXL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as LaptopIconActive } from 'src/assets/icons/device-laptop-active.svg';
-import { ReactComponent as LaptopIcon } from 'src/assets/icons/device-laptop.svg';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes, NotesTitle } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import * as Yup from 'yup';
-import { PrimarySpan, SpacedField, StyledRow } from './where/styled';
-
-export const WhereWebStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, getFieldProps } = props;
-
- // Reset App step
- if (values.isIOS) setFieldValue('isIOS', false);
- if (values.isAndroid) setFieldValue('isAndroid', false);
-
- const { t } = useTranslation();
-
- useEffect(() => {
- const atLeastOneChecked =
- values.withChrome ||
- values.withFirefox ||
- values.withSafari ||
- values.withEdge;
- setFieldValue('customBrowserFilled', atLeastOneChecked);
- }, [
- setFieldValue,
- values.withChrome,
- values.withEdge,
- values.withFirefox,
- values.withSafari,
- ]);
-
- // Max two devices allowed
- let selectedDevices = [
- values.withSmartphone,
- values.withTablet,
- values.withDesktop,
- ].filter(Boolean).length;
-
- useEffect(() => {
- selectedDevices = [
- values.withSmartphone,
- values.withTablet,
- values.withDesktop,
- ].filter(Boolean).length;
- }, [values.withSmartphone, values.withTablet, values.withDesktop]);
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose what kind of devices do you want to
- test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- name="withSmartphone"
- defaultChecked={values.withSmartphone}
- onToggle={(isChecked) => {
- setFieldValue('withSmartphone', isChecked);
- }}
- {...(!values.withSmartphone &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
-
- }
- iconActive={}
- name="withTablet"
- defaultChecked={values.withTablet}
- onToggle={(isChecked) => {
- setFieldValue('withTablet', isChecked);
- }}
- {...(!values.withTablet &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
-
- }
- iconActive={}
- name="withDesktop"
- defaultChecked={values.withDesktop}
- onToggle={(isChecked) => {
- setFieldValue('withDesktop', isChecked);
- }}
- {...(!values.withDesktop &&
- selectedDevices > 1 && { card: { isDisabled: true } })}
- />
-
-
-
- {(errors.withSmartphone ||
- errors.withTablet ||
- errors.withDesktop) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Website Url --- */}
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LINK_DESCRIPTION')}
- }
- type="url"
- placeholder="https://www.example.com"
- {...getFieldProps('link')}
- {...(errors.link && { validation: 'error' })}
- />
-
-
- {errors.link
- ? t('__EXPRESS_WIZARD_STEP_WHERE_LINK_ERROR')
- : t('__EXPRESS_WIZARD_STEP_WHERE_LINK_INFO')}
-
-
-
-
-
- {/** --- Browsers --- */}
-
- {/** LG: 32px */}
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TITLE')}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!values.customBrowser ? (
- <>
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_TITLE')}
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_DESCRIPTION')}
-
- >
- ) : (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- )}
-
-
- {values.customBrowser && errors.customBrowserFilled && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_CUSTOM_BROWSER_ERROR')}
-
-
- )}
-
-
- );
-};
-
-export const WhereStepValidationSchema = Yup.object().shape(
- {
- // Where APP STEP
- isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
- is: (isAndroid: boolean, product_type: string) =>
- !isAndroid && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
- is: (isIOS: boolean, product_type: string) =>
- !isIOS && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- iOSLink: Yup.string().url().when('isIOS', {
- is: true,
- then: Yup.string().url().required(),
- }),
- androidLink: Yup.string().url().when('isAndroid', {
- is: true,
- then: Yup.string().url().required(),
- }),
-
- // Where WEB STEP
- link: Yup.string().url().when('product_type', {
- is: 'webapp',
- then: Yup.string().url().required(),
- }),
- withSmartphone: Yup.bool().when(['withTablet', 'withDesktop'], {
- is: (withTablet: boolean, withDesktop: boolean) =>
- !withTablet && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withTablet: Yup.bool().when(['withSmartphone', 'withDesktop'], {
- is: (withSmartphone: boolean, withDesktop: boolean) =>
- !withSmartphone && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withDesktop: Yup.bool().when(['withSmartphone', 'withTablet'], {
- is: (withSmartphone: boolean, withTablet: boolean) =>
- !withSmartphone && !withTablet,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- customBrowser: Yup.bool(),
- customBrowserFilled: Yup.bool().when('customBrowser', {
- is: true,
- then: Yup.bool().oneOf([true], 'Custom Browser is required'),
- }),
- },
- [
- ['withTablet', 'withDesktop'],
- ['withSmartphone', 'withDesktop'],
- ['withSmartphone', 'withTablet'],
- ['isIOS', 'product_type'],
- ['isAndroid', 'product_type'],
- ['isIOS', 'isAndroid'],
- ]
-);
diff --git a/src/pages/ExpressWizard/steps/express-2/who.tsx b/src/pages/ExpressWizard/steps/express-2/who.tsx
deleted file mode 100644
index 2c0373ce4..000000000
--- a/src/pages/ExpressWizard/steps/express-2/who.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {
- ContainerCard,
- FormField as Field,
- Label,
- Message,
- Paragraph,
- Radio,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledLanguageTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-const StyledRadioField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-export const WhoStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.campaign_language);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('campaign_language', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_TITLE')}
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_DESCRIPTION')}
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
-
-
-
- handleRadioClick(e.target.value)}
- >
-
-
-
-
-
- {errors.campaign_language && (
- {errors.campaign_language}
- )}
-
-
- );
-};
-
-export const WhoStepValidationSchema = Yup.object().shape({
- campaign_language: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHO_FIELD_CAMPAIGN_LANGUAGE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/index.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/index.tsx
deleted file mode 100644
index ff9a8c9c2..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ModalUseCase } from './modalUseCase';
-
-export { ModalUseCase };
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCase.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCase.tsx
deleted file mode 100644
index 00449b87b..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCase.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import {
- Col,
- Grid,
- ModalFullScreen,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { closeUseCaseModal } from 'src/features/express/expressSlice';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ModalUseCaseBody } from './modalUseCaseBody';
-import { ModalUseCaseHeader } from './modalUseCaseHeader';
-import { ModalUseCaseHelp } from './modalUseCaseHelp';
-import { ModalUseCaseTabLayout } from './modalUseCaseTabLayout';
-
-const Body = styled(ModalFullScreen.Body)`
- padding: 0;
- overflow-x: hidden;
-
- ::-webkit-scrollbar {
- display: none;
- }
-`;
-
-const ContentCol = styled(Col)`
- flex-wrap: nowrap;
- align-items: stretch;
- align-content: stretch;
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 0;
-`;
-
-const HelpCol = styled(Col)`
- border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
- border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
- background-color: white;
- margin-bottom: 0;
- height: 100%;
- position: sticky;
- top: 0;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.lg}) {
- display: none;
- }
-`;
-
-const TextCasesTabs = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: ${({ theme }) => theme.space.md} 0;
- width: 100%;
- position: sticky;
- top: 0;
- z-index: 1;
- background: #f6f6f8;
- box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
- padding-left: calc(
- ${({ theme }) => theme.space.lg} + ${({ theme }) => theme.space.xxl}
- );
- margin-bottom: ${({ theme }) => theme.space.lg};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => theme.space.md} 0;
- }
-`;
-
-const StyledModal = styled(ModalFullScreen)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-
-const ModalBodyLayout = styled(LayoutWrapper)`
- padding: 0;
-`;
-
-export const ModalUseCase = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const dispatch = useAppDispatch();
- const { validateForm } = useFormikContext();
- const { isUseCaseModalOpen } = useAppSelector((state) => state.express);
-
- const closeModal = () => {
- validateForm().then(() => {
- dispatch(closeUseCaseModal());
- });
- };
-
- return isUseCaseModalOpen ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseBody.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseBody.tsx
deleted file mode 100644
index 51a1fe3eb..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseBody.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
- Button,
- ContainerCard,
- LG,
- Paragraph,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
-import { ReactComponent as EmptyImg } from 'src/assets/modal-use-case-empty.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ScrollingContainer } from './modalUseCaseHelp';
-import { UseCaseDetails } from './useCaseDetails';
-
-const CenteredContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- flex: 1;
-`;
-
-const PullLeft = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const BodyScrollingContainer = styled(ScrollingContainer)`
- padding-left: calc(
- ${({ theme }) => theme.space.xxl} + ${({ theme }) => theme.space.xxl}
- );
- padding-right: ${({ theme }) => theme.space.lg};
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0 ${({ theme }) => theme.space.sm};
- }
-`;
-
-const EmptyStateTitle = styled(LG)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- text-align: center;
-`;
-
-const EmptyStateText = styled(Paragraph)`
- color: ${({ theme }) => theme.palette.grey[600]};
- text-align: center;
-`;
-
-const StyledContainerCard = styled(ContainerCard)`
- padding: ${({ theme }) => theme.space.xl};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => `${theme.space.lg} ${theme.space.md}`};
- }
-`;
-
-export const ModalUseCaseBody = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const { t } = useTranslation();
- const { values } = useFormikContext();
- const { use_cases } = values;
-
- const useCaseIndex =
- currentUseCase && use_cases && Array.isArray(use_cases) && use_cases.length
- ? use_cases.findIndex((item) => item.id === currentUseCase.id)
- : 0;
-
- return (
-
-
- {use_cases && currentUseCase && use_cases.length ? (
- <>
-
-
-
- {({ remove }) => (
-
- )}
-
-
- >
- ) : (
-
-
-
- {t(
- '__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_LABEL'
- )}
-
-
- {t(
- '__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_DESCRIPTION'
- )}
-
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHeader.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHeader.tsx
deleted file mode 100644
index b18a80deb..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHeader.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import {
- XL,
- Button,
- Anchor,
- IconButton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-circle.svg';
-import { ReactComponent as ArrowLeft } from 'src/assets/icons/chevron-left-icon.svg';
-import useWindowSize from 'src/hooks/useWindowSize';
-import { appTheme } from 'src/app/theme';
-
-const Container = styled.div`
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-grow: 1;
-`;
-
-const ModalTitle = styled(XL)`
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin: ${({ theme }) => theme.space.xxs} 0;
-`;
-
-const TitleContainer = styled.div`
- display: flex;
- flex-direction: column;
-`;
-
-const BackContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: ${({ theme }) => theme.space.xs};
-`;
-
-export const ModalUseCaseHeader = ({ onClose }: { onClose: () => void }) => {
- const { t } = useTranslation();
-
- const { width } = useWindowSize();
- const breakpointSm = parseInt(appTheme.breakpoints.md, 10);
-
- return (
-
-
-
-
-
-
-
-
- {t('__WIZARD_EXPRESS_3_USE_CASE_MODAL_PRE_TITLE')}
-
- {t('__WIZARD_EXPRESS_USE_CASE_MODAL_TITLE')}
-
- {width > breakpointSm && (
-
- )}
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHelp.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHelp.tsx
deleted file mode 100644
index f6502610f..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseHelp.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {
- Paragraph,
- Timeline,
- XL,
- XXL,
- Skeleton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as HelpImg } from 'src/assets/modal-use-case-help.svg';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-icon.svg';
-import { ReactComponent as CancelIcon } from 'src/assets/icons/cancel-icon.svg';
-import styled from 'styled-components';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { useAppSelector } from 'src/app/hooks';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import i18n from 'src/i18n';
-import { appTheme } from 'src/app/theme';
-
-export const ScrollingContainer = styled.div`
- overflow-x: hidden;
- overflow-y: auto;
- max-height: calc(
- 100vh - ${({ theme }) => theme.components.chrome.header.height}
- );
- padding: 0;
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-`;
-
-const HelpContainer = styled.div`
- padding: ${({ theme }) => theme.space.xl};
- overflow-x: hidden;
-`;
-
-const GroupTitle = styled.div`
- margin-bottom: ${({ theme }) => theme.space.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin-top: ${({ theme }) => theme.space.lg};
- text-transform: uppercase;
-`;
-
-export const ModalUseCaseHelp = () => {
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading, isFetching, isError } =
- useGeti18nExpressTypesByIdQuery({
- id: expressTypeId.toString(),
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- localizations: {
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- },
- },
- },
- });
-
- const expressType = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
- const { use_cases_help: useCaseHelp } = expressType;
-
- return (
-
-
-
- {data && useCaseHelp && !isError && !isFetching && !isLoading ? (
- <>
- {useCaseHelp.title ? (
-
- {useCaseHelp.title}
-
- ) : null}
- {useCaseHelp.description ? (
-
- {useCaseHelp.description}
-
- ) : null}
- {useCaseHelp.suggestions && useCaseHelp.suggestions.length > 0
- ? useCaseHelp.suggestions.map(
- (suggestion: any, index: number) => (
- <>
- {suggestion.group_title && {
- ...(index === useCaseHelp.suggestions.length - 1 ? (
-
- {suggestion.group_title}
-
- ) : (
- {suggestion.group_title}
- )),
- }}
-
- {suggestion.items && suggestion.items.length > 0 && (
-
- {suggestion.items.map((item: any) => (
- :
- }
- hiddenLine
- >
-
-
- {item.title}
-
-
- {item.content}
-
-
-
- ))}
-
- )}
- >
- )
- )
- : null}
- >
- ) : (
- <>
-
-
-
- >
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseTabLayout.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseTabLayout.tsx
deleted file mode 100644
index 3d3357cce..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/modalUseCaseTabLayout.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import {
- Card,
- Span,
- getColor,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const Container = styled.div`
- width: 100%;
-`;
-
-const CardTitle = styled(Span)``;
-
-const UseCaseCard = styled(Card)`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- background-color: white;
- text-align: center;
- border: 1px solid ${({ theme }) => theme.palette.grey[300]};
- ${(props) => retrieveComponentStyles('text.primary', props)};
- padding: 0;
- height: ${({ theme }) => theme.space.base * 15}px;
- width: 20%;
- cursor: pointer;
- user-select: none;
-
- &.current-card {
- background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- border: 2px solid ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- color: white;
- }
-
- &.add-card {
- background-color: ${({ theme }) => theme.palette.blue[100]};
- color: ${({ theme }) => theme.palette.grey[600]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
-
- svg {
- margin-bottom: ${({ theme }) => theme.space.base}px;
- margin-right: ${({ theme }) => theme.space.xs};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- margin: 0;
- }
- }
- }
-
- &.empty-card {
- background-color: transparent;
- color: ${({ theme }) => theme.palette.grey[500]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
- pointer-events: none;
- }
-
- &:focus {
- outline: none;
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- ${CardTitle} {
- display: none;
- }
- }
-`;
-
-const UseCasesWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 0 ${({ theme }) => theme.space.xxl};
- width: 100%;
-
- ${UseCaseCard} {
- margin-right: ${({ theme }) => theme.space.sm};
- &:first-child {
- margin-left: 0;
- }
- &:last-child {
- margin-right: 0;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0;
- }
-`;
-
-export const ModalUseCaseTabLayout = ({
- handleCurrentUseCase,
- currentUseCase,
-}: {
- handleCurrentUseCase: (useCase: UseCase) => void;
- currentUseCase?: UseCase;
-}) => {
- const { t } = useTranslation();
- const { values, validateForm } = useFormikContext();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const { use_cases } = values;
-
- const remainingSpots =
- EXPRESS_USE_CASES_LIMIT - (use_cases ? use_cases.length : 0);
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- return (
-
-
- {({ push }) => (
-
- {use_cases &&
- Array.isArray(use_cases) &&
- use_cases.map((useCase: UseCase, index: number) => (
- handleCurrentUseCase(useCase)}
- >
-
- {t(
- '__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL'
- )}{' '}
- {index + 1}
-
-
- ))}
- {use_cases && use_cases.length < EXPRESS_USE_CASES_LIMIT && (
- {
- validateForm().then(() => {
- push({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- handleCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
- });
- }}
- >
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_ADD_USE_CASE_BUTTON'
- )}
-
-
- )}
- {remainingSpots > 0 &&
- [...Array(remainingSpots - 1)].map(() => (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_LABEL')}
-
-
- ))}
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetails.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetails.tsx
deleted file mode 100644
index 559741a18..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetails.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AnimatedContainer } from 'src/common/components/animatedContainer';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { UseCaseEditor } from './useCaseDetailsEditor';
-import { UseCaseLink } from './useCaseDetailsLink';
-import { UseCaseTitle } from './useCaseDetailsTitle';
-
-export const UseCaseDetails = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => (
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsEditor.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsEditor.tsx
deleted file mode 100644
index ffcc0aeaa..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsEditor.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import {
- Button,
- Col,
- Editor,
- LG,
- Paragraph,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as EditIcon } from 'src/assets/icons/edit-icon.svg';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { Notes, NotesTitle } from 'src/pages/ExpressWizard/notesCard';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseEditor = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { setFieldValue } = useFormikContext();
- const [isEditing, setIsEditing] = useState(false);
- const [editorContent, setEditorContent] = useState(
- useCase ? useCase.description : ''
- );
- const [editorChars, setEditorChars] = useState(
- useCase ? useCase.description.length : 0
- );
-
- const handleSave = useCallback(() => {
- if (editorChars) {
- setFieldValue(`use_cases[${useCaseIndex}].description`, editorContent);
- useCase.description = editorContent;
- setIsEditing(false);
- }
- }, [editorChars, editorContent]);
-
- const memoEditor = useMemo(
- () => (
-
-
- {editorContent}
-
-
-
- ),
- [useCase, editorContent]
- );
-
- useEffect(() => {
- setIsEditing(false);
- }, [useCase]);
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_INSTRUCTIONS_FIELD_TITLE')}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_INSTRUCTIONS_FIELD_DESCRIPTION'
- )}
-
- {isEditing ? (
-
{
- setEditorChars(editor.storage.characterCount.characters());
- setEditorContent(editor.getHTML());
- }}
- hasInlineMenu
- onSave={handleSave}
- >
- {useCase ? useCase.description : ''}
-
- ) : (
- memoEditor
- )}
- {isEditing && (
-
-
- {!editorChars ? (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_SUBTITLE'
- )}
-
-
- ) : (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_SUBTITLE'
- )}
-
-
- )}
-
-
-
-
-
-
- )}
-
- );
-};
-
-export { UseCaseEditor };
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsLink.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsLink.tsx
deleted file mode 100644
index b9ca3b5be..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsLink.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
- Label,
- MediaInput,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseLink = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_SUBTITLE')}
-
-
}
- type="text"
- placeholder={t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_PLACEHOLDER'
- )}
- focusInset
- {...(useCase &&
- useCase.link && {
- value: useCase.link,
- })}
- {...getFieldProps(`use_cases[${useCaseIndex}].link`)}
- {...(useCaseErrors && useCaseErrors?.link && { validation: 'error' })}
- onBlur={() => validateForm()}
- />
- {useCaseErrors && useCaseErrors?.link ? (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_INVALID')}
-
- ) : (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_MESSAGE')}
-
- )}
-
- );
-};
-
-export { UseCaseLink };
diff --git a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsTitle.tsx b/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsTitle.tsx
deleted file mode 100644
index 6a452b918..000000000
--- a/src/pages/ExpressWizard/steps/express-3/ModalUseCase/useCaseDetailsTitle.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { InputToggle, Span } from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseTitle = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
- <>
-
-
- {t('__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_FIELD_TITLE')}
- *
-
- {
- validateForm();
- }}
- />
-
- {useCaseErrors && useCaseErrors?.title && (
-
- {t('__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_REQUIRED')}
-
- )}
- >
- );
-};
-
-export { UseCaseTitle };
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm.tsx b/src/pages/ExpressWizard/steps/express-3/confirm.tsx
deleted file mode 100644
index 1c0e70e53..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import {
- ContainerCard,
- Paragraph,
- Span,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useEffect } from 'react';
-import { appTheme } from 'src/app/theme';
-import { EXPRESS_3_BUSINESS_DAYS_TO_ADD } from 'src/constants';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { HowConfirm } from './confirm/howConfirm';
-import { WhatConfirm } from './confirm/whatConfirm';
-import { WhereConfirm } from './confirm/whereConfirm';
-import { WhoConfirm } from './confirm/whoConfirm';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
-
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledCard = styled(ContainerCard)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
- padding: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-export const ConfirmationStep = (props: FormikProps) => {
- const { values, setFieldValue } = props;
-
- useEffect(() => {
- // This XPS require more time to be completed, so we update the default duration value
- setFieldValue('base_cp_duration', EXPRESS_3_BUSINESS_DAYS_TO_ADD);
- setFieldValue('target_size', 6);
- }, []);
-
- const hasWhereStep = values.link || values.iOSLink || values.androidLink;
- const hasWhoStep = values.age_range;
- const hasHowStep = values?.use_cases?.length;
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_TITLE')}
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_DESCRIPTION')}
-
-
-
-
-
-
-
-
- {hasWhereStep ? (
-
-
-
-
-
- ) : null}
-
- {hasWhoStep ? (
-
-
-
-
-
- ) : null}
-
- {hasHowStep ? (
-
-
-
-
-
- ) : null}
-
- );
-};
-
-export const ConfirmationValidationSchema = Yup.object().shape({
- campaign_name: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/ageRange.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/ageRange.tsx
deleted file mode 100644
index 20abb11f3..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/ageRange.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const AgeRange = (props: FormikProps) => {
- const { values } = props;
- const { age_range: ageRange } = values;
-
- if (ageRange === 'all')
- return (
-
- Are evenly distributed by age.
-
- );
-
- // Get range start and end values
- const range = ageRange?.split('-') || [];
-
- return range.length ? (
- ,
- age_end_span: ,
- label_span: ,
- }}
- values={{
- age_range_start: range[0],
- age_range_end: range[1],
- }}
- default="Are aged between {{age_range_start}} and {{age_range_end}} years."
- />
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/devices.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/devices.tsx
deleted file mode 100644
index cbf8935eb..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/devices.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Devices = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withSmartphone)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE'));
- if (values.withTablet)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_TABLET'));
- if (values.withDesktop)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_DEVICES')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/digitalization.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/digitalization.tsx
deleted file mode 100644
index 18973a2c9..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/digitalization.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Digitalization = (props: FormikProps) => {
- const { values } = props;
- const { digital_literacy: digitalLiteracy } = values;
-
- switch (digitalLiteracy) {
- case 'expert':
- return (
-
- Have an high level of{' '}
- digital literacy.
-
- );
- case 'intermediate':
- return (
-
- Have a medium level of{' '}
- digital literacy.
-
- );
- case 'beginner':
- return (
-
- Have a low level of{' '}
- digital literacy.
-
- );
- default:
- return (
-
- Are evenly distributed by{' '}
- digital literacy.
-
- );
- }
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/gender.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/gender.tsx
deleted file mode 100644
index 15015f37c..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/gender.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans, useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Gender = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const { gender } = values;
-
- if (gender === 'all')
- return (
-
- Are evenly distributed by gender
- .
-
- );
-
- const translatedGender =
- gender === 'male'
- ? t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE_PLURAL')
- : t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE_PLURAL');
-
- return (
- ,
- }}
- values={{ gender: translatedGender }}
- default="Are {{gender}}."
- />
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/howConfirm.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/howConfirm.tsx
deleted file mode 100644
index aa3fe4e5c..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/howConfirm.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
- OrderedList,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as HowIcon } from 'src/assets/icons/step-how-icon.svg';
-import styled from 'styled-components';
-import { useTranslation, Trans } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const HowConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const useCasesCount = values.use_cases ? values.use_cases.length : 0;
- const useCases = values.use_cases || [];
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
-
- ,
- }}
- values={{
- use_cases_count: useCasesCount,
- }}
- default="You inserted {{ use_cases_count }} test cases:"
- />
-
- {useCases.map((useCase) => (
-
- {useCase.title};
-
- ))}
-
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/language.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/language.tsx
deleted file mode 100644
index 3cd1bbc2c..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/language.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { getLanguage } from 'src/pages/ExpressWizard/getLanguage';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Language = (props: FormikProps) => {
- const { values } = props;
- const { campaign_language: language } = values;
- const lang = getLanguage(language || 'en');
-
- return (
- ,
- }}
- values={{
- spoken_language: lang.label,
- }}
- defaults="Are speaking {{spoken_language}}."
- />
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/operativeSystems.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/operativeSystems.tsx
deleted file mode 100644
index 6ac04a0eb..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/operativeSystems.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const OperativeSystems = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.isAndroid)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL'));
- if (values.isIOS)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_IOS_LABEL'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_OS')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/whatConfirm.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/whatConfirm.tsx
deleted file mode 100644
index 019547c53..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/whatConfirm.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import styled from 'styled-components';
-import { ReactComponent as WhatIcon } from 'src/assets/icons/step-what-icon.svg';
-import { useTranslation, Trans } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhatConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { project } = useAppSelector((state) => state.express);
- const { values } = props;
-
- const productType =
- values.product_type === 'webapp'
- ? t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_WEBAPP_LABEL')
- : t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_MOBILEAPP_LABEL');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
-
- ,
- }}
- values={{
- campaign_name: values.campaign_name,
- project_name: project?.name,
- product_type: productType,
- }}
- default="Stai lanciando la campagna {{ campaign_name }} all'interno del progetto {{ project_name }} per {{ product_type }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/whereConfirm.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/whereConfirm.tsx
deleted file mode 100644
index 010d7d7f5..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/whereConfirm.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhereIcon } from 'src/assets/icons/step-where-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { Devices } from './devices';
-import { OperativeSystems } from './operativeSystems';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhereConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LABEL')}
-
-
-
- {values.product_type === 'mobileapp' ? (
-
- ) : null}
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/confirm/whoConfirm.tsx b/src/pages/ExpressWizard/steps/express-3/confirm/whoConfirm.tsx
deleted file mode 100644
index 805919baf..000000000
--- a/src/pages/ExpressWizard/steps/express-3/confirm/whoConfirm.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhoIcon } from 'src/assets/icons/step-who-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { AgeRange } from './ageRange';
-import { Gender } from './gender';
-import { Digitalization } from './digitalization';
-import { Language } from './language';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhoConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
-
- {t('__EXPRESS_3_WIZARD_STEP_CONFIRM_WHO_TEXT')}:
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/forms/ConfirmationForm.tsx b/src/pages/ExpressWizard/steps/express-3/forms/ConfirmationForm.tsx
deleted file mode 100644
index a06007b87..000000000
--- a/src/pages/ExpressWizard/steps/express-3/forms/ConfirmationForm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { WizardSubmit } from 'src/pages/ExpressWizard/wizardSubmit';
-import { Button } from '@appquality/unguess-design-system';
-import { ConfirmationStep } from '../confirm';
-
-export const ConfirmationForm = (props: FormikProps) => (
-
-);
-
-export const ConfirmationFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, formikArgs } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/forms/HowForm.tsx b/src/pages/ExpressWizard/steps/express-3/forms/HowForm.tsx
deleted file mode 100644
index 0e3f73c06..000000000
--- a/src/pages/ExpressWizard/steps/express-3/forms/HowForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { HowStep } from '../how';
-
-export const HowForm = (props: FormikProps) => (
-
-);
-
-export const HowFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/forms/WhatForm.tsx b/src/pages/ExpressWizard/steps/express-3/forms/WhatForm.tsx
deleted file mode 100644
index 9a7992248..000000000
--- a/src/pages/ExpressWizard/steps/express-3/forms/WhatForm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhatStep } from '../what';
-
-export const WhatForm = (props: FormikProps) => (
-
-);
-
-export const WhatFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onNextClick } = props;
-
- return (
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/forms/WhereForm.tsx b/src/pages/ExpressWizard/steps/express-3/forms/WhereForm.tsx
deleted file mode 100644
index e31900157..000000000
--- a/src/pages/ExpressWizard/steps/express-3/forms/WhereForm.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhereWebStep } from '../whereWeb';
-import { WhereAppStep } from '../whereApp';
-
-export const WhereForm = (props: FormikProps) => {
- const { values } = props;
- return values.product_type === 'webapp' ? (
-
- ) : (
-
- );
-};
-
-export const WhereFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/forms/WhoForm.tsx b/src/pages/ExpressWizard/steps/express-3/forms/WhoForm.tsx
deleted file mode 100644
index d6e7fc05e..000000000
--- a/src/pages/ExpressWizard/steps/express-3/forms/WhoForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhoStep } from '../who';
-
-export const WhoForm = (props: FormikProps) => (
-
-);
-
-export const WhoFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/how.tsx b/src/pages/ExpressWizard/steps/express-3/how.tsx
deleted file mode 100644
index 9dc392388..000000000
--- a/src/pages/ExpressWizard/steps/express-3/how.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-import {
- Card,
- ContainerCard,
- Label,
- Paragraph,
- SM,
- Span,
- Tag,
- Textarea,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as ChatIcon } from 'src/assets/icons/chat-icon.svg';
-import { ReactComponent as RightArrow } from 'src/assets/icons/chevron-right-icon.svg';
-import { ReactComponent as ErrorIcon } from 'src/assets/icons/error-icon.svg';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { ReactComponent as SuccessIcon } from 'src/assets/icons/success-icon.svg';
-import { ReactComponent as UserTaskIcon } from 'src/assets/icons/user-task-icon.svg';
-import { ReactComponent as WarningIcon } from 'src/assets/icons/warning-icon.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { openUseCaseModal } from 'src/features/express/expressSlice';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { ModalUseCase } from './ModalUseCase/modalUseCase';
-import { HowLoading } from './howLoading';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const UseCaseCardButton = styled(Card)`
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: ${({ theme }) => theme.space.md} ${({ theme }) => theme.space.xl};
- border-radius: ${({ theme }) => theme.borderRadii.xl};
-`;
-
-const UseCaseCardButtonText = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- padding: 0 ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const UseCaseCardButtonDescription = styled(SM)`
- color: ${({ theme }) => theme.palette.grey[500]};
-`;
-
-const WarningMessage = styled(SM)`
- color: ${({ theme }) => theme.palette.yellow[800]};
-`;
-
-const UseCaseEditLabel = styled(Paragraph)`
- display: flex;
- align-items: center;
- svg {
- margin-right: ${({ theme }) => theme.space.sm};
- }
- ${(props) => retrieveComponentStyles('text.primary', props)};
- margin-right: ${({ theme }) => theme.space.xs};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
-`;
-
-const TagsContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin-top: ${({ theme }) => theme.space.sm};
-
- > * {
- margin-right: ${({ theme }) => theme.space.xs};
- }
-`;
-
-export const HowStep = (props: FormikProps) => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const [currentUseCase, setCurrentUseCase] = useState();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const { values, getFieldProps, setValues, validateForm, errors, touched } =
- props;
- const { use_cases } = values;
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- useEffect(() => {
- if (Array.isArray(use_cases) && use_cases.length > 0) {
- validateForm();
- }
- }, []);
-
- if (isLoading) {
- return ;
- }
-
- return (
- <>
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL_EXTRA')}
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_UNMODERATED_SUBTITLE')}
-
-
-
-
-
-
-
-
-
-
- ,
- spanBold: ,
- }}
- default="N° User Tasks {{ express_use_cases_limit }}"
- values={{
- express_use_cases_limit: EXPRESS_USE_CASES_LIMIT,
- }}
- />
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_TAG_THINK_ALOUD_LABEL')}
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_FIELD_GOAL_DESCRIPTION')}
-
-
-
- {use_cases &&
- use_cases.length > 0 &&
- use_cases.map((useCase: UseCase, index: number) => (
- {
- setCurrentUseCase(useCase);
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1] ? (
-
- ) : (
-
- )}
-
-
- {index + 1}/{EXPRESS_USE_CASES_LIMIT}{' '}
- {t('__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL')}
-
- {useCase.title}
- {errors &&
- errors.use_cases &&
- errors.use_cases[useCase.id - 1] && (
-
- {t(
- '__EXPRESS_3_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_INCOMEPLETE_LABEL'
- )}
-
- )}
-
-
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1]
- ? t(
- '__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL_INCOMPLETE'
- )
- : t('__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL')}
-
-
-
- ))}
-
- {use_cases && EXPRESS_USE_CASES_LIMIT - use_cases.length > 0 ? (
- {
- if (values.use_cases) {
- setValues({
- ...values,
- use_cases: [
- ...values.use_cases,
- {
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- },
- ],
- });
- }
-
- setCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- ) : (
-
- )}
-
-
- {t('__EXPRESS_3_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_TITLE')}
-
- {/* UseCase validation message */}
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- {errors.use_cases}
-
- ) : (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_SUBTITLE')}
-
- )}
-
-
-
- ) : null}
- >
- );
-};
-
-export const HowStepValidationSchema = Yup.object().shape({
- test_description: Yup.string().required(
- i18n.t('__EXPRESS_WIZARD_STEP_HOW_FIELD_GOAL_REQUIRED')
- ),
- use_cases: Yup.array()
- .of(
- Yup.object().shape({
- title: Yup.string().required(),
- description: Yup.string().required(),
- link: Yup.string().url(),
- })
- )
- .min(1, i18n.t('__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_MIN_ERROR')),
-});
diff --git a/src/pages/ExpressWizard/steps/express-3/howLoading.tsx b/src/pages/ExpressWizard/steps/express-3/howLoading.tsx
deleted file mode 100644
index 59b6a30dd..000000000
--- a/src/pages/ExpressWizard/steps/express-3/howLoading.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- ContainerCard,
- Paragraph,
- Skeleton,
-} from '@appquality/unguess-design-system';
-
-export const HowLoading = () => (
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-3/index.ts b/src/pages/ExpressWizard/steps/express-3/index.ts
deleted file mode 100644
index 7a308983d..000000000
--- a/src/pages/ExpressWizard/steps/express-3/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { t } from 'i18next';
-import { WhatStepValidationSchema } from './what';
-import { WhereStepValidationSchema } from './whereWeb';
-import { WhoStepValidationSchema } from './who';
-import { HowStepValidationSchema } from './how';
-import { ConfirmationValidationSchema } from './confirm';
-import { WhatForm, WhatFormButtons } from './forms/WhatForm';
-import { WhereForm, WhereFormButtons } from './forms/WhereForm';
-import { WhoForm, WhoFormButtons } from './forms/WhoForm';
-import { HowForm, HowFormButtons } from './forms/HowForm';
-import {
- ConfirmationForm,
- ConfirmationFormButtons,
-} from './forms/ConfirmationForm';
-
-export const What = {
- id: 'what',
- label: t('__EXPRESS_WIZARD_STEP_WHAT_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION'),
- form: WhatForm,
- validationSchema: WhatStepValidationSchema,
- buttons: WhatFormButtons,
-};
-
-export const Where = {
- id: 'where',
- label: t('__EXPRESS_WIZARD_STEP_WHERE_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION'),
- form: WhereForm,
- validationSchema: WhereStepValidationSchema,
- buttons: WhereFormButtons,
-};
-
-export const Who = {
- id: 'who',
- label: t('__EXPRESS_WIZARD_STEP_WHO_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION'),
- form: WhoForm,
- validationSchema: WhoStepValidationSchema,
- buttons: WhoFormButtons,
-};
-
-export const How = {
- id: 'how',
- label: t('__EXPRESS_WIZARD_STEP_HOW_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_HOW_DESCRIPTION'),
- form: HowForm,
- validationSchema: HowStepValidationSchema,
- buttons: HowFormButtons,
-};
-
-export const Confirmation = {
- id: 'confirmation',
- label: t('__EXPRESS_WIZARD_STEP_CONFIRM_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_CONFIRM_DESCRIPTION'),
- form: ConfirmationForm,
- validationSchema: ConfirmationValidationSchema,
- buttons: ConfirmationFormButtons,
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/what.tsx b/src/pages/ExpressWizard/steps/express-3/what.tsx
deleted file mode 100644
index a9631420c..000000000
--- a/src/pages/ExpressWizard/steps/express-3/what.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import {
- Col,
- ContainerCard,
- FormField,
- Grid,
- Paragraph,
- RadioCard,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as MobileappIconActive } from 'src/assets/icons/mobileapp-active.svg';
-import { ReactComponent as MobileappIcon } from 'src/assets/icons/mobileapp.svg';
-import { ReactComponent as WebappIconActive } from 'src/assets/icons/webapp-active.svg';
-import { ReactComponent as WebappIcon } from 'src/assets/icons/webapp.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledOrCol = styled(Col)`
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- display: none;
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledProductTypeTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-export const WhatStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.product_type);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('product_type', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_LABEL')}
-
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="webapp"
- checked={radioValue === 'webapp'}
- onChecked={handleRadioClick}
- />
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_OR_LABEL')}
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="mobileapp"
- checked={radioValue === 'mobileapp'}
- onChecked={handleRadioClick}
- />
-
-
-
- {errors.product_type && (
-
- {errors.product_type}
-
- )}
-
-
-
- );
-};
-
-export const WhatStepValidationSchema = Yup.object().shape({
- campaign_reason: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_REQUIRED')
- ),
- product_type: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-3/where/outOfScope.tsx b/src/pages/ExpressWizard/steps/express-3/where/outOfScope.tsx
deleted file mode 100644
index 1bc49a63b..000000000
--- a/src/pages/ExpressWizard/steps/express-3/where/outOfScope.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
- FormField as Field,
- Label,
- MD,
- Message,
- Span,
- Textarea,
- Toggle,
- XL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { StyledRow } from './styled';
-
-export const OutOfScopeSection = ({
- errors,
- values,
- getFieldProps,
-}: FormikProps) => {
- const { t } = useTranslation();
- return (
- <>
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_TITLE')}
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TOGGLE_LABEL')}
-
-
-
-
-
-
-
-
-
-
-
-
- {values.hasOutOfScope && (
-
-
-
-
-
-
-
-
- )}
- {values.hasOutOfScope && errors.outOfScope && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_ERROR')}
-
-
- )}
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/where/styled.tsx b/src/pages/ExpressWizard/steps/express-3/where/styled.tsx
deleted file mode 100644
index 75e605b7b..000000000
--- a/src/pages/ExpressWizard/steps/express-3/where/styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- FormField as Field,
- Row,
- Span,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-export const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-export const SpacedField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.sm};
-`;
diff --git a/src/pages/ExpressWizard/steps/express-3/whereApp.tsx b/src/pages/ExpressWizard/steps/express-3/whereApp.tsx
deleted file mode 100644
index 75e4dad93..000000000
--- a/src/pages/ExpressWizard/steps/express-3/whereApp.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import {
- ContainerCard,
- Fieldset,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- Radio,
- RadioCard,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-const InnerField = styled(FormField)`
- margin-top: ${({ theme }) => theme.space.sm};
- margin-left: ${({ theme }) => theme.space.base * 6}px;
-`;
-
-export const WhereAppStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, handleChange, getFieldProps } = props;
- let initialRadioValue = 'none';
- if (values.isIOS) {
- initialRadioValue = 'ios';
- } else if (values.isAndroid) {
- initialRadioValue = 'android';
- }
-
- const [radioValue, setRadioValue] = useState(initialRadioValue);
-
- // Reset web step
- if (values.customBrowser) setFieldValue('customBrowser', false);
- if (values.withDesktop) setFieldValue('withDesktop', false);
-
- const handleRadioClick = (value: string) => {
- setFieldValue('withSmartphone', value === 'smartphone');
- setFieldValue('withTablet', value === 'tablet');
- };
-
- useEffect(() => {
- if (!values.withSmartphone && !values.withTablet) {
- setFieldValue('withSmartphone', true);
- }
- if (radioValue === 'ios') {
- setFieldValue('isIOS', true);
- setFieldValue('isAndroid', false);
- } else if (radioValue === 'android') {
- setFieldValue('isIOS', false);
- setFieldValue('isAndroid', true);
- }
- }, [radioValue, setFieldValue]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose a device you want to test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- value="smartphone"
- checked={values.withSmartphone}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="tablet"
- checked={values.withTablet}
- onChecked={handleRadioClick}
- />
-
-
-
- {(errors.withSmartphone || errors.withTablet) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Operating System --- */}
-
-
- {t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_TITLE')}
-
-
-
-
-
-
-
- {(errors.isIOS || errors.isAndroid) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
-
- )}
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-3/whereWeb.tsx b/src/pages/ExpressWizard/steps/express-3/whereWeb.tsx
deleted file mode 100644
index dad5a63ad..000000000
--- a/src/pages/ExpressWizard/steps/express-3/whereWeb.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import {
- ContainerCard,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- RadioCard,
- Row,
- Span,
- XXL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as LaptopIconActive } from 'src/assets/icons/device-laptop-active.svg';
-import { ReactComponent as LaptopIcon } from 'src/assets/icons/device-laptop.svg';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import * as Yup from 'yup';
-import { useEffect } from 'react';
-import { PrimarySpan, StyledRow } from './where/styled';
-
-export const WhereWebStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, getFieldProps } = props;
-
- // Reset App step
- if (values.isIOS) setFieldValue('isIOS', false);
- if (values.isAndroid) setFieldValue('isAndroid', false);
-
- const { t } = useTranslation();
-
- useEffect(() => {
- if (!values.withSmartphone && !values.withTablet && !values.withDesktop) {
- setFieldValue('withSmartphone', true);
- }
- }, []);
-
- const handleRadioClick = (value: string) => {
- setFieldValue('withSmartphone', value === 'smartphone');
- setFieldValue('withTablet', value === 'tablet');
- setFieldValue('withDesktop', value === 'desktop');
- };
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose a device you want to test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- value="smartphone"
- checked={values.withSmartphone}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="tablet"
- checked={values.withTablet}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="desktop"
- checked={values.withDesktop}
- onChecked={handleRadioClick}
- />
-
-
-
- {(errors.withSmartphone ||
- errors.withTablet ||
- errors.withDesktop) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Website Url --- */}
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LINK_DESCRIPTION')}
- }
- type="url"
- placeholder="https://www.example.com"
- {...getFieldProps('link')}
- {...(errors.link && { validation: 'error' })}
- />
-
-
- {errors.link
- ? t('__EXPRESS_WIZARD_STEP_WHERE_LINK_ERROR')
- : t('__EXPRESS_WIZARD_STEP_WHERE_LINK_INFO')}
-
-
-
-
-
- );
-};
-
-export const WhereStepValidationSchema = Yup.object().shape(
- {
- // Where APP STEP
- isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
- is: (isAndroid: boolean, product_type: string) =>
- !isAndroid && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
- is: (isIOS: boolean, product_type: string) =>
- !isIOS && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- iOSLink: Yup.string().url().when('isIOS', {
- is: true,
- then: Yup.string().url().required(),
- }),
- androidLink: Yup.string().url().when('isAndroid', {
- is: true,
- then: Yup.string().url().required(),
- }),
-
- // Where WEB STEP
- link: Yup.string().url().when('product_type', {
- is: 'webapp',
- then: Yup.string().url().required(),
- }),
- withSmartphone: Yup.bool().when(['withTablet', 'withDesktop'], {
- is: (withTablet: boolean, withDesktop: boolean) =>
- !withTablet && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withTablet: Yup.bool().when(['withSmartphone', 'withDesktop'], {
- is: (withSmartphone: boolean, withDesktop: boolean) =>
- !withSmartphone && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withDesktop: Yup.bool().when(['withSmartphone', 'withTablet'], {
- is: (withSmartphone: boolean, withTablet: boolean) =>
- !withSmartphone && !withTablet,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- },
- [
- ['withTablet', 'withDesktop'],
- ['withSmartphone', 'withDesktop'],
- ['withSmartphone', 'withTablet'],
- ['isIOS', 'product_type'],
- ['isAndroid', 'product_type'],
- ['isIOS', 'isAndroid'],
- ]
-);
diff --git a/src/pages/ExpressWizard/steps/express-3/who.tsx b/src/pages/ExpressWizard/steps/express-3/who.tsx
deleted file mode 100644
index 6ce9e09c7..000000000
--- a/src/pages/ExpressWizard/steps/express-3/who.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-import {
- ContainerCard,
- FormField as Field,
- Hint,
- Label,
- Message,
- Paragraph,
- Radio,
- Row,
- Span,
- Tag,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as UsersIcon } from 'src/assets/icons/users-icon.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledLanguageTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-const StyledRadioField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const StyledTag = styled(Tag)`
- margin-right: ${({ theme }) => theme.space.sm};
- margin-top: ${({ theme }) => theme.space.xs};
-`;
-
-const UsersTags = () => (
-
-
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_TAG_USERS')}
-
-);
-
-interface RadioItem {
- label: string;
- description?: string;
- value: string;
-}
-
-export const WhoStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [age, setAge] = useState(values.age_range);
- const [gender, setGender] = useState(values.gender);
- const [literacy, setLiteracy] = useState(values.digital_literacy);
- const [language, setLanguage] = useState(values.campaign_language);
-
- const handleLanguageClick = (value: string) => {
- setLanguage(value);
- props.setFieldValue('campaign_language', value);
- };
-
- const handleAgeClick = (value: string) => {
- setAge(value);
- props.setFieldValue('age_range', value);
- };
-
- const handleGenderClick = (value: string) => {
- setGender(value);
- props.setFieldValue('gender', value);
- };
-
- const handleLiteracyClick = (value: string) => {
- setLiteracy(value);
- props.setFieldValue('digital_literacy', value);
- };
-
- const languages = [
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_IT'),
- value: 'it',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_EN'),
- value: 'en',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_ES'),
- value: 'es',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_FR'),
- value: 'fr',
- },
- ];
- const ageRanges = ['18-24', '25-34', '35-54', '55+'];
- const genders: RadioItem[] = [
- { label: t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE'), value: 'male' },
- { label: t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE'), value: 'female' },
- ];
- const literacies: RadioItem[] = [
- {
- label: t('__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_EXPERT'),
- description: t('__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_EXPERT_DESCRIPTION'),
- value: 'expert',
- },
- {
- label: t('__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_INTERMEDIATE'),
- description: t(
- '__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_INTERMEDIATE_DESCRIPTION'
- ),
- value: 'intermediate',
- },
- {
- label: t('__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER'),
- description: t(
- '__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER_DESCRIPTION'
- ),
- value: 'beginner',
- },
- ];
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL_EXTRA')}
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_LABEL_SELECTION_CRITERIA')}
-
-
-
-
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_DEMOGRAPHICS_CRITERIA_TITLE')}
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_DEMOGRAPHICS_CRITERIA_DESCRIPTION')}
-
-
-
- {/* Language Radio buttons */}
-
-
- {languages.map((lang: RadioItem) => (
-
-
-
- handleLanguageClick(e.target.value)}
- >
-
-
-
-
-
- ))}
-
- {errors.campaign_language && (
- {errors.campaign_language}
- )}
-
-
- {/* Age ranges Radio buttons */}
-
-
-
-
-
- handleAgeClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_FIELD_AGE_RANGE_ALL_HINT')}
-
-
-
-
-
-
- {ageRanges.map((ageRange) => (
-
-
-
- handleAgeClick(e.target.value)}
- >
-
-
-
-
-
- ))}
-
- {errors.age_range && (
- {errors.age_range}
- )}
-
-
- {/* Gender Radio buttons */}
-
-
-
-
-
- handleGenderClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_FIELD_GENDER_ALL_HINT')}
-
-
-
-
-
-
- {genders.map((gen: RadioItem) => (
-
-
-
- handleGenderClick(e.target.value)}
- >
-
- {gen.description && {gen.description}}
-
-
-
-
- ))}
-
- {errors.gender && {errors.gender}}
-
-
- {/* Literacy Radio buttons */}
-
-
-
-
-
- handleLiteracyClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_3_WIZARD_STEP_WHO_FIELD_LITERACY_ALL_HINT')}
-
-
-
-
-
-
- {literacies.map((item: RadioItem) => (
-
-
-
- handleLiteracyClick(e.target.value)}
- >
-
- {item.description && {item.description}}
-
-
-
-
- ))}
-
- {errors.digital_literacy && (
- {errors.digital_literacy}
- )}
-
-
- );
-};
-
-export const WhoStepValidationSchema = Yup.object().shape({
- campaign_language: Yup.string(),
-});
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/index.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/index.tsx
deleted file mode 100644
index ff9a8c9c2..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ModalUseCase } from './modalUseCase';
-
-export { ModalUseCase };
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCase.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCase.tsx
deleted file mode 100644
index 00449b87b..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCase.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import {
- Col,
- Grid,
- ModalFullScreen,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { closeUseCaseModal } from 'src/features/express/expressSlice';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ModalUseCaseBody } from './modalUseCaseBody';
-import { ModalUseCaseHeader } from './modalUseCaseHeader';
-import { ModalUseCaseHelp } from './modalUseCaseHelp';
-import { ModalUseCaseTabLayout } from './modalUseCaseTabLayout';
-
-const Body = styled(ModalFullScreen.Body)`
- padding: 0;
- overflow-x: hidden;
-
- ::-webkit-scrollbar {
- display: none;
- }
-`;
-
-const ContentCol = styled(Col)`
- flex-wrap: nowrap;
- align-items: stretch;
- align-content: stretch;
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 0;
-`;
-
-const HelpCol = styled(Col)`
- border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
- border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
- background-color: white;
- margin-bottom: 0;
- height: 100%;
- position: sticky;
- top: 0;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.lg}) {
- display: none;
- }
-`;
-
-const TextCasesTabs = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: ${({ theme }) => theme.space.md} 0;
- width: 100%;
- position: sticky;
- top: 0;
- z-index: 1;
- background: #f6f6f8;
- box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
- padding-left: calc(
- ${({ theme }) => theme.space.lg} + ${({ theme }) => theme.space.xxl}
- );
- margin-bottom: ${({ theme }) => theme.space.lg};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => theme.space.md} 0;
- }
-`;
-
-const StyledModal = styled(ModalFullScreen)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-
-const ModalBodyLayout = styled(LayoutWrapper)`
- padding: 0;
-`;
-
-export const ModalUseCase = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const dispatch = useAppDispatch();
- const { validateForm } = useFormikContext();
- const { isUseCaseModalOpen } = useAppSelector((state) => state.express);
-
- const closeModal = () => {
- validateForm().then(() => {
- dispatch(closeUseCaseModal());
- });
- };
-
- return isUseCaseModalOpen ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseBody.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseBody.tsx
deleted file mode 100644
index dcac1d7ac..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseBody.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
- Button,
- ContainerCard,
- LG,
- Paragraph,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
-import { ReactComponent as EmptyImg } from 'src/assets/modal-use-case-empty.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import { ScrollingContainer } from './modalUseCaseHelp';
-import { UseCaseDetails } from './useCaseDetails';
-
-const CenteredContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- flex: 1;
-`;
-
-const PullLeft = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const BodyScrollingContainer = styled(ScrollingContainer)`
- padding-left: calc(
- ${({ theme }) => theme.space.xxl} + ${({ theme }) => theme.space.xxl}
- );
- padding-right: ${({ theme }) => theme.space.lg};
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0 ${({ theme }) => theme.space.sm};
- }
-`;
-
-const EmptyStateTitle = styled(LG)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- text-align: center;
-`;
-
-const EmptyStateText = styled(Paragraph)`
- color: ${({ theme }) => theme.palette.grey[600]};
- text-align: center;
-`;
-
-const StyledContainerCard = styled(ContainerCard)`
- padding: ${({ theme }) => theme.space.xl};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: ${({ theme }) => `${theme.space.lg} ${theme.space.md}`};
- }
-`;
-
-export const ModalUseCaseBody = ({
- currentUseCase,
- setUseCase,
-}: {
- currentUseCase?: UseCase;
- setUseCase: (item?: UseCase) => void;
-}) => {
- const { t } = useTranslation();
- const { values } = useFormikContext();
- const { use_cases } = values;
-
- const useCaseIndex =
- currentUseCase && use_cases && Array.isArray(use_cases) && use_cases.length
- ? use_cases.findIndex((item) => item.id === currentUseCase.id)
- : 0;
-
- return (
-
-
- {use_cases && currentUseCase && use_cases.length ? (
- <>
-
-
-
- {({ remove }) => (
-
- )}
-
-
- >
- ) : (
-
-
-
- {t(
- '__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_LABEL'
- )}
-
-
- {t(
- '__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_USE_CASE_DESCRIPTION'
- )}
-
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHeader.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHeader.tsx
deleted file mode 100644
index b18a80deb..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHeader.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import {
- XL,
- Button,
- Anchor,
- IconButton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-circle.svg';
-import { ReactComponent as ArrowLeft } from 'src/assets/icons/chevron-left-icon.svg';
-import useWindowSize from 'src/hooks/useWindowSize';
-import { appTheme } from 'src/app/theme';
-
-const Container = styled.div`
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-grow: 1;
-`;
-
-const ModalTitle = styled(XL)`
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin: ${({ theme }) => theme.space.xxs} 0;
-`;
-
-const TitleContainer = styled.div`
- display: flex;
- flex-direction: column;
-`;
-
-const BackContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: ${({ theme }) => theme.space.xs};
-`;
-
-export const ModalUseCaseHeader = ({ onClose }: { onClose: () => void }) => {
- const { t } = useTranslation();
-
- const { width } = useWindowSize();
- const breakpointSm = parseInt(appTheme.breakpoints.md, 10);
-
- return (
-
-
-
-
-
-
-
-
- {t('__WIZARD_EXPRESS_3_USE_CASE_MODAL_PRE_TITLE')}
-
- {t('__WIZARD_EXPRESS_USE_CASE_MODAL_TITLE')}
-
- {width > breakpointSm && (
-
- )}
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHelp.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHelp.tsx
deleted file mode 100644
index 3febacc07..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseHelp.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {
- Paragraph,
- Timeline,
- XL,
- XXL,
- Skeleton,
-} from '@appquality/unguess-design-system';
-import { ReactComponent as HelpImg } from 'src/assets/modal-use-case-help.svg';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-icon.svg';
-import { ReactComponent as CancelIcon } from 'src/assets/icons/cancel-icon.svg';
-import styled from 'styled-components';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { useAppSelector } from 'src/app/hooks';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import i18n from 'src/i18n';
-import { appTheme } from 'src/app/theme';
-
-export const ScrollingContainer = styled.div`
- overflow-x: hidden;
- overflow-y: auto;
- max-height: calc(
- 100vh - ${({ theme }) => theme.components.chrome.header.height}
- );
- padding: 0;
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-`;
-
-const HelpContainer = styled.div`
- padding: ${({ theme }) => theme.space.xl};
- overflow-x: hidden;
-`;
-
-const GroupTitle = styled.div`
- margin-bottom: ${({ theme }) => theme.space.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
- margin-top: ${({ theme }) => theme.space.lg};
- text-transform: uppercase;
-`;
-
-export const ModalUseCaseHelp = () => {
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading, isFetching, isError } =
- useGeti18nExpressTypesByIdQuery({
- id: expressTypeId.toString(),
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- localizations: {
- populate: {
- use_cases_help: {
- populate: {
- suggestions: {
- populate: '*',
- },
- },
- },
- },
- },
- },
- });
-
- const expressType = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
- const { use_cases_help: useCaseHelp } = expressType;
-
- return (
-
-
-
- {data && useCaseHelp && !isError && !isFetching && !isLoading ? (
- <>
- {useCaseHelp.title ? (
-
- {useCaseHelp.title}
-
- ) : null}
- {useCaseHelp.description ? (
-
- {useCaseHelp.description}
-
- ) : null}
- {useCaseHelp.suggestions && useCaseHelp.suggestions.length > 0
- ? useCaseHelp.suggestions.map(
- (suggestion: any, index: number) => (
- <>
- {suggestion.group_title && {
- ...(index === useCaseHelp.suggestions.length - 1 ? (
-
- {suggestion.group_title}
-
- ) : (
- {suggestion.group_title}
- )),
- }}
-
- {suggestion.items && suggestion.items.length > 0 && (
-
- {suggestion.items.map((item: any) => (
- :
- }
- hiddenLine
- >
-
-
- {item.title}
-
-
- {item.content}
-
-
-
- ))}
-
- )}
- >
- )
- )
- : null}
- >
- ) : (
- <>
-
-
-
- >
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseTabLayout.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseTabLayout.tsx
deleted file mode 100644
index e5e92c674..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/modalUseCaseTabLayout.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import {
- Card,
- Span,
- getColor,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FieldArray, useFormikContext } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const Container = styled.div`
- width: 100%;
-`;
-
-const CardTitle = styled(Span)``;
-
-const UseCaseCard = styled(Card)`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- background-color: white;
- text-align: center;
- border: 1px solid ${({ theme }) => theme.palette.grey[300]};
- ${(props) => retrieveComponentStyles('text.primary', props)};
- padding: 0;
- height: ${({ theme }) => theme.space.base * 15}px;
- width: 20%;
- cursor: pointer;
- user-select: none;
-
- &.current-card {
- background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- border: 2px solid ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
- color: white;
- }
-
- &.add-card {
- background-color: ${({ theme }) => theme.palette.blue[100]};
- color: ${({ theme }) => theme.palette.grey[600]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
-
- svg {
- margin-bottom: ${({ theme }) => theme.space.base}px;
- margin-right: ${({ theme }) => theme.space.xs};
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- margin: 0;
- }
- }
- }
-
- &.empty-card {
- background-color: transparent;
- color: ${({ theme }) => theme.palette.grey[500]};
- border: 2px dashed ${({ theme }) => theme.palette.grey[300]};
- pointer-events: none;
- }
-
- &:focus {
- outline: none;
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- ${CardTitle} {
- display: none;
- }
- }
-`;
-
-const UseCasesWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 0 ${({ theme }) => theme.space.xxl};
- width: 100%;
-
- ${UseCaseCard} {
- margin-right: ${({ theme }) => theme.space.sm};
- &:first-child {
- margin-left: 0;
- }
- &:last-child {
- margin-right: 0;
- }
- }
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- padding: 0;
- }
-`;
-
-export const ModalUseCaseTabLayout = ({
- handleCurrentUseCase,
- currentUseCase,
-}: {
- handleCurrentUseCase: (useCase: UseCase) => void;
- currentUseCase?: UseCase;
-}) => {
- const { t } = useTranslation();
- const { values, validateForm } = useFormikContext();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const { use_cases } = values;
-
- const remainingSpots =
- EXPRESS_USE_CASES_LIMIT - (use_cases ? use_cases.length : 0);
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- return (
-
-
- {({ push }) => (
-
- {use_cases &&
- Array.isArray(use_cases) &&
- use_cases.map((useCase: UseCase, index: number) => (
- handleCurrentUseCase(useCase)}
- >
-
- {t(
- '__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL'
- )}{' '}
- {index + 1}
-
-
- ))}
- {use_cases && use_cases.length < EXPRESS_USE_CASES_LIMIT && (
- {
- validateForm().then(() => {
- push({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- handleCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
- });
- }}
- >
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_ADD_USE_CASE_BUTTON'
- )}
-
-
- )}
- {remainingSpots > 0 &&
- [...Array(remainingSpots - 1)].map(() => (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_EMPTY_LABEL')}
-
-
- ))}
-
- )}
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetails.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetails.tsx
deleted file mode 100644
index 559741a18..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetails.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AnimatedContainer } from 'src/common/components/animatedContainer';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { UseCaseEditor } from './useCaseDetailsEditor';
-import { UseCaseLink } from './useCaseDetailsLink';
-import { UseCaseTitle } from './useCaseDetailsTitle';
-
-export const UseCaseDetails = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => (
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsEditor.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsEditor.tsx
deleted file mode 100644
index ffcc0aeaa..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsEditor.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import {
- Button,
- Col,
- Editor,
- LG,
- Paragraph,
- Row,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as EditIcon } from 'src/assets/icons/edit-icon.svg';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { Notes, NotesTitle } from 'src/pages/ExpressWizard/notesCard';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseEditor = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { setFieldValue } = useFormikContext();
- const [isEditing, setIsEditing] = useState(false);
- const [editorContent, setEditorContent] = useState(
- useCase ? useCase.description : ''
- );
- const [editorChars, setEditorChars] = useState(
- useCase ? useCase.description.length : 0
- );
-
- const handleSave = useCallback(() => {
- if (editorChars) {
- setFieldValue(`use_cases[${useCaseIndex}].description`, editorContent);
- useCase.description = editorContent;
- setIsEditing(false);
- }
- }, [editorChars, editorContent]);
-
- const memoEditor = useMemo(
- () => (
-
-
- {editorContent}
-
-
-
- ),
- [useCase, editorContent]
- );
-
- useEffect(() => {
- setIsEditing(false);
- }, [useCase]);
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_INSTRUCTIONS_FIELD_TITLE')}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_INSTRUCTIONS_FIELD_DESCRIPTION'
- )}
-
- {isEditing ? (
-
{
- setEditorChars(editor.storage.characterCount.characters());
- setEditorContent(editor.getHTML());
- }}
- hasInlineMenu
- onSave={handleSave}
- >
- {useCase ? useCase.description : ''}
-
- ) : (
- memoEditor
- )}
- {isEditing && (
-
-
- {!editorChars ? (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_DESCRIPTION_FIELD_ERROR_SUBTITLE'
- )}
-
-
- ) : (
-
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_TITLE'
- )}
-
-
- {t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_NOTES_FIELD_SUBTITLE'
- )}
-
-
- )}
-
-
-
-
-
-
- )}
-
- );
-};
-
-export { UseCaseEditor };
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsLink.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsLink.tsx
deleted file mode 100644
index b9ca3b5be..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsLink.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
- Label,
- MediaInput,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as InfoIcon } from 'src/assets/icons/info-icon.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseLink = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_SUBTITLE')}
-
-
}
- type="text"
- placeholder={t(
- '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_PLACEHOLDER'
- )}
- focusInset
- {...(useCase &&
- useCase.link && {
- value: useCase.link,
- })}
- {...getFieldProps(`use_cases[${useCaseIndex}].link`)}
- {...(useCaseErrors && useCaseErrors?.link && { validation: 'error' })}
- onBlur={() => validateForm()}
- />
- {useCaseErrors && useCaseErrors?.link ? (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_INVALID')}
-
- ) : (
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_MESSAGE')}
-
- )}
-
- );
-};
-
-export { UseCaseLink };
diff --git a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsTitle.tsx b/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsTitle.tsx
deleted file mode 100644
index 5a798c55a..000000000
--- a/src/pages/ExpressWizard/steps/express-4/ModalUseCase/useCaseDetailsTitle.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { InputToggle, Span } from '@appquality/unguess-design-system';
-import { useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { UseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const UseCaseTitle = ({
- useCase,
- useCaseIndex,
-}: {
- useCase: UseCase;
- useCaseIndex: number;
-}) => {
- const { t } = useTranslation();
- const { getFieldProps, validateForm, errors } =
- useFormikContext();
-
- const useCaseErrors =
- errors && errors.use_cases && Array.isArray(errors.use_cases)
- ? (errors.use_cases[useCaseIndex as number] as UseCase)
- : null;
-
- return (
- <>
-
-
- {t('__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_FIELD_TITLE')}
- *
-
- {
- validateForm();
- }}
- />
-
- {useCaseErrors && useCaseErrors?.title && (
-
- {t('__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_REQUIRED')}
-
- )}
- >
- );
-};
-
-export { UseCaseTitle };
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm.tsx b/src/pages/ExpressWizard/steps/express-4/confirm.tsx
deleted file mode 100644
index 3d23fcc36..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
- ContainerCard,
- Paragraph,
- Span,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useEffect } from 'react';
-import { appTheme } from 'src/app/theme';
-import { EXPRESS_4_UX_TAGGING_BUSINESS_DAYS_TO_ADD } from 'src/constants';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { HowConfirm } from './confirm/howConfirm';
-import { WhatConfirm } from './confirm/whatConfirm';
-import { WhereConfirm } from './confirm/whereConfirm';
-import { WhoConfirm } from './confirm/whoConfirm';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
-
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledCard = styled(ContainerCard)`
- background-color: ${({ theme }) => theme.palette.grey[100]};
- padding: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-export const ConfirmationStep = (props: FormikProps) => {
- const { values, setFieldValue } = props;
-
- useEffect(() => {
- // This XPS require more time to be completed, so we update the default duration value
- setFieldValue(
- 'base_cp_duration',
- EXPRESS_4_UX_TAGGING_BUSINESS_DAYS_TO_ADD
- );
- setFieldValue('target_size', 6);
- }, []);
-
- const hasWhereStep = values.link || values.iOSLink || values.androidLink;
- const hasWhoStep = values.age_range;
- const hasHowStep = values?.use_cases?.length;
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_TITLE')}
-
- {t('__EXPRESS_WIZARD_STEP_RECAP_DESCRIPTION')}
-
-
-
-
-
-
-
-
- {hasWhereStep ? (
-
-
-
-
-
- ) : null}
-
- {hasWhoStep ? (
-
-
-
-
-
- ) : null}
-
- {hasHowStep ? (
-
-
-
-
-
- ) : null}
-
- );
-};
-
-export const ConfirmationValidationSchema = Yup.object().shape({
- campaign_name: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/ageRange.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/ageRange.tsx
deleted file mode 100644
index 5f185ca63..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/ageRange.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const AgeRange = (props: FormikProps) => {
- const { values } = props;
- const { age_range: ageRange } = values;
-
- if (ageRange === 'all')
- return (
-
- Are evenly distributed by age.
-
- );
-
- // Get range start and end values
- const range = ageRange?.split('-') || [];
-
- return range.length ? (
- ,
- }}
- values={{
- age_range_start: range[0],
- age_range_end: range[1],
- }}
- default="Are aged between {{ age_range_start }} and {{ age_range_end }} years."
- />
- ) : null;
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/devices.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/devices.tsx
deleted file mode 100644
index cbf8935eb..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/devices.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Devices = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.withSmartphone)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE'));
- if (values.withTablet)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_TABLET'));
- if (values.withDesktop)
- items.push(t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_DEVICES')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/digitalization.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/digitalization.tsx
deleted file mode 100644
index 5858760f1..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/digitalization.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Digitalization = (props: FormikProps) => {
- const { values } = props;
- const { digital_literacy: digitalLiteracy } = values;
-
- switch (digitalLiteracy) {
- case 'expert':
- return (
-
- Have an high level of{' '}
- digital literacy.
-
- );
- case 'intermediate':
- return (
-
- Have a medium level of{' '}
- digital literacy.
-
- );
- case 'beginner':
- return (
-
- Have a low level of{' '}
- digital literacy.
-
- );
- default:
- return (
-
- Are evenly distributed by{' '}
- digital literacy.
-
- );
- }
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/gender.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/gender.tsx
deleted file mode 100644
index 82ad925aa..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/gender.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans, useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Gender = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const { gender } = values;
-
- if (gender === 'all')
- return (
-
- Are evenly distributed by gender
- .
-
- );
-
- const translatedGender =
- gender === 'male'
- ? t('__EXPRESS_4_WIZARD_STEP_WHO_GENDER_MALE_PLURAL')
- : t('__EXPRESS_4_WIZARD_STEP_WHO_GENDER_FEMALE_PLURAL');
-
- return (
- ,
- }}
- values={{ gender: translatedGender }}
- default="Are {{gender}}."
- />
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/howConfirm.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/howConfirm.tsx
deleted file mode 100644
index d75ddf3b4..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/howConfirm.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
- OrderedList,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as HowIcon } from 'src/assets/icons/step-how-icon.svg';
-import styled from 'styled-components';
-import { useTranslation, Trans } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const HowConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
- const useCasesCount = values.use_cases ? values.use_cases.length : 0;
- const useCases = values.use_cases || [];
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
-
- ,
- }}
- values={{
- use_cases_count: useCasesCount,
- }}
- default="You inserted {{ use_cases_count }} test cases:"
- />
-
- {useCases.map((useCase) => (
-
- {useCase.title};
-
- ))}
-
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/language.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/language.tsx
deleted file mode 100644
index 7ad121261..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/language.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
-import { getLanguage } from 'src/pages/ExpressWizard/getLanguage';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const Language = (props: FormikProps) => {
- const { values } = props;
- const { campaign_language: language } = values;
- const lang = getLanguage(language || 'en');
-
- return (
- ,
- }}
- values={{
- spoken_language: lang.label,
- }}
- defaults="Are speaking {{spoken_language}}."
- />
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/operativeSystems.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/operativeSystems.tsx
deleted file mode 100644
index 6ac04a0eb..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/operativeSystems.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Span } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export const OperativeSystems = (props: FormikProps) => {
- const { t } = useTranslation();
-
- const { values } = props;
-
- const items = [];
-
- if (values.isAndroid)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_ANDROID_LABEL'));
- if (values.isIOS)
- items.push(t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_IOS_LABEL'));
-
- return (
- <>
- {t('__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_OS')}
- {items.join(', ')}.
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/whatConfirm.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/whatConfirm.tsx
deleted file mode 100644
index 019547c53..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/whatConfirm.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- Grid,
- Row,
- Label,
- Paragraph,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import styled from 'styled-components';
-import { ReactComponent as WhatIcon } from 'src/assets/icons/step-what-icon.svg';
-import { useTranslation, Trans } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhatConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { project } = useAppSelector((state) => state.express);
- const { values } = props;
-
- const productType =
- values.product_type === 'webapp'
- ? t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_WEBAPP_LABEL')
- : t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_MOBILEAPP_LABEL');
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
-
- ,
- }}
- values={{
- campaign_name: values.campaign_name,
- project_name: project?.name,
- product_type: productType,
- }}
- default="Stai lanciando la campagna {{ campaign_name }} all'interno del progetto {{ project_name }} per {{ product_type }}."
- />
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/whereConfirm.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/whereConfirm.tsx
deleted file mode 100644
index 010d7d7f5..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/whereConfirm.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhereIcon } from 'src/assets/icons/step-where-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { Devices } from './devices';
-import { OperativeSystems } from './operativeSystems';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhereConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
- const { values } = props;
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LABEL')}
-
-
-
- {values.product_type === 'mobileapp' ? (
-
- ) : null}
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/confirm/whoConfirm.tsx b/src/pages/ExpressWizard/steps/express-4/confirm/whoConfirm.tsx
deleted file mode 100644
index 0d3d8efdf..000000000
--- a/src/pages/ExpressWizard/steps/express-4/confirm/whoConfirm.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Grid, Row, Label, Paragraph } from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { ReactComponent as WhoIcon } from 'src/assets/icons/step-who-icon.svg';
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { AgeRange } from './ageRange';
-import { Gender } from './gender';
-import { Digitalization } from './digitalization';
-import { Language } from './language';
-
-const StyledLabel = styled(Label)`
- font-size: ${({ theme }) => theme.fontSizes.sm};
- color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
-const StyledParagraph = styled(Paragraph)`
- margin-top: ${({ theme }) => theme.space.base}px;
-`;
-
-export const WhoConfirm = (props: FormikProps) => {
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
-
- {t('__EXPRESS_4_WIZARD_STEP_CONFIRM_WHO_TEXT')}:
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/forms/ConfirmationForm.tsx b/src/pages/ExpressWizard/steps/express-4/forms/ConfirmationForm.tsx
deleted file mode 100644
index ed800c6b6..000000000
--- a/src/pages/ExpressWizard/steps/express-4/forms/ConfirmationForm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { WizardSubmit } from 'src/pages/ExpressWizard/wizardSubmit';
-import { Button } from '@appquality/unguess-design-system';
-import { ConfirmationStep } from '../confirm';
-
-export const ConfirmationForm = (props: FormikProps) => (
-
-);
-
-export const ConfirmationFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, formikArgs } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/forms/HowForm.tsx b/src/pages/ExpressWizard/steps/express-4/forms/HowForm.tsx
deleted file mode 100644
index 8f43d4cfd..000000000
--- a/src/pages/ExpressWizard/steps/express-4/forms/HowForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { HowStep } from '../how';
-
-export const HowForm = (props: FormikProps) => (
-
-);
-
-export const HowFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/forms/WhatForm.tsx b/src/pages/ExpressWizard/steps/express-4/forms/WhatForm.tsx
deleted file mode 100644
index 9a7992248..000000000
--- a/src/pages/ExpressWizard/steps/express-4/forms/WhatForm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhatStep } from '../what';
-
-export const WhatForm = (props: FormikProps) => (
-
-);
-
-export const WhatFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onNextClick } = props;
-
- return (
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/forms/WhereForm.tsx b/src/pages/ExpressWizard/steps/express-4/forms/WhereForm.tsx
deleted file mode 100644
index e31900157..000000000
--- a/src/pages/ExpressWizard/steps/express-4/forms/WhereForm.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhereWebStep } from '../whereWeb';
-import { WhereAppStep } from '../whereApp';
-
-export const WhereForm = (props: FormikProps) => {
- const { values } = props;
- return values.product_type === 'webapp' ? (
-
- ) : (
-
- );
-};
-
-export const WhereFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/forms/WhoForm.tsx b/src/pages/ExpressWizard/steps/express-4/forms/WhoForm.tsx
deleted file mode 100644
index dfcc6abad..000000000
--- a/src/pages/ExpressWizard/steps/express-4/forms/WhoForm.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { WizardButtonsProps } from 'src/pages/ExpressWizard/steps/types';
-import { Button } from '@appquality/unguess-design-system';
-import { WhoStep } from '../who';
-
-export const WhoForm = (props: FormikProps) => (
-
-);
-
-export const WhoFormButtons = (props: WizardButtonsProps) => {
- const { t } = useTranslation();
- const { onBackClick, onNextClick } = props;
-
- return (
- <>
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/how.tsx b/src/pages/ExpressWizard/steps/express-4/how.tsx
deleted file mode 100644
index e56671d4a..000000000
--- a/src/pages/ExpressWizard/steps/express-4/how.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-import {
- Card,
- ContainerCard,
- Label,
- Paragraph,
- SM,
- Span,
- Tag,
- Textarea,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import i18n from 'i18next';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as ChatIcon } from 'src/assets/icons/chat-icon.svg';
-import { ReactComponent as RightArrow } from 'src/assets/icons/chevron-right-icon.svg';
-import { ReactComponent as ErrorIcon } from 'src/assets/icons/error-icon.svg';
-import { ReactComponent as AddIcon } from 'src/assets/icons/plus-water-circle-add-icon.svg';
-import { ReactComponent as SuccessIcon } from 'src/assets/icons/success-icon.svg';
-import { ReactComponent as UserTaskIcon } from 'src/assets/icons/user-task-icon.svg';
-import { ReactComponent as WarningIcon } from 'src/assets/icons/warning-icon.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { getLocalizedStrapiData } from 'src/common/utils';
-import { EXPRESS_USE_CASES_LIMIT } from 'src/constants';
-import { useGeti18nExpressTypesByIdQuery } from 'src/features/backoffice/strapi';
-import { openUseCaseModal } from 'src/features/express/expressSlice';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { UseCase, emptyUseCase } from 'src/pages/ExpressWizard/fields/how';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-import { ModalUseCase } from './ModalUseCase/modalUseCase';
-import { HowLoading } from './howLoading';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const UseCaseCardButton = styled(Card)`
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: ${({ theme }) => theme.space.md} ${({ theme }) => theme.space.xl};
- border-radius: ${({ theme }) => theme.borderRadii.xl};
-`;
-
-const UseCaseCardButtonText = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- padding: 0 ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const UseCaseCardButtonDescription = styled(SM)`
- color: ${({ theme }) => theme.palette.grey[500]};
-`;
-
-const WarningMessage = styled(SM)`
- color: ${({ theme }) => theme.palette.yellow[800]};
-`;
-
-const UseCaseEditLabel = styled(Paragraph)`
- display: flex;
- align-items: center;
- svg {
- margin-right: ${({ theme }) => theme.space.sm};
- }
- ${(props) => retrieveComponentStyles('text.primary', props)};
- margin-right: ${({ theme }) => theme.space.xs};
- font-weight: ${({ theme }) => theme.fontWeights.medium};
-`;
-
-const TagsContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin-top: ${({ theme }) => theme.space.sm};
-
- > * {
- margin-right: ${({ theme }) => theme.space.xs};
- }
-`;
-
-export const HowStep = (props: FormikProps) => {
- const { t } = useTranslation();
- const dispatch = useAppDispatch();
- const [currentUseCase, setCurrentUseCase] = useState();
- const [highestUseCaseId, setHighestUseCaseId] = useState(0);
- const { values, getFieldProps, setValues, validateForm, errors, touched } =
- props;
- const { use_cases } = values;
-
- const { expressTypeId } = useAppSelector((state) => state.express);
-
- const { data, isLoading } = useGeti18nExpressTypesByIdQuery({
- id: expressTypeId?.toString() || '0',
- populate: {
- localizations: {
- populate: '*',
- },
- },
- });
-
- const expressData = getLocalizedStrapiData({
- item: data,
- language: i18n.language,
- });
-
- useEffect(() => {
- if (Array.isArray(use_cases)) {
- const highestUCId = use_cases.reduce(
- (highestId, useCase) => Math.max(highestId, useCase.id),
- 0
- );
- setHighestUseCaseId(highestUCId);
- }
- }, [use_cases]);
-
- useEffect(() => {
- if (Array.isArray(use_cases) && use_cases.length > 0) {
- validateForm();
- }
- }, []);
-
- if (isLoading) {
- return ;
- }
-
- return (
- <>
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_HOW_LABEL_EXTRA')}
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_UNMODERATED_SUBTITLE')}
-
-
-
-
-
-
-
-
-
-
- ,
- }}
- defaults="N° User Tasks {{ express_use_cases_limit }}"
- values={{ express_use_cases_limit: EXPRESS_USE_CASES_LIMIT }}
- />
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_TAG_THINK_ALOUD_LABEL')}
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_HOW_FIELD_GOAL_DESCRIPTION')}
-
-
-
- {use_cases &&
- use_cases.length > 0 &&
- use_cases.map((useCase: UseCase, index: number) => (
- {
- setCurrentUseCase(useCase);
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1] ? (
-
- ) : (
-
- )}
-
-
- {index + 1}/{EXPRESS_USE_CASES_LIMIT}{' '}
- {t('__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL')}
-
- {useCase.title}
- {errors &&
- errors.use_cases &&
- errors.use_cases[useCase.id - 1] && (
-
- {t(
- '__EXPRESS_4_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_INCOMEPLETE_LABEL'
- )}
-
- )}
-
-
- {errors && errors.use_cases && errors.use_cases[useCase.id - 1]
- ? t(
- '__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL_INCOMPLETE'
- )
- : t('__EXPRESS_WIZARD_STEP_HOW_EDIT_USE_CASE_CARD_LABEL')}
-
-
-
- ))}
-
- {use_cases && EXPRESS_USE_CASES_LIMIT - use_cases.length > 0 ? (
- {
- if (values.use_cases) {
- setValues({
- ...values,
- use_cases: [
- ...values.use_cases,
- {
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- },
- ],
- });
- }
-
- setCurrentUseCase({
- ...emptyUseCase,
- ...(expressData &&
- expressData.default_use_case_text && {
- description: expressData.default_use_case_text,
- }),
- id: highestUseCaseId + 1,
- });
-
- dispatch(openUseCaseModal());
- }}
- style={{ marginTop: appTheme.space.md }}
- >
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- ) : (
-
- )}
-
-
- {t('__EXPRESS_4_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_TITLE')}
-
- {/* UseCase validation message */}
- {errors &&
- touched.use_cases &&
- errors.use_cases &&
- typeof errors.use_cases === 'string' ? (
-
- {errors.use_cases}
-
- ) : (
-
- {t('__EXPRESS_WIZARD_STEP_HOW_ADD_USE_CASE_CARD_SUBTITLE')}
-
- )}
-
-
-
- ) : null}
- >
- );
-};
-
-export const HowStepValidationSchema = Yup.object().shape({
- test_description: Yup.string().required(
- i18n.t('__EXPRESS_WIZARD_STEP_HOW_FIELD_GOAL_REQUIRED')
- ),
- use_cases: Yup.array()
- .of(
- Yup.object().shape({
- title: Yup.string().required(),
- description: Yup.string().required(),
- link: Yup.string().url(),
- })
- )
- .min(1, i18n.t('__EXPRESS_4_WIZARD_STEP_HOW_USE_CASE_MODAL_MIN_ERROR')),
-});
diff --git a/src/pages/ExpressWizard/steps/express-4/howLoading.tsx b/src/pages/ExpressWizard/steps/express-4/howLoading.tsx
deleted file mode 100644
index 59b6a30dd..000000000
--- a/src/pages/ExpressWizard/steps/express-4/howLoading.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- ContainerCard,
- Paragraph,
- Skeleton,
-} from '@appquality/unguess-design-system';
-
-export const HowLoading = () => (
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/src/pages/ExpressWizard/steps/express-4/index.ts b/src/pages/ExpressWizard/steps/express-4/index.ts
deleted file mode 100644
index 7a308983d..000000000
--- a/src/pages/ExpressWizard/steps/express-4/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { t } from 'i18next';
-import { WhatStepValidationSchema } from './what';
-import { WhereStepValidationSchema } from './whereWeb';
-import { WhoStepValidationSchema } from './who';
-import { HowStepValidationSchema } from './how';
-import { ConfirmationValidationSchema } from './confirm';
-import { WhatForm, WhatFormButtons } from './forms/WhatForm';
-import { WhereForm, WhereFormButtons } from './forms/WhereForm';
-import { WhoForm, WhoFormButtons } from './forms/WhoForm';
-import { HowForm, HowFormButtons } from './forms/HowForm';
-import {
- ConfirmationForm,
- ConfirmationFormButtons,
-} from './forms/ConfirmationForm';
-
-export const What = {
- id: 'what',
- label: t('__EXPRESS_WIZARD_STEP_WHAT_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION'),
- form: WhatForm,
- validationSchema: WhatStepValidationSchema,
- buttons: WhatFormButtons,
-};
-
-export const Where = {
- id: 'where',
- label: t('__EXPRESS_WIZARD_STEP_WHERE_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION'),
- form: WhereForm,
- validationSchema: WhereStepValidationSchema,
- buttons: WhereFormButtons,
-};
-
-export const Who = {
- id: 'who',
- label: t('__EXPRESS_WIZARD_STEP_WHO_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_WHO_DESCRIPTION'),
- form: WhoForm,
- validationSchema: WhoStepValidationSchema,
- buttons: WhoFormButtons,
-};
-
-export const How = {
- id: 'how',
- label: t('__EXPRESS_WIZARD_STEP_HOW_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_HOW_DESCRIPTION'),
- form: HowForm,
- validationSchema: HowStepValidationSchema,
- buttons: HowFormButtons,
-};
-
-export const Confirmation = {
- id: 'confirmation',
- label: t('__EXPRESS_WIZARD_STEP_CONFIRM_LABEL'),
- content: t('__EXPRESS_WIZARD_STEP_CONFIRM_DESCRIPTION'),
- form: ConfirmationForm,
- validationSchema: ConfirmationValidationSchema,
- buttons: ConfirmationFormButtons,
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/what.tsx b/src/pages/ExpressWizard/steps/express-4/what.tsx
deleted file mode 100644
index a9631420c..000000000
--- a/src/pages/ExpressWizard/steps/express-4/what.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import {
- Col,
- ContainerCard,
- FormField,
- Grid,
- Paragraph,
- RadioCard,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as MobileappIconActive } from 'src/assets/icons/mobileapp-active.svg';
-import { ReactComponent as MobileappIcon } from 'src/assets/icons/mobileapp.svg';
-import { ReactComponent as WebappIconActive } from 'src/assets/icons/webapp-active.svg';
-import { ReactComponent as WebappIcon } from 'src/assets/icons/webapp.svg';
-import { HelpTextMessage } from 'src/common/components/helpTextMessage';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledOrCol = styled(Col)`
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- @media screen and (max-width: ${({ theme }) => theme.breakpoints.sm}) {
- display: none;
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledProductTypeTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-export const WhatStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [radioValue, setRadioValue] = useState(values.product_type);
-
- const handleRadioClick = (value: string) => {
- setRadioValue(value);
- props.setFieldValue('product_type', value);
- };
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHAT_LABEL_EXTRA')}
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION')}
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_LABEL')}
-
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="webapp"
- checked={radioValue === 'webapp'}
- onChecked={handleRadioClick}
- />
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_OR_LABEL')}
-
-
-
-
- }
- iconActive={}
- {...props.getFieldProps('product_type')}
- {...(errors.product_type && { validation: 'error' })}
- value="mobileapp"
- checked={radioValue === 'mobileapp'}
- onChecked={handleRadioClick}
- />
-
-
-
- {errors.product_type && (
-
- {errors.product_type}
-
- )}
-
-
-
- );
-};
-
-export const WhatStepValidationSchema = Yup.object().shape({
- campaign_reason: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_REQUIRED')
- ),
- product_type: Yup.string().required(
- t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_PRODUCT_TYPE_REQUIRED')
- ),
-});
diff --git a/src/pages/ExpressWizard/steps/express-4/where/outOfScope.tsx b/src/pages/ExpressWizard/steps/express-4/where/outOfScope.tsx
deleted file mode 100644
index 2f1665af6..000000000
--- a/src/pages/ExpressWizard/steps/express-4/where/outOfScope.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
- FormField as Field,
- Label,
- MD,
- Message,
- Span,
- Textarea,
- Toggle,
- XL,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { Notes } from 'src/pages/ExpressWizard/notesCard';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import { StyledRow } from './styled';
-
-export const OutOfScopeSection = ({
- errors,
- values,
- getFieldProps,
-}: FormikProps) => {
- const { t } = useTranslation();
-
- return (
- <>
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_TITLE')}
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_DESCRIPTION')}
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_BROWSER_TOGGLE_LABEL')}
-
-
-
-
-
-
-
-
-
-
-
-
- {values.hasOutOfScope && (
-
-
-
-
-
-
-
-
- )}
- {values.hasOutOfScope && errors.outOfScope && (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_OUT_OF_SCOPE_ERROR')}
-
-
- )}
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/where/styled.tsx b/src/pages/ExpressWizard/steps/express-4/where/styled.tsx
deleted file mode 100644
index 75e605b7b..000000000
--- a/src/pages/ExpressWizard/steps/express-4/where/styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
- FormField as Field,
- Row,
- Span,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-export const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-export const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-export const SpacedField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.sm};
-`;
diff --git a/src/pages/ExpressWizard/steps/express-4/whereApp.tsx b/src/pages/ExpressWizard/steps/express-4/whereApp.tsx
deleted file mode 100644
index 47d10f2cd..000000000
--- a/src/pages/ExpressWizard/steps/express-4/whereApp.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import {
- ContainerCard,
- Fieldset,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- Radio,
- RadioCard,
- Row,
- Span,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-
-const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const PrimarySpan = styled(Span)`
- ${(props) => retrieveComponentStyles('text.primary', props)};
-`;
-
-const InnerField = styled(FormField)`
- margin-top: ${({ theme }) => theme.space.sm};
- margin-left: ${({ theme }) => theme.space.base * 6}px;
-`;
-
-export const WhereAppStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, handleChange, getFieldProps } = props;
- let initialRadioValue = 'none';
- if (values.isIOS) {
- initialRadioValue = 'ios';
- } else if (values.isAndroid) {
- initialRadioValue = 'android';
- }
-
- const [radioValue, setRadioValue] = useState(initialRadioValue);
-
- // Reset web step
- if (values.customBrowser) setFieldValue('customBrowser', false);
- if (values.withDesktop) setFieldValue('withDesktop', false);
-
- const handleRadioClick = (value: string) => {
- setFieldValue('withSmartphone', value === 'smartphone');
- setFieldValue('withTablet', value === 'tablet');
- };
-
- useEffect(() => {
- if (!values.withSmartphone && !values.withTablet) {
- setFieldValue('withSmartphone', true);
- }
- if (radioValue === 'ios') {
- setFieldValue('isIOS', true);
- setFieldValue('isAndroid', false);
- } else if (radioValue === 'android') {
- setFieldValue('isIOS', false);
- setFieldValue('isAndroid', true);
- }
- }, [radioValue, setFieldValue]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose a device you want to test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- value="smartphone"
- checked={values.withSmartphone}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="tablet"
- checked={values.withTablet}
- onChecked={handleRadioClick}
- />
-
-
-
- {(errors.withSmartphone || errors.withTablet) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Operating System --- */}
-
-
- {t('__EXPRESS_WIZARD_STEP_APP_WHERE_OS_TITLE')}
-
-
-
-
-
-
-
- {(errors.isIOS || errors.isAndroid) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
-
- )}
-
-
-
- );
-};
diff --git a/src/pages/ExpressWizard/steps/express-4/whereWeb.tsx b/src/pages/ExpressWizard/steps/express-4/whereWeb.tsx
deleted file mode 100644
index 601caf5f6..000000000
--- a/src/pages/ExpressWizard/steps/express-4/whereWeb.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import {
- ContainerCard,
- FormField,
- Hint,
- Label,
- MD,
- MediaInput,
- Message,
- RadioCard,
- Row,
- Span,
- XXL,
- theme,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { Trans, useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as LaptopIconActive } from 'src/assets/icons/device-laptop-active.svg';
-import { ReactComponent as LaptopIcon } from 'src/assets/icons/device-laptop.svg';
-import { ReactComponent as SmartphoneIconActive } from 'src/assets/icons/device-smartphone-active.svg';
-import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/device-smartphone.svg';
-import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tablet-active.svg';
-import { ReactComponent as TabletIcon } from 'src/assets/icons/device-tablet.svg';
-import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import * as Yup from 'yup';
-import { useEffect } from 'react';
-import { PrimarySpan, StyledRow } from './where/styled';
-
-export const WhereWebStep = (props: FormikProps) => {
- const { errors, values, setFieldValue, getFieldProps } = props;
-
- // Reset App step
- if (values.isIOS) setFieldValue('isIOS', false);
- if (values.isAndroid) setFieldValue('isAndroid', false);
-
- const { t } = useTranslation();
-
- useEffect(() => {
- if (!values.withSmartphone && !values.withTablet && !values.withDesktop) {
- setFieldValue('withSmartphone', true);
- }
- }, []);
-
- const handleRadioClick = (value: string) => {
- setFieldValue('withSmartphone', value === 'smartphone');
- setFieldValue('withTablet', value === 'tablet');
- setFieldValue('withDesktop', value === 'desktop');
- };
-
- return (
-
-
-
-
-
- Where
- do we test?
-
-
-
-
- Choose a device you want to test on
-
- *
-
-
-
-
-
-
- {/** --- Device Type Checkboxes --- */}
-
-
-
- }
- iconActive={}
- value="smartphone"
- checked={values.withSmartphone}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="tablet"
- checked={values.withTablet}
- onChecked={handleRadioClick}
- />
-
-
-
-
- }
- iconActive={}
- value="desktop"
- checked={values.withDesktop}
- onChecked={handleRadioClick}
- />
-
-
-
- {(errors.withSmartphone ||
- errors.withTablet ||
- errors.withDesktop) && (
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR')}
-
- )}
-
-
-
- {/** --- Website Url --- */}
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_WHERE_LINK_DESCRIPTION')}
- }
- type="url"
- placeholder="https://www.example.com"
- {...getFieldProps('link')}
- {...(errors.link && { validation: 'error' })}
- />
-
-
- {errors.link
- ? t('__EXPRESS_WIZARD_STEP_WHERE_LINK_ERROR')
- : t('__EXPRESS_WIZARD_STEP_WHERE_LINK_INFO')}
-
-
-
-
-
- );
-};
-
-export const WhereStepValidationSchema = Yup.object().shape(
- {
- // Where APP STEP
- isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
- is: (isAndroid: boolean, product_type: string) =>
- !isAndroid && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
- is: (isIOS: boolean, product_type: string) =>
- !isIOS && product_type === 'mobileapp',
- then: Yup.bool().oneOf([true], 'Operating system is required'),
- }),
- iOSLink: Yup.string().url().when('isIOS', {
- is: true,
- then: Yup.string().url().required(),
- }),
- androidLink: Yup.string().url().when('isAndroid', {
- is: true,
- then: Yup.string().url().required(),
- }),
-
- // Where WEB STEP
- link: Yup.string().url().when('product_type', {
- is: 'webapp',
- then: Yup.string().url().required(),
- }),
- withSmartphone: Yup.bool().when(['withTablet', 'withDesktop'], {
- is: (withTablet: boolean, withDesktop: boolean) =>
- !withTablet && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withTablet: Yup.bool().when(['withSmartphone', 'withDesktop'], {
- is: (withSmartphone: boolean, withDesktop: boolean) =>
- !withSmartphone && !withDesktop,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- withDesktop: Yup.bool().when(['withSmartphone', 'withTablet'], {
- is: (withSmartphone: boolean, withTablet: boolean) =>
- !withSmartphone && !withTablet,
- then: Yup.bool().oneOf([true], 'Device type is required'),
- }),
- },
- [
- ['withTablet', 'withDesktop'],
- ['withSmartphone', 'withDesktop'],
- ['withSmartphone', 'withTablet'],
- ['isIOS', 'product_type'],
- ['isAndroid', 'product_type'],
- ['isIOS', 'isAndroid'],
- ]
-);
diff --git a/src/pages/ExpressWizard/steps/express-4/who.tsx b/src/pages/ExpressWizard/steps/express-4/who.tsx
deleted file mode 100644
index 4a34ecf9a..000000000
--- a/src/pages/ExpressWizard/steps/express-4/who.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-import {
- ContainerCard,
- FormField as Field,
- Hint,
- Label,
- Message,
- Paragraph,
- Radio,
- Row,
- Span,
- Tag,
- XL,
- XXL,
- retrieveComponentStyles,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { t } from 'i18next';
-import { useState } from 'react';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as UsersIcon } from 'src/assets/icons/users-icon.svg';
-import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
-import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-import styled from 'styled-components';
-import * as Yup from 'yup';
-
-const StepTitle = styled(XXL)`
- margin-bottom: ${({ theme }) => theme.space.base * 2}px;
- span {
- ${(props) => retrieveComponentStyles('text.primary', props)};
- }
-`;
-
-const StyledFormField = styled.div`
- margin-top: ${({ theme }) => theme.space.md};
-`;
-
-const StyledLanguageTitle = styled(XL)`
- margin-bottom: ${({ theme }) => theme.space.sm};
-`;
-
-const StyledRadioField = styled(Field)`
- margin-top: ${({ theme }) => theme.space.base * 4}px;
-`;
-
-const StyledTag = styled(Tag)`
- margin-right: ${({ theme }) => theme.space.sm};
- margin-top: ${({ theme }) => theme.space.xs};
-`;
-
-const UsersTags = () => (
-
-
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_TAG_USERS')}
-
-);
-
-interface RadioItem {
- label: string;
- description?: string;
- value: string;
-}
-
-export const WhoStep = ({
- errors,
- values,
- ...props
-}: FormikProps) => {
- const [age, setAge] = useState(values.age_range);
- const [gender, setGender] = useState(values.gender);
- const [literacy, setLiteracy] = useState(values.digital_literacy);
- const [language, setLanguage] = useState(values.campaign_language);
-
- const handleLanguageClick = (value: string) => {
- setLanguage(value);
- props.setFieldValue('campaign_language', value);
- };
-
- const handleAgeClick = (value: string) => {
- setAge(value);
- props.setFieldValue('age_range', value);
- };
-
- const handleGenderClick = (value: string) => {
- setGender(value);
- props.setFieldValue('gender', value);
- };
-
- const handleLiteracyClick = (value: string) => {
- setLiteracy(value);
- props.setFieldValue('digital_literacy', value);
- };
-
- const languages = [
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_IT'),
- value: 'it',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_EN'),
- value: 'en',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_ES'),
- value: 'es',
- },
- {
- label: t('__EXPRESS_WIZARD_STEP_WHO_FIELD_LANGUAGE_OPTION_FR'),
- value: 'fr',
- },
- ];
- const ageRanges = ['18-24', '25-34', '35-54', '55+'];
- const genders: RadioItem[] = [
- { label: t('__EXPRESS_4_WIZARD_STEP_WHO_GENDER_MALE'), value: 'male' },
- { label: t('__EXPRESS_4_WIZARD_STEP_WHO_GENDER_FEMALE'), value: 'female' },
- ];
- const literacies: RadioItem[] = [
- {
- label: t('__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_EXPERT'),
- description: t('__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_EXPERT_DESCRIPTION'),
- value: 'expert',
- },
- {
- label: t('__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_INTERMEDIATE'),
- description: t(
- '__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_INTERMEDIATE_DESCRIPTION'
- ),
- value: 'intermediate',
- },
- {
- label: t('__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_BEGINNER'),
- description: t(
- '__EXPRESS_4_WIZARD_STEP_WHO_LITERACY_BEGINNER_DESCRIPTION'
- ),
- value: 'beginner',
- },
- ];
-
- return (
-
-
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL')}
- {t('__EXPRESS_WIZARD_STEP_WHO_LABEL_EXTRA')}
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_LABEL_SELECTION_CRITERIA')}
-
-
-
-
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_DEMOGRAPHICS_CRITERIA_TITLE')}
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_DEMOGRAPHICS_CRITERIA_DESCRIPTION')}
-
-
-
- {/* Language Radio buttons */}
-
-
- {languages.map((lang: RadioItem) => (
-
-
-
- handleLanguageClick(e.target.value)}
- >
-
-
-
-
-
- ))}
-
- {errors.campaign_language && (
- {errors.campaign_language}
- )}
-
-
- {/* Age ranges Radio buttons */}
-
-
-
-
-
- handleAgeClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_FIELD_AGE_RANGE_ALL_HINT')}
-
-
-
-
-
-
- {ageRanges.map((ageRange) => (
-
-
-
- handleAgeClick(e.target.value)}
- >
-
-
-
-
-
- ))}
-
- {errors.age_range && (
- {errors.age_range}
- )}
-
-
- {/* Gender Radio buttons */}
-
-
-
-
-
- handleGenderClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_FIELD_GENDER_ALL_HINT')}
-
-
-
-
-
-
- {genders.map((gen: RadioItem) => (
-
-
-
- handleGenderClick(e.target.value)}
- >
-
- {gen.description && {gen.description}}
-
-
-
-
- ))}
-
- {errors.gender && {errors.gender}}
-
-
- {/* Literacy Radio buttons */}
-
-
-
-
-
- handleLiteracyClick(e.target.value)}
- >
-
-
- {t('__EXPRESS_4_WIZARD_STEP_WHO_FIELD_LITERACY_ALL_HINT')}
-
-
-
-
-
-
- {literacies.map((item: RadioItem) => (
-
-
-
- handleLiteracyClick(e.target.value)}
- >
-
- {item.description && {item.description}}
-
-
-
-
- ))}
-
- {errors.digital_literacy && (
- {errors.digital_literacy}
- )}
-
-
- );
-};
-
-export const WhoStepValidationSchema = Yup.object().shape({
- campaign_language: Yup.string(),
-});
diff --git a/src/pages/ExpressWizard/steps/thankYou.tsx b/src/pages/ExpressWizard/steps/thankYou.tsx
deleted file mode 100644
index 0f073e9fe..000000000
--- a/src/pages/ExpressWizard/steps/thankYou.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import {
- ContainerCard,
- Row,
- Col,
- XXL,
- MD,
- theme,
- ModalFullScreen,
- Logo,
- Button,
-} from '@appquality/unguess-design-system';
-import { appTheme } from 'src/app/theme';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'src/app/hooks';
-import {
- closeDrawer,
- closeWizard,
- resetWizard,
-} from 'src/features/express/expressSlice';
-import { ReactComponent as SuccessIcon } from 'src/assets/wizard-success.svg';
-import useWindowSize from 'src/hooks/useWindowSize';
-import { useNavigate } from 'react-router-dom';
-import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { Container } from '../wizardHeader';
-
-export const ThankYouStep = ({
- setThankyou,
- setStep,
-}: {
- setThankyou: (value: boolean) => void;
- setStep: (value: number) => void;
-}) => {
- const { width } = useWindowSize();
- const dispatch = useAppDispatch();
- const { t } = useTranslation();
- const navigate = useNavigate();
- const { project } = useAppSelector((state) => state.express);
- const projRoute = useLocalizeRoute(`projects/${project?.id}`);
- const handleClose = () => {
- dispatch(closeDrawer());
- dispatch(closeWizard());
- dispatch(resetWizard());
- setStep(0);
- setThankyou(false);
- navigate(projRoute);
- // Refetch the data
- };
-
- return (
- <>
-
- {width > parseInt(theme.breakpoints.sm, 10) ? (
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t('__EXPRESS_WIZARD_STEP_THANK_YOU_TITLE')}
-
-
- {t('__EXPRESS_WIZARD_STEP_THANK_YOU_SUBTITLE')}
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
diff --git a/src/pages/ExpressWizard/steps/types.ts b/src/pages/ExpressWizard/steps/types.ts
deleted file mode 100644
index 14db87bf6..000000000
--- a/src/pages/ExpressWizard/steps/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { FormikProps } from 'formik';
-import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
-
-export interface WizardButtonsProps {
- formikArgs: FormikProps;
- onNextClick: () => void;
- onBackClick: () => void;
-}
diff --git a/src/pages/ExpressWizard/steps/useSteps.tsx b/src/pages/ExpressWizard/steps/useSteps.tsx
deleted file mode 100644
index b6ea03534..000000000
--- a/src/pages/ExpressWizard/steps/useSteps.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { FormikProps } from 'formik';
-import * as Yup from 'yup';
-import {
- What as WhatExpress1,
- Who as WhoExpress1,
- Where as WhereExpress1,
- Confirmation as ConfirmationExpress1,
-} from './express-1';
-
-import {
- What as WhatExpress2,
- Who as WhoExpress2,
- Where as WhereExpress2,
- How as HowExpress2,
- Confirmation as ConfirmationExpress2,
-} from './express-2';
-
-import {
- What as WhatExpress3,
- Who as WhoExpress3,
- Where as WhereExpress3,
- How as HowExpress3,
- Confirmation as ConfirmationExpress3,
-} from './express-3';
-
-import {
- What as WhatExpress4,
- Who as WhoExpress4,
- Where as WhereExpress4,
- How as HowExpress4,
- Confirmation as ConfirmationExpress4,
-} from './express-4';
-
-import { WizardButtonsProps } from './types';
-import { WizardModel } from '../wizardModel';
-
-export interface StepItem {
- id: string;
- label: string;
- content: string;
- form: (props: FormikProps) => JSX.Element;
- validationSchema: Yup.ObjectSchema;
- buttons: (props: WizardButtonsProps) => JSX.Element;
-}
-
-export const useExpressStep = (type: string): Array => {
- switch (type) {
- case 'ux-tagging':
- return [
- WhatExpress4,
- WhereExpress4,
- WhoExpress4,
- HowExpress4,
- ConfirmationExpress4,
- ];
- case 'unmoderated-usability-testing':
- return [
- WhatExpress3,
- WhereExpress3,
- WhoExpress3,
- HowExpress3,
- ConfirmationExpress3,
- ];
- case 'bug-hunting':
- return [
- WhatExpress2,
- WhereExpress2,
- WhoExpress2,
- HowExpress2,
- ConfirmationExpress2,
- ];
- default: // exploratory-test
- return [WhatExpress1, WhereExpress1, WhoExpress1, ConfirmationExpress1];
- }
-};
diff --git a/src/pages/ExpressWizard/wizardCol.tsx b/src/pages/ExpressWizard/wizardCol.tsx
deleted file mode 100644
index 9ec6bb8c9..000000000
--- a/src/pages/ExpressWizard/wizardCol.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Col } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-
-const WizardCol = styled(Col)`
- @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
- margin-bottom: 0;
- }
-`;
-
-export { WizardCol };
diff --git a/src/pages/ExpressWizard/wizardHeader.tsx b/src/pages/ExpressWizard/wizardHeader.tsx
deleted file mode 100644
index ec976a4a5..000000000
--- a/src/pages/ExpressWizard/wizardHeader.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import {
- Anchor,
- InputToggle,
- Logo,
- Span,
-} from '@appquality/unguess-design-system';
-import { FormikProps } from 'formik';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as ErrorIcon } from 'src/assets/icons/error-icon.svg';
-import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-import useWindowSize from 'src/hooks/useWindowSize';
-import styled from 'styled-components';
-import { WizardModel } from './wizardModel';
-
-export const Container = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- width: 100%;
-`;
-
-const TitleContainer = styled.div`
- display: flex;
- flex-direction: column;
-`;
-
-const StyledAnchor = styled(Anchor)`
- padding: 0 ${({ theme }) => theme.space.xxs};
-`;
-
-interface WizardHeaderProps extends FormikProps {
- onClose: () => void;
-}
-
-export const WizardHeader = ({ onClose, ...props }: WizardHeaderProps) => {
- const { width } = useWindowSize();
- const { t } = useTranslation();
- const { getFieldProps, errors, validateForm } = props;
- const { activeWorkspace } = useActiveWorkspace();
-
- const isDesktop = width > parseInt(appTheme.breakpoints.sm, 10);
-
- useEffect(() => {}, []);
-
- return (
-
- {width > parseInt(appTheme.breakpoints.sm, 10) ? (
-
- ) : null}
-
-
- onClose()}>
- {activeWorkspace
- ? `${activeWorkspace.company}'s Workspace`
- : 'Workspace'}
-
-
- {
- validateForm();
- }}
- style={{ paddingTop: 0 }}
- />
-
-
- {isDesktop && errors.campaign_name && (
- <>
-
-
- {t('__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED')}
-
- >
- )}
-
- );
-};
diff --git a/src/pages/ExpressWizard/wizardInitialValues.tsx b/src/pages/ExpressWizard/wizardInitialValues.tsx
deleted file mode 100644
index a933e8806..000000000
--- a/src/pages/ExpressWizard/wizardInitialValues.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { addBusinessDays } from 'date-fns';
-import { EXPRESS_BUSINESS_DAYS_TO_ADD } from 'src/constants';
-import { WizardModel } from './wizardModel';
-
-const date_start = addBusinessDays(new Date(), 1);
-
-const values: WizardModel = {
- campaign_name: '',
- product_type: 'webapp',
- campaign_reason: 'reason-a',
- withSmartphone: false,
- withDesktop: false,
- withTablet: false,
- customBrowser: false,
- customBrowserFilled: false,
- withChrome: false,
- withSafari: false,
- withFirefox: false,
- withEdge: false,
- hasOutOfScope: false,
- outOfScope: '',
- iOSLink: '',
- androidLink: '',
- isIOS: false,
- isAndroid: false,
- link: '',
- campaign_language: 'it',
- test_description: '',
- use_cases: [],
- campaign_date: date_start,
- campaign_date_end: addBusinessDays(date_start, EXPRESS_BUSINESS_DAYS_TO_ADD),
- age_range: 'all',
- gender: 'all',
- digital_literacy: 'all',
- has_bug_form: false,
- has_bug_parade: false,
- base_cp_duration: EXPRESS_BUSINESS_DAYS_TO_ADD,
-};
-
-export default values;
diff --git a/src/pages/ExpressWizard/wizardModel.tsx b/src/pages/ExpressWizard/wizardModel.tsx
deleted file mode 100644
index 740301d32..000000000
--- a/src/pages/ExpressWizard/wizardModel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { WhatStep } from './fields/what';
-import { WhereWebStep } from './fields/whereWeb';
-import { WhereAppStep } from './fields/whereApp';
-import { WhoStep } from './fields/who';
-import { HowStep } from './fields/how';
-import { WhenStep } from './fields/when';
-import { ConfirmStep } from './fields/confirm';
-
-export interface WizardModel
- extends WhatStep,
- WhereWebStep,
- WhereAppStep,
- WhoStep,
- HowStep,
- WhenStep,
- ConfirmStep {
- has_bug_form?: boolean;
- has_bug_parade?: boolean;
- base_cp_duration?: number;
-}
diff --git a/src/pages/ExpressWizard/wizardSubmit.tsx b/src/pages/ExpressWizard/wizardSubmit.tsx
deleted file mode 100644
index 8e58c24ab..000000000
--- a/src/pages/ExpressWizard/wizardSubmit.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import {
- Button,
- MD,
- Paragraph,
- Spinner,
- SplitButton,
- Timeline,
- TooltipModal,
- getColor,
-} from '@appquality/unguess-design-system';
-import {
- addBusinessDays,
- differenceInBusinessDays,
- format,
- formatRelative,
-} from 'date-fns';
-import { FormikProps } from 'formik';
-import { useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
-import { ReactComponent as CheckIcon } from 'src/assets/icons/check-lg-stroke.svg';
-import { ReactComponent as ChevronDownIcon } from 'src/assets/icons/chevron-down-stroke.svg';
-import { ReactComponent as EmptyIcon } from 'src/assets/icons/empty.svg';
-import { EXPRESS_BUSINESS_DAYS_TO_ADD } from 'src/constants';
-import i18n from 'src/i18n';
-import styled from 'styled-components';
-import { CardDivider } from './cardDivider';
-import { getLanguage } from './getLanguage';
-import { PlanningModal } from './planningModal';
-import { WizardModel } from './wizardModel';
-
-const StyledDiv = styled.div`
- /** Horizontal Align */
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
-`;
-
-const InteractiveTimelineItem: typeof Timeline.Item = styled(Timeline.Item)`
- cursor: pointer;
-
- &:hover {
- background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 50)};
- svg {
- background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 50)};
- }
- }
-
- div[data-garden-id='timeline.content.separator'] {
- padding: ${({ theme }) =>
- `${theme.space.xs} 0 ${theme.space.xs} ${theme.space.sm}`};
- }
-`;
-
-export const WizardSubmit = (props: FormikProps) => {
- const { t } = useTranslation();
- const { errors, isSubmitting, handleSubmit, values, setFieldValue } = props;
-
- const triggerRef = useRef(null);
- const [refElement, setRefElement] = useState();
- const [selectedDateSpot, setSelectedDateSpot] = useState();
- const [isDateModalOpen, setIsDateModalOpen] = useState(false);
- const today = new Date();
- const { base_cp_duration = EXPRESS_BUSINESS_DAYS_TO_ADD } = values;
-
- const [launchDate, setlaunchDate] = useState(
- values.campaign_date ?? addBusinessDays(today, 1)
- );
-
- const lang = getLanguage(i18n.language || 'en');
- const requiredDuration =
- values.campaign_language === 'it' ? base_cp_duration : base_cp_duration + 1;
-
- const [endDate, setEndDate] = useState(
- values.campaign_date_end ?? addBusinessDays(launchDate, requiredDuration)
- );
-
- const dateSpots = [addBusinessDays(today, 2), addBusinessDays(today, 5)];
-
- const triggerSubmit = useCallback(() => {
- if (selectedDateSpot && selectedDateSpot !== -1) {
- const resultsDate = addBusinessDays(
- dateSpots[selectedDateSpot as number], // start_date,
- requiredDuration
- );
-
- setFieldValue('campaign_date', dateSpots[selectedDateSpot as number]);
- setFieldValue('campaign_date_end', resultsDate);
- } else {
- setFieldValue('campaign_date', launchDate);
- setFieldValue('campaign_date_end', endDate);
- }
-
- // Trigger form submit
- handleSubmit();
- }, [selectedDateSpot, launchDate, endDate]);
-
- // We consider cp as planned when the difference between the launchDate and the first date spot is at least 0
- const isPlanned = differenceInBusinessDays(launchDate, dateSpots[0]) > -1;
-
- return (
-
-
-
-
-
- {isSubmitting && (
-
- )}
- setRefElement(null)}
- placement="auto"
- hasArrow={false}
- style={{ padding: appTheme.space.xxs, width: 'auto' }}
- >
-
- {t('__EXPRESS_WIZARD_SUBMIT_PLANNING_TOOLTIP_TITLE')}
-
-
-
- {dateSpots.map((date, index) => (
- {
- setSelectedDateSpot(index);
- setlaunchDate(date);
- setEndDate(addBusinessDays(date, requiredDuration));
- }}
- icon={
- index === selectedDateSpot ? (
-
- ) : (
-
- )
- }
- hiddenLine
- >
-
-
- {formatRelative(date, today, {
- locale: {
- ...lang.locale,
- formatRelative: (token) =>
- lang.relativeDateFormat[token as string],
- },
- })}
-
-
- {t(
- '__EXPRESS_WIZARD_SUBMIT_PLANNING_TOOLTIP_FIRST_RESULTS'
- )}{' '}
- {format(addBusinessDays(date, requiredDuration), 'EEEE d', {
- locale: lang.locale,
- })}
-
-
-
- ))}
-
- setIsDateModalOpen(true)}
- icon={
- selectedDateSpot === -1 ? (
-
- ) : (
-
- )
- }
- hiddenLine
- >
-
-
- {t('__EXPRESS_WIZARD_SUBMIT_TOOLTIP_MODAL_CUSTOM_DATE_ITEM')}
-
-
-
-
-
-
-
- {isDateModalOpen && (
- {
- setlaunchDate(start);
- setEndDate(end);
- setSelectedDateSpot(-1);
- setIsDateModalOpen(false);
- }}
- duration={requiredDuration}
- onClose={() => setIsDateModalOpen(false)}
- />
- )}
-
- );
-};
diff --git a/src/pages/Insights/Collection/components/CardBackground.tsx b/src/pages/Insights/Collection/components/CardBackground.tsx
deleted file mode 100644
index 0d57a78cd..000000000
--- a/src/pages/Insights/Collection/components/CardBackground.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { styled } from 'styled-components';
-
-export const CardBackground = styled.div<{ isOpen?: boolean }>`
- padding-top: ${({ theme }) => theme.space.md};
- padding-right: ${({ theme }) => theme.space.xs};
- padding-left: ${({ theme }) => theme.space.xs};
-
- ${({ isOpen, theme }) =>
- isOpen &&
- `
- background-color: ${theme.palette.grey[800]};
- `}
-`;
diff --git a/src/pages/Insights/Collection/components/GrapeCheckbox.tsx b/src/pages/Insights/Collection/components/GrapeCheckbox.tsx
deleted file mode 100644
index 3d1b949a7..000000000
--- a/src/pages/Insights/Collection/components/GrapeCheckbox.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
- Checkbox,
- FormField as Field,
- Label,
-} from '@appquality/unguess-design-system';
-import { ArrayHelpers, useFormikContext } from 'formik';
-import { ChangeEvent, useCallback, useMemo } from 'react';
-import { Grape as GrapeType } from 'src/features/api';
-import { InsightFormValues } from '../../FormProvider';
-
-interface Props {
- push: ArrayHelpers['push'];
- remove: ArrayHelpers['remove'];
- grapeObservations: GrapeType['observations'];
-}
-export const GrapeCheckbox = ({ push, remove, grapeObservations }: Props) => {
- const { values } = useFormikContext();
-
- const selectedObservations = useMemo(() => {
- const observationIds = grapeObservations.map((obs) => obs.id);
- return values.observations.filter((obs) => observationIds.includes(obs.id));
- }, [values.observations, grapeObservations]);
-
- const checkboxState = useMemo(() => {
- if (selectedObservations.length === grapeObservations.length) {
- return {
- checked: true,
- indeterminate: false,
- };
- }
- if (selectedObservations.length > 0) {
- return {
- checked: false,
- indeterminate: true,
- };
- }
- return {
- checked: false,
- indeterminate: false,
- };
- }, [grapeObservations, values.observations]);
-
- const handleCheckboxChange = useCallback(
- (e: ChangeEvent) => {
- e.preventDefault();
- e.stopPropagation();
-
- if (e.target.checked) {
- grapeObservations
- // filter out already selected observations looking at their id
- .filter(
- (obs) => !selectedObservations.map((sel) => sel.id).includes(obs.id)
- )
- .forEach((obs) => {
- push(obs);
- });
- } else {
- selectedObservations.forEach((obs, i) => {
- // use i to update the index of the removed obs
- // because we are removing elements but values are not updated
- remove(values.observations.indexOf(obs) - i);
- });
- }
- },
- [selectedObservations, values.observations, grapeObservations, push, remove]
- );
- return (
-
-
-
-
- );
-
- );
-};
diff --git a/src/pages/Insights/InsightsDrawer/hooks/usePublishInsight.tsx b/src/pages/Insights/InsightsDrawer/hooks/usePublishInsight.tsx
deleted file mode 100644
index f14247713..000000000
--- a/src/pages/Insights/InsightsDrawer/hooks/usePublishInsight.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useToast, Notification } from '@appquality/unguess-design-system';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePatchInsightsByIidMutation } from 'src/features/api';
-
-interface Props {
- title: string;
- id: string;
- isPublished?: number;
-}
-
-export const usePublishInsight = ({ title, id, isPublished }: Props) => {
- const [patchInsight, result] = usePatchInsightsByIidMutation();
- const { addToast } = useToast();
- const { t } = useTranslation();
- const handlePublish = useCallback(() => {
- let notificationProps = {};
- patchInsight({ iid: id, body: { visible: isPublished ? 0 : 1 } })
- .unwrap()
- .then(() => {
- notificationProps = {
- type: 'success',
- message: isPublished
- ? `${`Scoperta "${title}" ${t('_TOAST_UNPUBLISHED_MESSAGE')}`}`
- : `${`Scoperta "${title}" ${t('_TOAST_PUBLISHED_MESSAGE')}`}`,
- };
- })
- .catch((e) => {
- notificationProps = {
- type: 'error',
- message: e.message ? e.message : t('_TOAST_GENERIC_ERROR_MESSAGE'),
- };
- })
- .finally(() => {
- addToast(
- ({ close }) => (
-
- ),
- { placement: 'top' }
- );
- });
- }, [addToast, id, isPublished, patchInsight, title]);
-
- return { handlePublish, result };
-};
diff --git a/src/pages/JoinPage/FormProvider.tsx b/src/pages/JoinPage/FormProvider.tsx
new file mode 100644
index 000000000..af34e65c2
--- /dev/null
+++ b/src/pages/JoinPage/FormProvider.tsx
@@ -0,0 +1,51 @@
+import { Formik, Form, FormikProps } from 'formik';
+import { useMemo } from 'react';
+import { useValidationSchema } from './validationSchema';
+import { useJoinSubmit } from './useJoinSubmit';
+import { JoinFormValues } from './valuesType';
+
+interface FormProviderProps {
+ children: (props: FormikProps) => React.ReactNode;
+ email?: string;
+ name?: string;
+ surname?: string;
+ workspace?: string;
+}
+
+export const FormProvider = ({
+ children,
+ email,
+ name,
+ surname,
+ workspace,
+}: FormProviderProps) => {
+ const initialValues: JoinFormValues = {
+ step: 1,
+ email: email || '',
+ password: '',
+ name: name || '',
+ surname: surname || '',
+ roleId: 0,
+ workspace: workspace || '',
+ };
+
+ // logic to check if the user is invited
+ // for the time being we are checking if the mail is not empty
+ const isInvited = useMemo(() => !!email, [email]);
+ const validationSchema = useValidationSchema();
+ const { onSubmit } = useJoinSubmit(isInvited);
+
+ return (
+
+ {(props) => }
+
+ );
+};
diff --git a/src/pages/JoinPage/ImagesColumn.tsx b/src/pages/JoinPage/ImagesColumn.tsx
new file mode 100644
index 000000000..fadbf548a
--- /dev/null
+++ b/src/pages/JoinPage/ImagesColumn.tsx
@@ -0,0 +1,82 @@
+import { useFormikContext } from 'formik';
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-client';
+import { useEffect, useMemo, useState } from 'react';
+import logoImgs from 'src/assets/join-loghi.png';
+import logoImgsWebp from 'src/assets/join-loghi.webp';
+import joinImg1 from 'src/assets/join-step-1.svg';
+import joinImg1webp from 'src/assets/join-step-1.webp';
+import joinImg2 from 'src/assets/join-step-2.png';
+import joinImg2webp from 'src/assets/join-step-2.webp';
+import joinImg3 from 'src/assets/join-step-3.png';
+import joinImg3webp from 'src/assets/join-step-3.webp';
+import styled from 'styled-components';
+import { JoinFormValues } from './valuesType';
+
+const ImagesWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ width: 100%;
+ height: calc(100vh - ${({ theme }) => theme.space.xl} * 2);
+ overflow: hidden;
+`;
+
+const LogoPicture = styled.picture`
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+`;
+
+export const ImagesColumn = () => {
+ const { values } = useFormikContext();
+ const [step, setStep] = useState(values.step);
+ const forwardAnimation = useMemo(
+ () => values.step - step * 10,
+ [values.step, step]
+ );
+ useEffect(() => {
+ setStep(values.step);
+ }, [values.step]);
+ return (
+
+
+
+ {step === 1 && (
+
+
+
+
+ )}
+ {step === 2 && (
+
+
+
+
+ )}
+ {step === 3 && (
+
+
+
+
+ )}
+
+
+ {step === 1 && (
+
+
+
+
+ )}
+
+ );
+};
diff --git a/src/pages/JoinPage/JoinForm.tsx b/src/pages/JoinPage/JoinForm.tsx
new file mode 100644
index 000000000..5a9b0492d
--- /dev/null
+++ b/src/pages/JoinPage/JoinForm.tsx
@@ -0,0 +1,53 @@
+import { Paragraph, XL } from '@appquality/unguess-design-system';
+import { useFormikContext } from 'formik';
+import { Trans, useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import styled from 'styled-components';
+import { Step1 } from './Steps/Step1';
+import { Step2 } from './Steps/Step2';
+import { Step3 } from './Steps/Step3';
+import { JoinFormValues } from './valuesType';
+
+const FieldContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${(p) => p.theme.space.md};
+`;
+
+const FormContainer = styled.div`
+ @media (min-width: ${(p) => p.theme.breakpoints.md}) {
+ padding: 0 ${(p) => p.theme.space.xxl};
+ }
+`;
+
+export const JoinForm = () => {
+ const {
+ values: { step },
+ } = useFormikContext();
+ const { t } = useTranslation();
+ return (
+
+
+
+ {step === 1 && (
+ }}
+ />
+ )}
+ {step === 2 && t('SIGNUP_FORM_STEP_2_TITLE')}
+ {step === 3 && t('SIGNUP_FORM_STEP_3_TITLE')}
+
+
+ {step === 2 && t('SIGNUP_FORM_STEP_2_DESCRIPTION')}
+ {step === 3 && t('SIGNUP_FORM_STEP_3_DESCRIPTION')}
+
+
+
+ {step === 1 && }
+ {step === 2 && }
+ {step === 3 && }
+
+
+ );
+};
diff --git a/src/pages/JoinPage/JoinPageError.tsx b/src/pages/JoinPage/JoinPageError.tsx
new file mode 100644
index 000000000..0c0e1e5c0
--- /dev/null
+++ b/src/pages/JoinPage/JoinPageError.tsx
@@ -0,0 +1,92 @@
+import { Button, MD, XL } from '@appquality/unguess-design-system';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams, useNavigate } from 'react-router-dom';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as BackgroundImage } from 'src/assets/icons/lost-in-the-space.svg';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ width: 100%;
+ height: 100vh;
+ background-color: ${appTheme.palette.grey[100]};
+ display: flex;
+ align-items: center;
+`;
+
+const StyledRow = styled.div`
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: ${appTheme.space.md};
+
+ @media (min-width: ${appTheme.breakpoints.xl}) {
+ flex-direction: row;
+ max-width: 1200px;
+ }
+`;
+const ButtonWrapper = styled.div`
+ display: flex;
+ gap: ${appTheme.space.sm};
+ margin-top: ${appTheme.space.md};
+`;
+
+export const JoinPageError = () => {
+ const { t } = useTranslation();
+ const sendGTMevent = useSendGTMevent({ loggedUser: false });
+ const { profile, token } = useParams();
+ const isInvited = profile && token;
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: 'not set',
+ action: 'not set',
+ content: 'error page',
+ target: `is invited: ${isInvited}`,
+ });
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {t('JOIN_PAGE_ERROR_TITLE')}
+
+ {t('JOIN_PAGE_ERROR_DESCRIPTION')}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/JoinPage/JoinPageLoading.tsx b/src/pages/JoinPage/JoinPageLoading.tsx
new file mode 100644
index 000000000..31f6a1d66
--- /dev/null
+++ b/src/pages/JoinPage/JoinPageLoading.tsx
@@ -0,0 +1,7 @@
+export const JoinPageLoading = () => (
+
+
+

+
+
+);
diff --git a/src/pages/JoinPage/Steps/ButtonContainer.tsx b/src/pages/JoinPage/Steps/ButtonContainer.tsx
new file mode 100644
index 000000000..7690d97e5
--- /dev/null
+++ b/src/pages/JoinPage/Steps/ButtonContainer.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const ButtonContainer = styled.div`
+ display: flex;
+ gap: ${(p) => p.theme.space.sm};
+ align-items: center;
+ justify-content: flex-end;
+ padding-top: ${(p) => p.theme.space.md};
+`;
diff --git a/src/pages/JoinPage/Steps/PasswordRequirements.tsx b/src/pages/JoinPage/Steps/PasswordRequirements.tsx
new file mode 100644
index 000000000..795147968
--- /dev/null
+++ b/src/pages/JoinPage/Steps/PasswordRequirements.tsx
@@ -0,0 +1,63 @@
+import { MD, theme } from '@appquality/unguess-design-system';
+import { ReactComponent as X } from 'src/assets/icons/password-check-x.svg';
+import { ReactComponent as Check } from 'src/assets/icons/password-check-v.svg';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { JoinFormValues } from '../valuesType';
+
+const PasswordRequirement = ({
+ check,
+ children,
+}: {
+ check: () => boolean;
+ children: React.ReactNode;
+}) => (
+
+ {check() ? (
+
+ ) : (
+
+ )}
+
+ {children}
+
+
+);
+
+const PasswordRequirements = () => {
+ const { values } = useFormikContext();
+ const { t } = useTranslation();
+
+ return (
+
+
{t('PASSWORD_VALIDATOR_PASSWORD_REQUIREMENTS')}
+
+ values.password.length >= 6}>
+ {t('PASSWORD_VALIDATOR_MINIMUM_OF_6_CHARACTERS')}
+
+ values.password.match(/[A-Z]/) !== null}
+ >
+ {t('PASSWORD_VALIDATOR_CONTAIN_AN_UPPERCASE_LETTER')}
+
+ values.password.match(/[a-z]/) !== null}
+ >
+ {t('PASSWORD_VALIDATOR_CONTAIN_A_LOWERCASE_LETTER')}
+
+ values.password.match(/[0-9]/) !== null}
+ >
+ {t('PASSWORD_VALIDATOR_CONTAIN_A_NUMBER')}
+
+
+
+ );
+};
+
+export { PasswordRequirements };
diff --git a/src/pages/JoinPage/Steps/Step1.tsx b/src/pages/JoinPage/Steps/Step1.tsx
new file mode 100644
index 000000000..5e89f2ea1
--- /dev/null
+++ b/src/pages/JoinPage/Steps/Step1.tsx
@@ -0,0 +1,210 @@
+import {
+ Anchor,
+ Button,
+ FormField,
+ Input,
+ Label,
+ MediaInput,
+ Message,
+ Paragraph,
+ Span,
+} from '@appquality/unguess-design-system';
+import { ReactComponent as LinkIcon } from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
+import { ReactComponent as Eye } from '@zendeskgarden/svg-icons/src/16/eye-fill.svg';
+import { ReactComponent as EyeHide } from '@zendeskgarden/svg-icons/src/16/eye-hide-fill.svg';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { JoinFormValues } from '../valuesType';
+import { ButtonContainer } from './ButtonContainer';
+import { PasswordRequirements } from './PasswordRequirements';
+
+export const Step1 = () => {
+ const { setFieldValue, validateForm, setTouched, status, values } =
+ useFormikContext();
+ const sendGTMevent = useSendGTMevent({ loggedUser: false });
+ const { t } = useTranslation();
+ const [inputType, setInputType] = useState('password');
+ const handleChangeInputType = () => {
+ setInputType((prev) => (prev === 'password' ? 'text' : 'password'));
+ };
+
+ useEffect(() => {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ content: 'step 1 rendered',
+ });
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ action: 'start',
+ });
+ }, []);
+
+ const goToNextStep = async () => {
+ await setTouched({
+ email: true,
+ password: true,
+ });
+ const errors = await validateForm();
+ if (Object.keys(errors).length > 0) {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ action: 'step 1 validation error',
+ content: `error count: ${Object.keys(errors).length}`,
+ });
+ return;
+ }
+ setFieldValue('step', 2);
+ };
+
+ const validateEmail = async (value: string) => {
+ let error;
+ let error_event;
+ if (status?.isInvited) return error;
+ const res = await fetch(
+ `${process.env.REACT_APP_API_URL}/users/by-email/${value}`,
+ {
+ method: 'HEAD',
+ }
+ );
+
+ if (res.status === 200) {
+ error = t('SIGNUP_FORM_EMAIL_ALREADY_TAKEN');
+ error_event = 'SIGNUP_FORM_EMAIL_ALREADY_TAKEN';
+ } else if (res.status === 404) {
+ error = undefined;
+ error_event = 'no error';
+ } else {
+ error = t('SIGNUP_FORM_EMAIL_ERROR_SERVER_MAIL_CHECK');
+ error_event = 'SIGNUP_FORM_EMAIL_ERROR_SERVER_MAIL_CHECK';
+ }
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: 'not set',
+ action: 'validate email',
+ content: `error: ${error_event}`,
+ target: `is invited: ${status?.isInvited}`,
+ });
+ return error;
+ };
+
+ return (
+ <>
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+
+ ) : (
+
+ )
+ }
+ {...field}
+ placeholder={t('SIGNUP_FORM_PASSWORD_PLACEHOLDER')}
+ {...(hasError && { validation: 'error' })}
+ />
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+
+
+
+
+
+ ),
+ }}
+ />
+
+
+
+
+ {t('SIGNUP_FORM_CTA_RETURN_TO_UNGUESS_LANDING')}
+
+
+ >
+ );
+};
diff --git a/src/pages/JoinPage/Steps/Step2.tsx b/src/pages/JoinPage/Steps/Step2.tsx
new file mode 100644
index 000000000..cdf74fa1a
--- /dev/null
+++ b/src/pages/JoinPage/Steps/Step2.tsx
@@ -0,0 +1,170 @@
+import {
+ Button,
+ FormField,
+ Input,
+ Label,
+ Message,
+ Select,
+ Span,
+} from '@appquality/unguess-design-system';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { useGetUsersRolesQuery } from 'src/features/api';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { JoinFormValues } from '../valuesType';
+import { ButtonContainer } from './ButtonContainer';
+
+export const Step2 = () => {
+ const { setFieldValue, validateForm, setTouched, status } =
+ useFormikContext();
+ const { t } = useTranslation();
+ const sendGTMevent = useSendGTMevent({ loggedUser: false });
+ const { data, isLoading } = useGetUsersRolesQuery();
+ const selectRef = useRef(null);
+
+ useEffect(() => {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ content: 'step 2 rendered',
+ });
+ }, []);
+
+ const renderOptions = useMemo(
+ () =>
+ isLoading || !data ? (
+ loading...
+ ) : (
+ data?.map((role) => (
+
+ {role.name}
+
+ ))
+ ),
+ [data]
+ );
+ const goToNextStep = async () => {
+ await setTouched({
+ name: true,
+ surname: true,
+ roleId: true,
+ });
+ const errors = await validateForm();
+ if (Object.keys(errors).length > 0) {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ action: 'step 2 validation error',
+ content: `error count: ${Object.keys(errors).length}`,
+ });
+ return;
+ }
+ setFieldValue('step', 3);
+ };
+ const goToPreviousStep = () => {
+ setFieldValue('step', 1);
+ };
+ return (
+ <>
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+
+
+
+ >
+ );
+};
diff --git a/src/pages/JoinPage/Steps/Step3.tsx b/src/pages/JoinPage/Steps/Step3.tsx
new file mode 100644
index 000000000..b7c37f009
--- /dev/null
+++ b/src/pages/JoinPage/Steps/Step3.tsx
@@ -0,0 +1,68 @@
+import {
+ Button,
+ FormField,
+ Input,
+ Label,
+ Message,
+ Span,
+} from '@appquality/unguess-design-system';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { JoinFormValues } from '../valuesType';
+import { ButtonContainer } from './ButtonContainer';
+
+export const Step3 = () => {
+ const { setFieldValue, values, status } = useFormikContext();
+ const { t } = useTranslation();
+ const sendGTMevent = useSendGTMevent({ loggedUser: false });
+ useEffect(() => {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${status?.isInvited}`,
+ content: 'step 3 rendered',
+ });
+ }, []);
+ const goToPreviousStep = () => {
+ setFieldValue('step', 2);
+ };
+ return (
+ <>
+
+ {({ field, meta }: FieldProps) => {
+ const hasError = meta.touched && Boolean(meta.error);
+ return (
+
+
+
+ {hasError && (
+
+ {meta.error}
+
+ )}
+
+ );
+ }}
+
+
+
+
+
+ >
+ );
+};
diff --git a/src/pages/JoinPage/WaitModal.tsx b/src/pages/JoinPage/WaitModal.tsx
new file mode 100644
index 000000000..7edf07625
--- /dev/null
+++ b/src/pages/JoinPage/WaitModal.tsx
@@ -0,0 +1,37 @@
+import { Modal, LG, XL, Skeleton } from '@appquality/unguess-design-system';
+import { Trans } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+
+export const WaitModal = () => (
+
+ ,
+ XL: (
+
+ ),
+ }}
+ />
+
+
+);
diff --git a/src/pages/JoinPage/index.tsx b/src/pages/JoinPage/index.tsx
new file mode 100644
index 000000000..13c909f72
--- /dev/null
+++ b/src/pages/JoinPage/index.tsx
@@ -0,0 +1,144 @@
+import { Col, Grid, Logo, Row } from '@appquality/unguess-design-system';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useAppSelector } from 'src/app/hooks';
+import joinBg from 'src/assets/join-bg-1.png';
+import joingBgwebp from 'src/assets/join-bg-1.webp';
+import joinBg2 from 'src/assets/join-bg-2.png';
+import joinBg2webp from 'src/assets/join-bg-2.webp';
+import joinBg3 from 'src/assets/join-bg-3.png';
+import joinBg3webp from 'src/assets/join-bg-3.webp';
+import { GoogleTagManager } from 'src/common/GoogleTagManager';
+import { useGetInvitesByProfileAndTokenQuery } from 'src/features/api';
+import styled from 'styled-components';
+import { FormProvider } from './FormProvider';
+import { ImagesColumn } from './ImagesColumn';
+import { JoinForm } from './JoinForm';
+import { JoinPageError } from './JoinPageError';
+import { JoinPageLoading } from './JoinPageLoading';
+import { WaitModal } from './WaitModal';
+
+const CenteredXYContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin: 0 auto;
+ padding: 0 ${({ theme }) => theme.space.md};
+ max-width: ${({ theme }) => theme.breakpoints.md};
+ @media (min-width: ${({ theme }) => theme.breakpoints.xl}) {
+ padding: 0 ${({ theme }) => theme.space.xl};
+ max-width: ${({ theme }) => theme.breakpoints.xxl};
+ }
+`;
+
+const Background = styled.div<{ step: string }>`
+ // Default background
+ @media (min-width: ${({ theme }) => theme.breakpoints.xl}) {
+ ${({ step }) =>
+ step === '1' &&
+ `
+ background-image: url(${joinBg});
+ @supports (background-image: url(${joingBgwebp})) {
+ background-image: url(${joingBgwebp});
+ }
+ `}
+ ${({ step }) =>
+ step === '2' &&
+ `
+ background-image: url(${joinBg2});
+ @supports (background-image: url(${joinBg2webp})) {
+ background-image: url(${joinBg2webp});
+ }
+ `}
+ ${({ step }) =>
+ step === '3' &&
+ `
+ background-image: url(${joinBg3});
+ @supports (background-image: url(${joinBg3webp})) {
+ background-image: url(${joinBg3webp});
+ }
+ `}
+ background-repeat: no-repeat;
+ background-position: right top;
+ background-size: 61%;
+ }
+ position: relative;
+ width: 100%;
+ min-height: calc(100vh - ${({ theme }) => theme.space.xl} * 2);
+ padding: ${({ theme }) => theme.space.xl} 0 ${({ theme }) => theme.space.md};
+`;
+
+const StyledCol = styled(Col)`
+ margin-bottom: 0;
+`;
+
+const LogoWrapper = styled.div`
+ text-align: center;
+ margin-bottom: ${(p) => p.theme.space.lg};
+`;
+
+const JoinPage = () => {
+ const { t } = useTranslation();
+ const [searchParams] = useSearchParams();
+ const { status } = useAppSelector((state) => state.user);
+ const navigate = useNavigate();
+ const { profile, token } = useParams();
+ const shouldSkipQuery =
+ status === 'logged' || status === 'loading' || !(profile && token);
+
+ const { isLoading, data, error } = useGetInvitesByProfileAndTokenQuery(
+ {
+ profile: profile || '',
+ token: token || '',
+ },
+ {
+ skip: shouldSkipQuery,
+ }
+ );
+
+ useEffect(() => {
+ if (status === 'logged') {
+ navigate(searchParams.get('redirectTo') || '/');
+ }
+ }, [navigate, status, searchParams]);
+
+ if (isLoading || (shouldSkipQuery && profile && token)) {
+ return ;
+ }
+
+ if (error) return ;
+
+ return (
+
+
+ {({ isSubmitting, values: { step } }) => (
+
+
+ {isSubmitting ? (
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+ );
+};
+
+export default JoinPage;
diff --git a/src/pages/JoinPage/useJoinSubmit.tsx b/src/pages/JoinPage/useJoinSubmit.tsx
new file mode 100644
index 000000000..cf0424aac
--- /dev/null
+++ b/src/pages/JoinPage/useJoinSubmit.tsx
@@ -0,0 +1,122 @@
+import { Notification, useToast } from '@appquality/unguess-design-system';
+import { FormikHelpers } from 'formik';
+import { useCallback } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import WPAPI from 'src/common/wpapi';
+import { usePostUsersMutation } from 'src/features/api';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { JoinFormValues } from './valuesType';
+
+export function useJoinSubmit(isInvited: boolean) {
+ const [postFormValues] = usePostUsersMutation();
+ const { addToast } = useToast();
+ const [searchParams] = useSearchParams();
+ const redirectTo = searchParams.get('redirect');
+ const { token, profile } = useParams();
+ const sendGTMevent = useSendGTMevent({ loggedUser: false });
+
+ const onSubmit = useCallback(
+ async (
+ values: JoinFormValues,
+ { setSubmitting }: FormikHelpers
+ ) => {
+ setSubmitting(true);
+ const basicInfo = {
+ email: values.email,
+ password: values.password,
+ name: values.name,
+ surname: values.surname,
+ roleId: values.roleId,
+ };
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${isInvited}`,
+ action: 'start submit',
+ content: `role: ${values.roleId}`,
+ });
+ try {
+ let res;
+ if (isInvited) {
+ if (!token || !profile)
+ throw new Error('Token or profile is missing');
+ res = await postFormValues({
+ body: {
+ type: 'invite',
+ ...basicInfo,
+ profileId: Number(profile),
+ token,
+ },
+ }).unwrap();
+ } else {
+ res = await postFormValues({
+ body: {
+ type: 'new',
+ ...basicInfo,
+ email: values.email,
+ workspace: values.workspace,
+ },
+ }).unwrap();
+ }
+ const nonce = await WPAPI.getNonce();
+ const login = await WPAPI.login({
+ username: values.email,
+ password: values.password,
+ security: nonce,
+ });
+
+ if (login) {
+ if (redirectTo) {
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${isInvited}`,
+ action: 'submit success',
+ content: 'redirect',
+ });
+ window.location.href = redirectTo;
+ } else if (res.projectId) {
+ document.location.href = `/projects/${res.projectId}`;
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${isInvited}`,
+ action: 'submit success',
+ content: 'project',
+ });
+ } else {
+ document.location.href = '/';
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${isInvited}`,
+ action: 'submit success',
+ content: 'home',
+ });
+ }
+ } else document.location.href = '/oops';
+ } catch (err) {
+ const message = `Error creating user: ${
+ err instanceof Error && err.message ? err.message : 'Unknown error'
+ }`;
+ sendGTMevent({
+ event: 'sign-up-flow',
+ category: `is invited: ${isInvited}`,
+ action: 'submit error',
+ content: message,
+ });
+ addToast(
+ ({ close }) => (
+
+ ),
+ { placement: 'top' }
+ );
+ }
+ setSubmitting(false);
+ },
+ [postFormValues, token, profile, isInvited]
+ );
+
+ return { onSubmit };
+}
diff --git a/src/pages/JoinPage/validationSchema.ts b/src/pages/JoinPage/validationSchema.ts
new file mode 100644
index 000000000..af4191c9e
--- /dev/null
+++ b/src/pages/JoinPage/validationSchema.ts
@@ -0,0 +1,51 @@
+import * as yup from 'yup';
+import { useTranslation } from 'react-i18next';
+
+export const useValidationSchema = () => {
+ const { t } = useTranslation();
+
+ return yup.object({
+ email: yup.string().when('step', {
+ is: 1,
+ then: yup
+ .string()
+ .required(t('SIGNUP_FORM_EMAIL_IS_REQUIRED'))
+ .email(t('SIGNUP_FORM_EMAIL_MUST_BE_A_VALID_EMAIL')),
+ }),
+ password: yup.string().when('step', {
+ is: 1,
+ then: yup
+ .string()
+ .min(6, t('SIGNUP_FORM_PASSWORD_MUST_BE_AT_LEAST_6_CHARACTER_LONG'))
+ .matches(
+ /[0-9]/,
+ t('SIGNUP_FORM_PASSWORD_MUST_CONTAIN_AT_LEAST_A_NUMBER')
+ )
+ .matches(
+ /[A-Z]/,
+ t('SIGNUP_FORM_PASSWORD_MUST_CONTAIN_AT_LEAST_AN_UPPERCASE_LETTER')
+ )
+ .matches(
+ /[a-z]/,
+ t('SIGNUP_FORM_PASSWORD_MUST_CONTAIN_AT_LEAST_A_LOWERCASE_LETTER')
+ )
+ .required(t('SIGNUP_FORM_PASSWORD_IS_A_REQUIRED_FIELD')),
+ }),
+ name: yup.string().when('step', {
+ is: 2,
+ then: yup.string().required(t('SIGNUP_FORM_NAME_IS_REQUIRED')),
+ }),
+ surname: yup.string().when('step', {
+ is: 2,
+ then: yup.string().required(t('SIGNUP_FORM_SURNAME_IS_REQUIRED')),
+ }),
+ roleId: yup.number().when('step', {
+ is: 2,
+ then: yup.number().positive(t('SIGNUP_FORM_ROLE_IS_REQUIRED')),
+ }),
+ workspace: yup.string().when('step', {
+ is: 3,
+ then: yup.string().required(t('SIGNUP_FORM_WORKSPACE_IS_REQUIRED')),
+ }),
+ });
+};
diff --git a/src/pages/JoinPage/valuesType.ts b/src/pages/JoinPage/valuesType.ts
new file mode 100644
index 000000000..44cac27c8
--- /dev/null
+++ b/src/pages/JoinPage/valuesType.ts
@@ -0,0 +1,9 @@
+export type JoinFormValues = {
+ step: number;
+ email: string;
+ password: string;
+ name: string;
+ surname: string;
+ workspace: string;
+ roleId: number;
+};
diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
index b05589f8d..17e6224ab 100644
--- a/src/pages/LoginPage/index.tsx
+++ b/src/pages/LoginPage/index.tsx
@@ -21,6 +21,8 @@ const StyledLogo = styled(Logo)`
const CenteredXYContainer = styled.div`
display: flex;
align-items: center;
+ justify-content: center;
+ text-align: center;
flex-direction: column;
height: 100vh;
@@ -99,8 +101,6 @@ const LoginPage = () => {
if (!values.password) {
errors.password = t('__FORM_FIELD_REQUIRED_MESSAGE');
- } else if (values.password.length < 5) {
- errors.password = t('__LOGIN_FORM_PASSWORD_FIELD_LENGTH_INVALID');
}
return errors;
diff --git a/src/pages/Manual/components/ScrollingContainer.tsx b/src/pages/Manual/components/ScrollingContainer.tsx
deleted file mode 100644
index 295d2260d..000000000
--- a/src/pages/Manual/components/ScrollingContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const ScrollingContainer = styled.div`
- overflow-x: hidden;
- overflow-y: auto;
- max-height: calc(
- 100vh - ${({ theme }) => theme.components.chrome.header.height}
- );
- padding: 0;
-
- ::-webkit-scrollbar {
- background-color: transparent;
- }
-
- &:hover {
- ::-webkit-scrollbar {
- background-color: inherit;
- }
- }
-`;
diff --git a/src/pages/Plan/Controls.tsx b/src/pages/Plan/Controls.tsx
index 75291e80f..1fb34eeca 100644
--- a/src/pages/Plan/Controls.tsx
+++ b/src/pages/Plan/Controls.tsx
@@ -2,6 +2,8 @@ import {
Button,
ButtonMenu,
IconButton,
+ useToast,
+ Notification,
} from '@appquality/unguess-design-system';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -30,6 +32,7 @@ const StyledPipe = styled(Pipe)`
export const Controls = () => {
const { t } = useTranslation();
const navigate = useNavigate();
+ const { addToast } = useToast();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { planId } = useParams();
@@ -45,9 +48,36 @@ export const Controls = () => {
`campaigns/${plan?.campaign?.id ?? 0}`
);
const { isRequestQuoteCTADisabled } = useRequestQuotation();
- const handleSaveConfiguration = () => {
+ const handleSaveConfiguration = async () => {
validateForm();
- submitModuleConfiguration();
+ try {
+ await submitModuleConfiguration();
+ addToast(
+ ({ close }) => (
+
+ ),
+ { placement: 'top' }
+ );
+ } catch (e) {
+ addToast(
+ ({ close }) => (
+
+ ),
+ { placement: 'top' }
+ );
+ }
};
const handleSendRequest = () => {
diff --git a/src/pages/Plan/modules/Goal.tsx b/src/pages/Plan/modules/Goal.tsx
index f22f6973c..d2b2e67d5 100644
--- a/src/pages/Plan/modules/Goal.tsx
+++ b/src/pages/Plan/modules/Goal.tsx
@@ -117,6 +117,7 @@ const Goal = () => {
onBlur={handleBlur}
validation={error ? 'error' : undefined}
placeholder={t('__PLAN_PAGE_MODULE_GOAL_PLACEHOLDER')}
+ minRows={5}
/>
{error && typeof error === 'string' ? (
diff --git a/src/pages/Plan/modules/OutOfScope.tsx b/src/pages/Plan/modules/OutOfScope.tsx
index b583ed145..698acdf13 100644
--- a/src/pages/Plan/modules/OutOfScope.tsx
+++ b/src/pages/Plan/modules/OutOfScope.tsx
@@ -115,6 +115,7 @@ const OutOfScope = () => {
onBlur={handleBlur}
validation={error ? 'error' : undefined}
placeholder={t('__PLAN_PAGE_MODULE_OUT_OF_SCOPE_PLACEHOLDER')}
+ minRows={6}
/>
{error && typeof error === 'string' ? (
diff --git a/src/pages/Plan/modules/Tasks/parts/AddTaskButton.tsx b/src/pages/Plan/modules/Tasks/parts/AddTaskButton.tsx
index 661094c61..448e0dd18 100644
--- a/src/pages/Plan/modules/Tasks/parts/AddTaskButton.tsx
+++ b/src/pages/Plan/modules/Tasks/parts/AddTaskButton.tsx
@@ -10,7 +10,8 @@ const ButtonContainer = styled.div`
justify-content: flex-start;
margin: ${({ theme }) => theme.space.lg} ${({ theme }) => theme.space.xxl};
padding: ${({ theme }) => theme.space.xs};
- border-left: 4px solid ${({ theme }) => getColor(theme.colors.accentHue, 600)};
+ border-left: 4px solid
+ ${({ theme }) => getColor(theme.colors.neutralHue, 300)};
`;
const AddTaskButton = () => {
diff --git a/src/pages/Plan/modules/Tasks/parts/modal/AccessibilityTasks.tsx b/src/pages/Plan/modules/Tasks/parts/modal/AccessibilityTasks.tsx
index 504d645c4..87e1f4bd9 100644
--- a/src/pages/Plan/modules/Tasks/parts/modal/AccessibilityTasks.tsx
+++ b/src/pages/Plan/modules/Tasks/parts/modal/AccessibilityTasks.tsx
@@ -1,9 +1,9 @@
-import { Button, SM } from '@appquality/unguess-design-system';
+import { Button } from '@appquality/unguess-design-system';
import { useTranslation } from 'react-i18next';
-import { appTheme } from 'src/app/theme';
import { ReactComponent as AccessibilityTaskIcon } from 'src/assets/icons/accessibility-task-icon.svg';
import { useHandleModalItemClick } from '../../utils';
import { ButtonsContainer } from './ButtonsContainer';
+import { TaskTypeTitle } from './TaskTypeTitle';
const AccessibilityTasks = () => {
const { t } = useTranslation();
@@ -11,11 +11,11 @@ const AccessibilityTasks = () => {
return (
<>
-
+
{t(
'__PLAN_PAGE_MODULE_TASKS_ADD_TASK_MODAL_ACCESSIBILITY_TASKS_LABEL'
).toUpperCase()}
-
+