Update URL validation, add custom templates order and update translations

src/features/api/index.ts

@@ -1833,7 +1833,7 @@ export type GetWorkspacesByWidTemplatesApiArg = {
   /** Start pagination parameter */
   start?: number;
   /** Orders results */
-  orderBy?: 'updated_at' | 'id';
+  orderBy?: 'updated_at' | 'id' | 'order';
   /** Order value (ASC, DESC) */
   order?: string;
   /** filterBy[<fieldName>]=<fieldValue> */

src/locales/en/translation.json

@@ -594,7 +594,6 @@
   "__DASHBOARD_PLAN_COUNTER": "Setup Activities",
   "__DASHBOARD_SEARCH_INPUT_PLACEHOLDER": "Start typing...",
   "__DIGITAL_LITERACY_ERROR_REQUIRED": "No digital literacy level selected: Choose at least one level to continue",
-  "__EMPTY_SPACE_NO_FEATURE": "",
   "__ERROR_PAGE_BUTTON": "Refresh the page",
   "__ERROR_PAGE_SUBTITLE": "Let's try to solve it with the simplest trick.",
   "__ERROR_PAGE_TITLE": "This is unexpected.",
@@ -1071,7 +1070,7 @@
   "__PLAN_PAGE_MODULE_LANGUAGE_TITLE": "Spoken language",
   "__PLAN_PAGE_MODULE_MODULE_GENDER_FEMALE_HINT": " ",
   "__PLAN_PAGE_MODULE_MODULE_GENDER_FEMALE_LABEL": "Female",
-  "__PLAN_PAGE_MODULE_OUT_OF_SCOPE_INFO": "Enter description (max 256 characters)",
+  "__PLAN_PAGE_MODULE_OUT_OF_SCOPE_INFO": "Enter description (max 512 characters)",
   "__PLAN_PAGE_MODULE_OUT_OF_SCOPE_LABEL": "Specify areas that should be excluded from testing ",
   "__PLAN_PAGE_MODULE_OUT_OF_SCOPE_PLACEHOLDER": "Insert any sections that do not fit within the perimeter of the test.",
   "__PLAN_PAGE_MODULE_OUT_OF_SCOPE_REMOVE_BUTTON": "Delete",
@@ -1081,7 +1080,6 @@
   "__PLAN_PAGE_MODULE_SETUP_NOTE_DESCRIPTION_EDITOR_PLACEHOLDER": "In this section, you can set up the manual to guide testers during the activity.",
   "__PLAN_PAGE_MODULE_SETUP_NOTE_REMOVE_BUTTON": "Delete",
   "__PLAN_PAGE_MODULE_SETUP_NOTE_TITLE": "Before starting",
-  "__PLAN_PAGE_MODULE_TARGET_INFO": " ",
   "__PLAN_PAGE_MODULE_TARGET_LABEL": "Enter number of participants",
   "__PLAN_PAGE_MODULE_TARGET_NOTE_BLOCK_TITLE": "Before Starting",
   "__PLAN_PAGE_MODULE_TARGET_NOTE_DESCRIPTION_EDITOR_HEADER_TITLE": "Write here",
@@ -1129,7 +1127,7 @@
   "__PLAN_PAGE_MODULE_TASKS_TASK_ERROR_REQUIRED": "Add at least one task to proceed",
   "__PLAN_PAGE_MODULE_TASKS_TASK_LINK_HINT": "Add accessible URL with http:// or https:// prefix",
   "__PLAN_PAGE_MODULE_TASKS_TASK_LINK_LABEL": "Link to the area being tested",
-  "__PLAN_PAGE_MODULE_TASKS_TASK_LINK_PLACEHOLDER": "www.example.com",
+  "__PLAN_PAGE_MODULE_TASKS_TASK_LINK_PLACEHOLDER": "https://www.example.com",
   "__PLAN_PAGE_MODULE_TASKS_TASK_OPTIONAL_LABEL": "(optional)",
   "__PLAN_PAGE_MODULE_TASKS_TASK_TITLE_DESCRIPTION": "Define the function or experience participants will evaluate",
   "__PLAN_PAGE_MODULE_TASKS_TASK_TITLE_ERROR_MAX_LENGTH": "The title cannot exceed 64 characters",
@@ -1260,6 +1258,7 @@
   "__PROJECT_FORM_NAME_MAX": "This name is a bit long. We advise you to stay within 64 characters including spaces.",
   "__PROJECT_FORM_NAME_REQUIRED": "Choose a name before creating the project",
   "__PROJECT_PAGE_ARCHIVE_DESCRIPTION": "The Archive helps you keep your projects organized. You can restore a activity at any time or leave it here for future reference",
+  "__PROJECT_PAGE_EMPTY_STATE_NO_FEATURE": "Manage your own projects and test campaigns!",
   "__PROJECT_PAGE_UPDATE_PROJECT_DESCRIPTION_PLACEHOLDER": "Write a description",
   "__PROJECT_PAGE_UPDATE_PROJECT_NAME_ERROR": "The project name is already taken. Choose another name.",
   "__PROJECT_SETTINGS_CTA_TEXT": "Invite",

src/locales/it/translation.json

@@ -620,7 +620,6 @@
   "__DASHBOARD_PLAN_COUNTER": "Attività in bozza",
   "__DASHBOARD_SEARCH_INPUT_PLACEHOLDER": "Cerca...",
   "__DIGITAL_LITERACY_ERROR_REQUIRED": "",
-  "__EMPTY_SPACE_NO_FEATURE": "",
   "__ERROR_PAGE_BUTTON": "Aggiorna la pagina",
   "__ERROR_PAGE_SUBTITLE": "Ecco un consiglio banale che il più delle volte funziona.",
   "__ERROR_PAGE_TITLE": "Non è così che doveva andare.",
@@ -1110,7 +1109,6 @@
   "__PLAN_PAGE_MODULE_SETUP_NOTE_DESCRIPTION_EDITOR_PLACEHOLDER": "",
   "__PLAN_PAGE_MODULE_SETUP_NOTE_REMOVE_BUTTON": "",
   "__PLAN_PAGE_MODULE_SETUP_NOTE_TITLE": "",
-  "__PLAN_PAGE_MODULE_TARGET_INFO": "",
   "__PLAN_PAGE_MODULE_TARGET_LABEL": "",
   "__PLAN_PAGE_MODULE_TARGET_NOTE_BLOCK_TITLE": "",
   "__PLAN_PAGE_MODULE_TARGET_NOTE_DESCRIPTION_EDITOR_HEADER_TITLE": "",
@@ -1289,6 +1287,7 @@
   "__PROJECT_FORM_NAME_MAX": "",
   "__PROJECT_FORM_NAME_REQUIRED": "",
   "__PROJECT_PAGE_ARCHIVE_DESCRIPTION": "",
+  "__PROJECT_PAGE_EMPTY_STATE_NO_FEATURE": "",
   "__PROJECT_PAGE_UPDATE_PROJECT_DESCRIPTION_PLACEHOLDER": "Aggiungi una descrizione",
   "__PROJECT_PAGE_UPDATE_PROJECT_NAME_ERROR": "Il nome del progetto è già in uso. Scegline un altro.",
   "__PROJECT_SETTINGS_CTA_TEXT": "Invita",

src/pages/Dashboard/PromoContext.tsx

@@ -36,6 +36,8 @@ export const PromoContextProvider = ({ children }: { children: ReactNode }) => {
       filterBy: {
         isPromo: 1,
       },
+      orderBy: 'order',
+      order: 'asc',
     },
     {
       skip: !activeWorkspace,

src/pages/Dashboard/empty-state/projectEmptyState.tsx

@@ -149,7 +149,7 @@ export const ProjectEmptyState = () => {
           <Illustration />
           <Paragraph style={{ textAlign: 'center', width: '70%' }}>
             <XL color={appTheme.palette.blue[600]}>
-              {t('__EMPTY_SPACE_NO_FEATURE')}
+              {t('__PROJECT_PAGE_EMPTY_STATE_NO_FEATURE')}
             </XL>
           </Paragraph>
         </ImageWrapper>

src/pages/Plan/modules/Tasks/hooks/index.ts

@@ -159,7 +159,17 @@ const useModuleTasks = () => {
   const update = (k: number, v: Partial<(typeof output)[number]>) => {
     setOutput(
       output
-        .map((o) => (o.key === k ? { ...o, ...v } : o))
+        .map((o) => {
+          if (o.key !== k) return o;
+
+          if (v.url !== '') return { ...o, ...v };
+
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { url: __, ...rest } = o;
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { url: _, ...restWithoutUrl } = v;
+          return { ...rest, ...restWithoutUrl };
+        })
         .map((o) => {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const { key, ...rest } = o;

src/pages/Plan/modules/Touchpoints/parts/TouchpointItem.tsx

@@ -33,43 +33,11 @@ const TouchpointItem = ({
     form_factor.charAt(0).toUpperCase() + form_factor.slice(1);
   const formattedKind = kind.toUpperCase();
 
-  const linuxError =
-    error && typeof error === 'object' && `touchpoints.${key}.os.linux` in error
-      ? error[`touchpoints.${key}.os.linux`]
-      : false;
-  const macosError =
-    error && typeof error === 'object' && `touchpoints.${key}.os.macos` in error
-      ? error[`touchpoints.${key}.os.macos`]
-      : false;
-  const windowsError =
-    error &&
-    typeof error === 'object' &&
-    `touchpoints.${key}.os.windows` in error
-      ? error[`touchpoints.${key}.os.windows`]
-      : false;
-  const iosError =
-    error && typeof error === 'object' && `touchpoints.${key}.os.ios` in error
-      ? error[`touchpoints.${key}.os.ios`]
-      : false;
-  const androidError =
-    error &&
-    typeof error === 'object' &&
-    `touchpoints.${key}.os.android` in error
-      ? error[`touchpoints.${key}.os.android`]
-      : false;
-
-  const lengthError =
-    error && typeof error === 'object' && `touchpoints.${key}.length` in error
-      ? error[`touchpoints.${key}.length`]
-      : false;
-
-  const hasError =
-    macosError ||
-    windowsError ||
-    linuxError ||
-    iosError ||
-    androidError ||
-    lengthError;
+  const hasErrors =
+    (error &&
+      typeof error === 'object' &&
+      Object.keys(error).some((k) => k.startsWith(`touchpoints.${key}`))) ??
+    false;
 
   return (
     <>
@@ -78,7 +46,7 @@ const TouchpointItem = ({
         id={`touchpoint-${index}`}
         key={`touchpoint-${index}`}
         hasBorder
-        type={hasError ? 'danger' : 'default'}
+        type={hasErrors ? 'danger' : 'default'}
       >
         <AccordionNew.Section>
           <AccordionNew.Header icon={getIconFromTouchpointOutput(touchpoint)}>

src/pages/Plan/modules/Touchpoints/utils/getIconFromTouchpoint.tsx

@@ -9,26 +9,30 @@ import { ReactComponent as WebSmartphoneIcon } from 'src/assets/icons/touchpoint
 import { components } from 'src/common/schema';
 import { useModuleTouchpoints } from '../hooks';
 
-const getIconColor = () => {
+const getIconColor = (
+  touchpoint: components['schemas']['OutputModuleTouchpoints'] & { key: number }
+) => {
+  const { key, os } = touchpoint;
   const { error } = useModuleTouchpoints();
 
   const hasErrors =
     (error &&
       typeof error === 'object' &&
-      Object.keys(error).some((k) => k.startsWith('touchpoints'))) ??
+      Object.keys(error).some((k) => k.startsWith(`touchpoints.${key}`))) ??
     false;
 
-  // TODO: Handle grey color
+  const hasOs = Object.keys(os).length > 0;
 
   if (hasErrors) return getColor(appTheme.colors.dangerHue, 900);
+  if (!hasErrors && !hasOs) return getColor(appTheme.palette.grey, 600);
   return getColor(appTheme.colors.primaryHue, 600);
 };
 
 const getIconFromTouchpointOutput = (
   touchpoint: components['schemas']['OutputModuleTouchpoints'] & { key: number }
 ) => {
   const { kind, form_factor } = touchpoint;
-  const color = getIconColor();
+  const color = getIconColor(touchpoint);
 
   switch (form_factor) {
     case 'desktop':

src/pages/Templates/Context.tsx

@@ -40,6 +40,8 @@ export const TemplatesContextProvider = ({
   const { data } = useGetWorkspacesByWidTemplatesQuery(
     {
       wid: activeWorkspace?.id.toString() || '',
+      orderBy: 'order',
+      order: 'asc',
     },
     {
       skip: !activeWorkspace,

src/pages/Templates/index.tsx

@@ -8,7 +8,6 @@ import PlanCreationInterface from 'src/common/components/PlanCreationInterface';
 import { useGetWorkspacesByWidTemplatesQuery } from 'src/features/api';
 import { Page } from 'src/features/templates/Page';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
-import { useCanAccessToActiveWorkspace } from 'src/hooks/useCanAccessToActiveWorkspace';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import Body from './Body';
 import { CategoriesNav } from './CategoriesNav';
@@ -51,27 +50,28 @@ const Templates = () => {
   const location = useLocation();
   const { activeWorkspace } = useActiveWorkspace();
   const { status } = useAppSelector((state) => state.user);
-  const canViewTemplates = useCanAccessToActiveWorkspace();
 
-  const { data, isLoading, isError } = useGetWorkspacesByWidTemplatesQuery(
+  const { isLoading, isError } = useGetWorkspacesByWidTemplatesQuery(
     {
       wid: activeWorkspace?.id.toString() || '',
+      orderBy: 'order',
+      order: 'asc',
     },
     {
       skip: !activeWorkspace,
     }
   );
 
-  if (!data || isLoading || status === 'loading') {
-    return <PageLoader />;
-  }
-
-  if (!canViewTemplates || isError) {
+  if (isError) {
     navigate(notFoundRoute, {
       state: { from: location.pathname },
     });
   }
 
+  if (isLoading || status === 'loading') {
+    return <PageLoader />;
+  }
+
   return (
     <Page
       pageHeader={<PageHeader />}

tests/e2e/templates/index.spec.ts

@@ -133,7 +133,7 @@ test.describe("If i don't have workspace access", () => {
     // shared workspaces means no workspace access right now
     await templates.mocksharedWorkspacesList();
 
-    await templates.mockGetTemplates();
+    await templates.mockGetTemplatesWithoutPermissions();
     await templates.mockGetProjects();
     await templates.mockPostPlans();
   });

tests/fixtures/pages/Templates.ts

@@ -66,6 +66,21 @@ export class Templates extends UnguessPage {
     });
   }
 
+  async mockGetTemplatesWithoutPermissions() {
+    await this.page.route('*/**/api/workspaces/1/templates*', async (route) => {
+      if (route.request().method() === 'GET') {
+        await route.fulfill({
+          status: 403,
+          body: JSON.stringify({
+            message: "Workspace doesn't exist or not accessible",
+          }),
+        });
+      } else {
+        await route.continue();
+      }
+    });
+  }
+
   async mockPostPlans() {
     await this.page.route('*/**/api/workspaces/1/plans', async (route) => {
       if (route.request().method() === 'POST') {