Under the hood refactors and improvements

.env.development

@@ -2,7 +2,7 @@ REACT_APP_GTM_ID=GTM-WVXPS94
 REACT_APP_GTM_AUTH=HjeAxSQB9e685mi-_8YiDw
 REACT_APP_GTM_ENV=env-4
 REACT_APP_API_URL=/api
-REACT_APP_TRYBER_WP_API_URL=https://dev.tryber.me/wp-json/appq/v1
+REACT_APP_TRYBER_URL=https://dev.tryber.me
 REACT_ZAPIER_WEBHOOK=https://hooks.zapier.com/hooks/catch/5196925/bkxm1k6/
 REACT_APP_STRAPI_URL=https://admin.unguess.io
 REACT_APP_STRAPI_API_URL=https://admin.unguess.io/api

.env.production

@@ -1,6 +1,6 @@
 REACT_APP_GTM_ID=GTM-WVXPS94
 REACT_APP_API_URL=/api
-REACT_APP_TRYBER_WP_API_URL=https://tryber.me/wp-json/appq/v1
+REACT_APP_TRYBER_URL=https://tryber.me
 REACT_ZAPIER_WEBHOOK=https://hooks.zapier.com/hooks/catch/5196925/bkxm1k6/
 REACT_APP_STRAPI_URL=https://admin.unguess.io
 REACT_APP_STRAPI_API_URL=https://admin.unguess.io/api

package.json

@@ -18,6 +18,7 @@
     "i18n-iso-countries": "^7.3.0",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.3",
+    "iframe-resizer-react": "^1.1.0",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",
     "prosemirror-gapcursor": "^1.3.1",

src/app/theme.tsx

@@ -3,18 +3,19 @@ import {
   getColor,
 } from '@appquality/unguess-design-system';
 
+// todo: check green 600
 export const SEVERITY_COLORS: Record<Severities, string> = {
   critical: baseTheme.palette.red[900],
   high: baseTheme.palette.yellow[600],
   medium: baseTheme.palette.blue[600],
-  low: baseTheme.palette.teal[700],
+  low: baseTheme.palette.green[600],
 };
 
 export const SEVERITY_HUES: Record<Severities, string> = {
   critical: baseTheme.palette.red[900],
   high: baseTheme.palette.yellow[600],
   medium: baseTheme.palette.blue[600],
-  low: baseTheme.palette.teal[700],
+  low: baseTheme.palette.green[600],
 };
 // temporary fix for the bug state colors
 export const BUG_STATE_COLORS: Record<

