Release candidate

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.16",
+    "@appquality/unguess-design-system": "4.0.23",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@sentry/react": "^8.32.0",

src/common/components/navigation/sidebar/index.tsx

@@ -21,10 +21,7 @@ import {
   useGetWorkspacesByWidArchiveQuery,
   useGetWorkspacesByWidProjectsQuery,
 } from 'src/features/api';
-import {
-  closeSidebar,
-  toggleSidebar,
-} from 'src/features/navigation/navigationSlice';
+import { closeSidebar } from 'src/features/navigation/navigationSlice';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import useWindowSize from 'src/hooks/useWindowSize';
 import i18n from 'src/i18n';
@@ -63,17 +60,6 @@ const DropdownItem = styled.div`
   }
 `;
 
-const NavItemArchive = styled(NavItemText)`
-  .content {
-    display: flex;
-    flex-direction: column;
-
-    ${SM} {
-      color: ${({ theme }) => theme.palette.grey[600]};
-    }
-  }
-`;
-
 export const AppSidebar = (props: PropsWithChildren<SidebarProps>) => {
   const theme = useTheme();
   const { route, onSidebarToggle } = props;

src/features/navigation/Navigation.tsx

@@ -18,6 +18,7 @@ import {
   setSidebarOpen,
   toggleSidebar,
 } from 'src/features/navigation/navigationSlice';
+import { NoActiveWorkSpaceState } from 'src/features/templates/NoActiveWorkspaceState';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import i18n from 'src/i18n';
 import { styled } from 'styled-components';
@@ -223,14 +224,13 @@ export const Navigation = ({
     dispatch(setProfileModalOpen(false));
   };
 
-  if (!activeWorkspace) return null;
-
   if (isLoadingPrefs) {
     return <Skeleton />;
   }
   if (isError || !preferences) {
     return null;
   }
+  if (!activeWorkspace) return <NoActiveWorkSpaceState />;
   return (
     <>
       <Header

src/features/templates/NoActiveWorkspaceState.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { ReactComponent as BackgroundImage } from 'src/assets/icons/lost-in-the-space.svg';
+import { Button, MD, XL } from '@appquality/unguess-design-system';
+import WPAPI from 'src/common/wpapi';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+
+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 NoActiveWorkSpaceState = () => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      <StyledRow>
+        <BackgroundImage />
+
+        <div style={{ maxWidth: '510px' }}>
+          <XL isBold style={{ marginBottom: appTheme.space.xs }}>
+            {t('__PAGE_NOT_ACCESIBLE_TITLE')}
+          </XL>
+          <MD>{t('__PAGE_NOT_ACCESIBLE_DESCRIPTION')}</MD>
+          <ButtonWrapper>
+            <Button
+              isBasic
+              color={appTheme.palette.blue[600]}
+              style={{ flex: 1 }}
+              onClick={() => {
+                window.location.href =
+                  'mailto:help@unguess.io?subject=Page%20not%20accessible';
+              }}
+            >
+              {t('__PAGE_NOT_ACCESIBLE_BUTTON_GET_HELP')}
+            </Button>
+            <Button
+              isAccent
+              isPrimary
+              style={{ flex: 1 }}
+              color={appTheme.palette.kale[600]}
+              onClick={async () => {
+                await WPAPI.logout();
+              }}
+            >
+              {t('__PAGE_NOT_ACCESIBLE_BUTTON_LOGOUT')}
+            </Button>
+          </ButtonWrapper>
+        </div>
+      </StyledRow>
+    </Wrapper>
+  );
+};

src/hooks/useActiveWorkspace.ts

@@ -1,13 +1,27 @@
 import { useEffect, useState } from 'react';
 import { useAppSelector } from 'src/app/hooks';
 import { Workspace, useGetWorkspacesQuery } from 'src/features/api';
-import { getWorkspaceFromLS } from 'src/features/navigation/cachedStorage';
+import {
+  getWorkspaceFromLS,
+  saveWorkspaceToLs,
+} from 'src/features/navigation/cachedStorage';
 
 export const useActiveWorkspace = () => {
-  const [result, setResult] = useState<Workspace>();
+  const cachedWorkspace = getWorkspaceFromLS();
   const { data: workspaces, isLoading } = useGetWorkspacesQuery({
     orderBy: 'company',
   });
+  const [result, setResult] = useState<Workspace | undefined>(() => {
+    if (
+      cachedWorkspace &&
+      workspaces &&
+      workspaces.items &&
+      workspaces.items.map((w) => w.id).includes(cachedWorkspace.id)
+    ) {
+      return cachedWorkspace;
+    }
+    return undefined;
+  });
   const activeWorkspace = useAppSelector(
     (state) => state.navigation.activeWorkspace
   );
@@ -28,7 +42,6 @@ export const useActiveWorkspace = () => {
     )
       return;
 
-    const cachedWorkspace = getWorkspaceFromLS();
     if (
       cachedWorkspace &&
       workspaces.items.map((w) => w.id).includes(cachedWorkspace.id)
@@ -43,6 +56,7 @@ export const useActiveWorkspace = () => {
       workspaces.items &&
       workspaces.items.length > 0
     ) {
+      saveWorkspaceToLs(workspaces.items[0]);
       setResult(workspaces.items[0]);
     }
   }, [activeWorkspace, workspaces, isLoading]);

src/locales/en/translation.json

@@ -754,10 +754,10 @@
   "__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_DEVICES": "The test will be executed on:",
   "__EXPRESS_WIZARD_STEP_RECAP_WHERE_CONTENT_TEXT_OS": "On the following operating system:",
   "__EXPRESS_WIZARD_STEP_RECAP_WHO_CONTENT_TEXT": "Testers speak: <0>{{campaign_language}}</0>.",
-  "__EXPRESS_WIZARD_STEP_THANK_YOU_BUTTON": "Go back to dashboard",
-  "__EXPRESS_WIZARD_STEP_THANK_YOU_SUBTITLE": "Keep track of your campaign in realtime, directly from your dashboard.",
+  "__EXPRESS_WIZARD_STEP_THANK_YOU_BUTTON": "Go to project",
+  "__EXPRESS_WIZARD_STEP_THANK_YOU_SUBTITLE": "Great! Your test request is now with your CSM for review. We'll notify you once it's approved or if we need any clarification. Meanwhile, you can track your test status in the Project area.",
   "__EXPRESS_WIZARD_STEP_THANK_YOU_SUBTITLE_USE_CASES": "Our tester leaders will soon reach out to you about the campaign launch.",
-  "__EXPRESS_WIZARD_STEP_THANK_YOU_TITLE": "Campaign launched!",
+  "__EXPRESS_WIZARD_STEP_THANK_YOU_TITLE": "Request received.",
   "__EXPRESS_WIZARD_STEP_WHAT_DESCRIPTION": "What is the campaign about?",
   "__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_NAME_REQUIRED": "Campaign Name is required",
   "__EXPRESS_WIZARD_STEP_WHAT_FIELD_CAMPAIGN_REASON_LABEL": "Select the reason for which you want to launch this campaign",
@@ -924,6 +924,10 @@
   "__PAGE_CAMPAIGN_WIDGET_BUGS_BY_TYPE_AXIS_LEFT_LABEL": "Types",
   "__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_INT_CENTER": "Integrate with other tools",
   "__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_REPORT": "Download report",
+  "__PAGE_NOT_ACCESIBLE_BUTTON_GET_HELP": "Get help",
+  "__PAGE_NOT_ACCESIBLE_BUTTON_LOGOUT": "Logout",
+  "__PAGE_NOT_ACCESIBLE_DESCRIPTION": "It seems that your access is no longer active. You can log out or contact our support center. We are here to help you!",
+  "__PAGE_NOT_ACCESIBLE_TITLE": "You cannot access this page at the moment.",
   "__PAGE_TITLE_BUGS_COLLECTION": "Bug collection",
   "__PAGE_TITLE_CATALOG": "Services",
   "__PAGE_TITLE_LOGIN": "Log in",

src/locales/it/translation.json

@@ -952,6 +952,10 @@
   "__PAGE_CAMPAIGN_WIDGET_BUGS_BY_TYPE_AXIS_LEFT_LABEL": "Tipologie",
   "__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_INT_CENTER": "Integra con altri tool",
   "__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_REPORT": "Scarica il report",
+  "__PAGE_NOT_ACCESIBLE_BUTTON_GET_HELP": "Chiedi supporto",
+  "__PAGE_NOT_ACCESIBLE_BUTTON_LOGOUT": "Logout",
+  "__PAGE_NOT_ACCESIBLE_DESCRIPTION": "Sembra che tu non abbia più accesso al workspace. Se hai bisogno di aiuto, contatta il nostro centro assistenza. ",
+  "__PAGE_NOT_ACCESIBLE_TITLE": "Al momento non è possibile accedere a questa pagina.",
   "__PAGE_TITLE_BUGS_COLLECTION": "Raccolta bug",
   "__PAGE_TITLE_CATALOG": "Servizi",
   "__PAGE_TITLE_LOGIN": "Accedi",

src/pages/Bugs/Content/BugPreview.tsx

@@ -151,8 +151,10 @@ export const BugPreview = ({
           key === 'replicabilities' ||
           key === 'types'
         ) {
-          if (Array.isArray(data[key].selected)) {
-            filters[key] = data[key].selected.map((item) => item.name);
+          if (Array.isArray(data[`${key}`].selected)) {
+            filters[`${key}`] = data[`${key}`].selected.map(
+              (item) => item.name
+            );
           }
         }
         if (key === 'tags') {

src/pages/Campaign/ArchiveCampaignModal.tsx

@@ -10,10 +10,8 @@ import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
 import {
   CampaignWithOutput,
-  useGetWorkspacesByWidProjectsQuery,
   usePatchCampaignsByCidMutation,
 } from 'src/features/api';
-import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 
 const ArchiveCampaignModal = ({
   campaign,
@@ -22,25 +20,11 @@ const ArchiveCampaignModal = ({
   campaign: CampaignWithOutput;
   onClose: () => void;
 }) => {
-  const {
-    id: cpId,
-    customer_title: cpTitle,
-    project: { id: prjId, name: prjName },
-  } = campaign;
+  const { id: cpId } = campaign;
   const { t } = useTranslation();
-  const { activeWorkspace } = useActiveWorkspace();
   const [patchCampaign] = usePatchCampaignsByCidMutation();
   const { addToast } = useToast();
 
-  const { data, isLoading, isFetching } = useGetWorkspacesByWidProjectsQuery({
-    wid: activeWorkspace?.id.toString() || '',
-  });
-
-  const projects = data?.items;
-
-  // Filter out the current project
-  const filteredProjects = projects?.filter((item) => item.id !== prjId);
-
   return (
     <Modal onClose={onClose}>
       <Modal.Header isDanger>

src/pages/Dashboard/campaigns-list/index.tsx

@@ -38,7 +38,7 @@ export const CampaignsList = () => {
       <Row
         alignItems="center"
         style={{
-          marginTop: `${theme.space.base * 8}px`,
+          marginTop: theme.space.md,
           marginBottom: theme.space.xxs,
         }}
       >

src/pages/Dashboard/projectPageHeader.tsx

@@ -1,30 +1,27 @@
 import {
-  Button,
   InputToggle,
+  LG,
   Message,
+  Notification,
   PageHeader,
   Skeleton,
   useToast,
-  Notification,
   XXXL,
-  LG,
 } from '@appquality/unguess-design-system';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { FEATURE_FLAG_SKY_JOTFORM } from 'src/constants';
-import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { useAppSelector } from 'src/app/hooks';
+import { appTheme } from 'src/app/theme';
+import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
+import { ProjectSettings } from 'src/common/components/inviteUsers/projectSettings';
 import {
   useGetProjectsByPidQuery,
   usePatchProjectsByPidMutation,
 } from 'src/features/api';
-import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { ProjectSettings } from 'src/common/components/inviteUsers/projectSettings';
+import { useSendGTMevent } from 'src/hooks/useGTMevent';
+import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import styled from 'styled-components';
-import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
-import { appTheme } from 'src/app/theme';
 import { Counters } from './Counters';
 
 const StyledPageHeaderMeta = styled(PageHeader.Meta)`
@@ -50,7 +47,6 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
   const { addToast } = useToast();
   const notFoundRoute = useLocalizeRoute('oops');
   const location = useLocation();
-  const { hasFeatureFlag } = useFeatureFlag();
   const { status } = useAppSelector((state) => state.user);
   const [itemTitle, setItemTitle] = useState<string>();
   const [itemDescription, setItemDescription] = useState<string>();
@@ -81,10 +77,6 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
   const [patchProject] = usePatchProjectsByPidMutation();
   const sendGTMEvent = useSendGTMevent();
 
-  const JOTFORM_URL = `https://form.jotform.com/220462541726351`;
-
-  const hasSkyJotformFeature = hasFeatureFlag(FEATURE_FLAG_SKY_JOTFORM);
-
   useEffect(() => {
     if (itemTitle) {
       sendGTMEvent({
@@ -238,19 +230,6 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
             {!project?.is_archive && <ProjectSettings />}
           </StyledPageHeaderMeta>
         </PageHeader.Main>
-        {hasSkyJotformFeature && (
-          <PageHeader.Footer>
-            <Button
-              isPrimary
-              onClick={() => {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
-                window.open(JOTFORM_URL, '_blank')?.focus(); // disable because it's a false positive (https://github.com/nodesecurity/eslint-plugin-security/issues/26)
-              }}
-            >
-              {t('__DASHBOARD_SKY_JOTFORM_LAUNCH_CP_BUTTON')}
-            </Button>
-          </PageHeader.Footer>
-        )}
       </PageHeader>
     </LayoutWrapper>
   );