feat: Add JoinPage component with navigation and styling

generate-devel-token copy.json

@@ -0,0 +1,5 @@
+{
+    "username": "[email protected]",
+    "password": "password",
+    "url": "https://dev.unguess.io/api"
+}

index.html

@@ -48,7 +48,7 @@
     <div id="root">
       <div id="appq-loading-content">
         <div class="loadingImg">
-          <img src="/static/unguess_loader_single.gif" />
+          <img title="loading unguess website" src="/static/unguess_loader_single.gif" />
         </div>
       </div>
     </div>

package.json

@@ -14,6 +14,7 @@
     "i18n-iso-countries": "^7.3.0",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
+    "motion": "^12.15.0",
     "qs": "^6.10.3",
     "query-string": "^7.1.1",
     "react": "^18.3.1",

src/common/Pages.tsx

@@ -17,6 +17,7 @@ import CampaignPreview from 'src/pages/Campaign/preview';
 import Dashboard from 'src/pages/Dashboard';
 import Project from 'src/pages/Dashboard/Project';
 import InsightsPage from 'src/pages/Insights';
+import JoinPage from 'src/pages/JoinPage';
 import LoginPage from 'src/pages/LoginPage';
 import Manual from 'src/pages/Manual';
 import MediaNotFound from 'src/pages/NotFound/MediaNotFound';
@@ -66,6 +67,12 @@ const Pages = () => {
                     path={`/${langPrefix}/login`}
                     element={<LoginPage />}
                   />
+                  <Route path={`/${langPrefix}/join`} element={<JoinPage />} />
+                  <Route
+                    path={`/${langPrefix}/join/invites/:profile/:token`}
+                    element={<JoinPage />}
+                  />
+
                   <Route
                     path={`/${langPrefix}/projects/:projectId`}
                     element={<Project />}
@@ -146,6 +153,21 @@ const Pages = () => {
                 }
                 errorElement={<ErrorBoundaryPage />}
               />
+
+              <Route
+                path="/join"
+                element={
+                  <Redirect
+                    url={({ searchParams }) => {
+                      if (!searchParams || !searchParams.get('redirect'))
+                        return '/oops';
+                      return `/campaigns/${searchParams.get('cid')}/bugform`;
+                    }}
+                  />
+                }
+                errorElement={<ErrorBoundaryPage />}
+              />
+
               <Route path="*" element={<Navigate replace to="/oops" />} />
             </>
           )

src/common/schema.ts

@@ -22,10 +22,6 @@ export interface paths {
       };
     };
   };
-  '/campaigns': {
-    post: operations['post-campaigns'];
-    parameters: {};
-  };
   '/campaigns/{cid}': {
     get: operations['get-campaign'];
     patch: operations['patch-campaigns'];
@@ -320,6 +316,15 @@ export interface paths {
       };
     };
   };
+  '/invites/{profile}/{token}': {
+    get: operations['get-invites-profile-token'];
+    parameters: {
+      path: {
+        profile: string;
+        token: string;
+      };
+    };
+  };
   '/media/{id}': {
     get: operations['get-media-id'];
     parameters: {
@@ -376,9 +381,17 @@ export interface paths {
       };
     };
   };
-  '/templates': {
-    /** Retrieve all available use case templates */
-    get: operations['get-templates'];
+  '/users': {
+    post: operations['post-users'];
+    parameters: {};
+  };
+  '/users/by-email/{email}': {
+    head: operations['head-users-by-email-email'];
+    parameters: {
+      path: {
+        email: string;
+      };
+    };
   };
   '/users/me': {
     get: operations['get-users-me'];
@@ -394,6 +407,10 @@ export interface paths {
       };
     };
   };