src/common/GoogleTagManager.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import TagManager, { TagManagerArgs } from 'react-gtm-module';
 import { Helmet } from 'react-helmet';
 import { useAppSelector } from 'src/app/hooks';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 
 const tagManagerArgs: TagManagerArgs = {
   gtmId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
@@ -27,7 +28,7 @@ export const GoogleTagManager = ({
   children: React.ReactNode;
 }) => {
   const { userData } = useAppSelector((state) => state.user);
-  const { activeWorkspace } = useAppSelector((state) => state.navigation);
+  const { activeWorkspace } = useActiveWorkspace();
 
   const helmet = () => (
     <Helmet>

src/common/Pages.tsx

@@ -1,21 +1,22 @@
+import { useTranslation } from 'react-i18next';
 import {
-  createBrowserRouter,
-  createRoutesFromElements,
+  Navigate,
   Route,
   RouterProvider,
-  Navigate,
+  createBrowserRouter,
+  createRoutesFromElements,
 } from 'react-router-dom';
-import LoginPage from 'src/pages/LoginPage';
+import ErrorBoundaryPage from 'src/common/components/ErrorBoundary/ErrorBoundaryPage';
+import Bug from 'src/pages/Bug';
+import BugForm from 'src/pages/Bugform';
+import Bugs from 'src/pages/Bugs';
+import Campaign from 'src/pages/Campaign';
 import Dashboard from 'src/pages/Dashboard';
 import Project from 'src/pages/Dashboard/Project';
+import LoginPage from 'src/pages/LoginPage';
 import NotFound from 'src/pages/NotFound';
-import Catalog from 'src/pages/Services';
 import Service from 'src/pages/Service';
-import Campaign from 'src/pages/Campaign';
-import Bugs from 'src/pages/Bugs';
-import { useTranslation } from 'react-i18next';
-import Bug from 'src/pages/Bug';
-import ErrorBoundaryPage from 'src/common/components/ErrorBoundary/ErrorBoundaryPage';
+import Catalog from 'src/pages/Services';
 import { Redirect } from './Redirect';
 
 const Pages = () => {
@@ -38,6 +39,11 @@ const Pages = () => {
                   path={`/${langPrefix}/campaigns/:campaignId`}
                   element={<Campaign />}
                 />
+                <Route
+                  path={`/${langPrefix}/campaigns/:campaignId/bugform`}
+                  element={<BugForm />}
+                />
+
                 <Route path={`/${langPrefix}/login`} element={<LoginPage />} />
                 <Route
                   path={`/${langPrefix}/projects/:projectId`}

src/common/campaigns/index.ts

@@ -35,7 +35,7 @@ export const createPages = async (campaignId: number) => {
   const requestHeaders: HeadersInit = new Headers();
   requestHeaders.set('Content-Type', 'application/json');
 
-  const url = `${process.env.REACT_APP_TRYBER_WP_API_URL}/regenerate-campaign-pages/${campaignId}`;
+  const url = `${process.env.REACT_APP_TRYBER_URL}/wp-json/appq/v1/regenerate-campaign-pages/${campaignId}`;
 
   const res = await fetch(url, {
     method: 'GET',
@@ -52,7 +52,7 @@ export const createTasks = async (campaignId: number) => {
   const requestHeaders: HeadersInit = new Headers();
   requestHeaders.set('Content-Type', 'application/json');
 
-  const url = `${process.env.REACT_APP_TRYBER_WP_API_URL}/regenerate-campaign-tasks/${campaignId}`;
+  const url = `${process.env.REACT_APP_TRYBER_URL}/wp-json/appq/v1/regenerate-campaign-tasks/${campaignId}`;
 
   const res = await fetch(url, {
     method: 'GET',
@@ -69,7 +69,7 @@ export const createCrons = async (campaignId: number) => {
   const requestHeaders: HeadersInit = new Headers();
   requestHeaders.set('Content-Type', 'application/json');
 
-  const url = `${process.env.REACT_APP_TRYBER_WP_API_URL}/regenerate-campaign-crons/${campaignId}`;
+  const url = `${process.env.REACT_APP_TRYBER_URL}/wp-json/appq/v1/regenerate-campaign-crons/${campaignId}`;
 
   const res = await fetch(url, {
     method: 'GET',
@@ -86,7 +86,7 @@ export const createUseCases = async (campaignId: number) => {
   const requestHeaders: HeadersInit = new Headers();
   requestHeaders.set('Content-Type', 'application/json');
 
-  const url = `${process.env.REACT_APP_TRYBER_WP_API_URL}/regenerate-campaign-use-cases/${campaignId}`;
+  const url = `${process.env.REACT_APP_TRYBER_URL}/wp-json/appq/v1/regenerate-campaign-use-cases/${campaignId}`;
 
   const res = await fetch(url, {
     method: 'GET',

src/common/components/inviteUsers/campaignSettings.tsx

@@ -1,17 +1,23 @@
-import { appTheme } from 'src/app/theme';
 import {
+  Button,
   Label,
+  MD,
   Modal,
   ModalClose,
-  Span,
-  useToast,
   Notification,
-  Button,
+  Span,
   getColor,
-  MD,
+  useToast,
 } from '@appquality/unguess-design-system';
-import { useAppSelector } from 'src/app/hooks';
+import { FormikHelpers } from 'formik';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useAppSelector } from 'src/app/hooks';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as CampaignsIcon } from 'src/assets/icons/campaign-icon.svg';
+import { ReactComponent as ProjectsIcon } from 'src/assets/icons/project-icon.svg';
+import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
+import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
 import {
   useDeleteCampaignsByCidUsersMutation,
   useGetCampaignsByCidQuery,
@@ -20,30 +26,27 @@ import {
   useGetWorkspacesByWidUsersQuery,
   usePostCampaignsByCidUsersMutation,
 } from 'src/features/api';
-import { FormikHelpers } from 'formik';
-import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
-import { useState } from 'react';
-import { ReactComponent as CampaignsIcon } from 'src/assets/icons/campaign-icon.svg';
-import { ReactComponent as ProjectsIcon } from 'src/assets/icons/project-icon.svg';
-import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import { getLocalizedCampaignUrl } from 'src/hooks/useLocalizeDashboardUrl';
 import i18n from 'src/i18n';
 import { AddNewMemberInput } from './addNewMember';
-import { UserItem } from './userItem';
 import { PermissionSettingsFooter } from './modalFooter';
 import {
   FixedBody,
   FlexContainer,
   SettingsDivider,
   StyledAccordion,
-  UsersLabel,
-  UsersContainer,
   StyledAccordionPanel,
+  UsersContainer,
+  UsersLabel,
 } from './styled';
+import { UserItem } from './userItem';
 
 export const CampaignSettings = () => {
-  const { permissionSettingsTitle, campaignId, activeWorkspace } =
-    useAppSelector((state) => state.navigation);
+  const { permissionSettingsTitle, campaignId } = useAppSelector(
+    (state) => state.navigation
+  );
+  const { activeWorkspace } = useActiveWorkspace();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation();
   const { addToast } = useToast();

src/common/components/inviteUsers/projectSettings.tsx

@@ -1,46 +1,49 @@
-import { appTheme } from 'src/app/theme';
 import {
+  Button,
   Label,
+  MD,
   Modal,
   ModalClose,
-  Span,
-  useToast,
   Notification,
-  Button,
+  Span,
   getColor,
-  MD,
+  useToast,
 } from '@appquality/unguess-design-system';
-import { useAppSelector } from 'src/app/hooks';
+import { FormikHelpers } from 'formik';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useAppSelector } from 'src/app/hooks';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as ProjectsIcon } from 'src/assets/icons/project-icon.svg';
+import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
+import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
 import {
   useDeleteProjectsByPidUsersMutation,
   useGetProjectsByPidUsersQuery,
   useGetWorkspacesByWidUsersQuery,
   usePostProjectsByPidUsersMutation,
 } from 'src/features/api';
-import { FormikHelpers } from 'formik';
-import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
-import { useState } from 'react';
-import { ReactComponent as ProjectsIcon } from 'src/assets/icons/project-icon.svg';
-import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import { getLocalizedProjectUrl } from 'src/hooks/useLocalizeDashboardUrl';
 import i18n from 'src/i18n';
 import { AddNewMemberInput } from './addNewMember';
-import { UserItem } from './userItem';
 import { PermissionSettingsFooter } from './modalFooter';
 import {
   FixedBody,
   FlexContainer,
   SettingsDivider,
   StyledAccordion,
-  UsersLabel,
-  UsersContainer,
   StyledAccordionPanel,
+  UsersContainer,
+  UsersLabel,
 } from './styled';
+import { UserItem } from './userItem';
 
 export const ProjectSettings = () => {
-  const { permissionSettingsTitle, projectId, activeWorkspace } =
-    useAppSelector((state) => state.navigation);
+  const { permissionSettingsTitle, projectId } = useAppSelector(
+    (state) => state.navigation
+  );
+  const { activeWorkspace } = useActiveWorkspace();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation();
   const { addToast } = useToast();

src/common/components/inviteUsers/workspaceSettings.tsx

@@ -1,40 +1,40 @@
-import { appTheme } from 'src/app/theme';
 import {
+  Button,
   Label,
+  MD,
   Modal,
   ModalClose,
-  Span,
-  useToast,
   Notification,
-  Button,
+  Span,
   getColor,
-  MD,
+  useToast,
 } from '@appquality/unguess-design-system';
-import { useAppSelector } from 'src/app/hooks';
+import { FormikHelpers } from 'formik';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
+import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
 import {
   useDeleteWorkspacesByWidUsersMutation,
   useGetWorkspacesByWidUsersQuery,
   usePostWorkspacesByWidUsersMutation,
 } from 'src/features/api';
-import { FormikHelpers } from 'formik';
-import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
-import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
-import { useState } from 'react';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import i18n from 'src/i18n';
 import { AddNewMemberInput } from './addNewMember';
-import { UserItem } from './userItem';
 import { PermissionSettingsFooter } from './modalFooter';
 import {
   FixedBody,
   FlexContainer,
   SettingsDivider,
-  UsersLabel,
   UsersContainer,
+  UsersLabel,
 } from './styled';
+import { UserItem } from './userItem';
 
 export const WorkspaceSettings = () => {
-  const { activeWorkspace } = useAppSelector((state) => state.navigation);
+  const { activeWorkspace } = useActiveWorkspace();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation();
   const { addToast } = useToast();