+  '/users/roles': {
+    get: operations['get-users-roles'];
+    parameters: {};
+  };
   '/videos/{vid}': {
     /** Retrive single video data */
     get: operations['get-videos-vid'];
@@ -492,7 +509,7 @@ export interface paths {
   '/workspaces/{wid}/plans': {
     /**
      * Function: Retrieves all plans within a specified workspace.
-     * Plan Status: Includes plans in a working state, such as those that are in the "draft" or "pending review" stages. Also includes plans that are "approved," provided there is no active campaign currently linked to them.
+     * Plan Status: Includes plans in a working state, such as those that are in the 'draft' or 'pending review' stages. Also includes plans that are 'approved,' provided there is no active campaign currently linked to them.
      *
      * Use Cases:
      * - Reviewing all plans that are still in development or awaiting approval.
@@ -1123,40 +1140,6 @@ export interface components {
       /** @enum {string} */
       type: 'tablet';
     };
-    /**
-     * Template
-     * @description Template of a usecase object
-     */
-    Template: {
-      title: string;
-      /** @description Short description used as preview of template or in templates dropdown */
-      description?: string;
-      /** @description HTML content used to pre-fill the use case editor */
-      content?: string;
-      category?: components['schemas']['TemplateCategory'];
-      /** @enum {string} */
-      device_type?: 'webapp' | 'mobileapp';
-      /**
-       * @default en
-       * @enum {string}
-       */
-      locale?: 'en' | 'it';
-      /** Format: uri */
-      image?: string;
-      /**
-       * @description The use case created by this template needs a login or not?
-       * @default false
-       */
-      requiresLogin?: boolean;
-    };
-    /**
-     * TemplateCategory
-     * @description Group different templates
-     */
-    TemplateCategory: {
-      id?: number;
-      name: string;
-    };
     /** Tenant */
     Tenant: {
       /** @description tryber wp_user_id */
@@ -1180,10 +1163,6 @@ export interface components {
     UseCase: {
       title: string;
       description: string;
-      /** @description Optional in experiential campaigns */
-      functionality?: {
-        id?: number;
-      } & components['schemas']['Template'];
       logged?: boolean;
       link?: string;
     };
@@ -1684,6 +1663,20 @@ export interface components {
       };
       background?: string;
     };
+    /** Data for post-users request for invited user */
+    PostUserInviteData: {
+      profileId: number;
+      token: string;
+      /** @enum {string} */
+      type: 'invite';
+    };
+    /** Data for post-users request for new user */
+    PostUserNewData: {
+      workspace: string;
+      email: string;
+      /** @enum {string} */
+      type: 'new';
+    };
   };
   responses: {
     /** Shared error response */
@@ -1764,7 +1757,6 @@ export interface components {
           has_bug_parade?: number;
           description?: string;
           base_bug_internal_id?: string;
-          express_slug: string;
           use_cases?: components['schemas']['UseCase'][];
           productType?: number;
           productLink?: string;
@@ -1850,22 +1842,6 @@ export interface operations {
       500: components['responses']['Error'];
     };
   };
-  'post-campaigns': {
-    parameters: {};
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          'application/json': components['schemas']['Campaign'];
-        };
-      };
-      400: components['responses']['Error'];
-      403: components['responses']['Error'];
-      404: components['responses']['Error'];
-      500: components['responses']['Error'];
-    };
-    requestBody: components['requestBodies']['Campaign'];
-  };
   'get-campaign': {
     parameters: {
       path: {
@@ -3075,6 +3051,29 @@ export interface operations {
       };
     };
   };
+  'get-invites-profile-token': {
+    parameters: {
+      path: {
+        profile: string;
+        token: string;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json': {
+            name: string;
+            surname: string;
+            email: string;
+            workspace: string;
+          };
+        };
+      };
+      /** Bad Request */
+      400: unknown;
+    };
+  };
   'get-media-id': {
     parameters: {
       path: {
@@ -3320,30 +3319,47 @@ export interface operations {
       };
     };
   };
-  /** Retrieve all available use case templates */
-  'get-templates': {
-    parameters: {
-      query: {
-        /** filterBy[<fieldName>]=<fieldValue> */
-        filterBy?: components['parameters']['filterBy'];
-        /** Order value (ASC, DESC) */
-        order?: components['parameters']['order'];
-        /** Order by accepted field */
-        orderBy?: components['parameters']['orderBy'];
-      };
-    };
+  'post-users': {
+    parameters: {};
     responses: {
-      /** OK */
-      200: {
+      /** Created */
+      201: {
         content: {
-          'application/json': ({
-            id?: number;
-          } & components['schemas']['Template'])[];
+          'application/json': {
+            workspaceId: number;
+            projectId?: number;
+          };
         };
       };
       400: components['responses']['Error'];
-      403: components['responses']['Error'];
-      500: components['responses']['Error'];
+    };
+    requestBody: {
+      content: {
+        'application/json': {
+          name: string;
+          surname: string;
+          password: string;
+          roleId: number;
+        } & (
+          | components['schemas']['PostUserInviteData']
+          | components['schemas']['PostUserNewData']
+        );
+      };
+    };
+  };
+  'head-users-by-email-email': {
+    parameters: {
+      path: {
+        email: string;
+      };
+    };
+    responses: {
+      /** OK */
+      200: unknown;
+      /** Bad Request */
+      400: unknown;
+      /** Not Found */
+      404: unknown;
     };
   };
   'get-users-me': {
@@ -3397,6 +3413,20 @@ export interface operations {
       };
     };
   };
+  'get-users-roles': {
+    parameters: {};
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json': {
+            id: number;
+            name: string;
+          }[];
+        };
+      };
+    };
+  };
   /** Retrive single video data */
   'get-videos-vid': {
     parameters: {
@@ -3751,7 +3781,7 @@ export interface operations {
   };
   /**
    * Function: Retrieves all plans within a specified workspace.
-   * Plan Status: Includes plans in a working state, such as those that are in the "draft" or "pending review" stages. Also includes plans that are "approved," provided there is no active campaign currently linked to them.
+   * Plan Status: Includes plans in a working state, such as those that are in the 'draft' or 'pending review' stages. Also includes plans that are 'approved,' provided there is no active campaign currently linked to them.
    *
    * Use Cases:
    * - Reviewing all plans that are still in development or awaiting approval.

src/features/api/api.ts

@@ -1,6 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { stringify } from 'qs';
-import { Template } from '.';
 
 export const apiSlice = createApi({
   reducerPath: 'api',
@@ -39,7 +38,3 @@ export const apiSlice = createApi({
   ],
   endpoints: () => ({}),
 });
-
-export interface UseCaseTemplate extends Template {
-  id?: number;
-}