Release 2025 07 22

package.json

@@ -6,13 +6,16 @@
     "@analytics/google-tag-manager": "^0.6.0",
     "@analytics/segment": "^2.1.0",
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.42",
+    "@appquality/unguess-design-system": "4.0.46",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@sentry/react": "^8.32.0",
     "@zendeskgarden/svg-icons": "^7.2.0",
-    "comuni-province-regioni": "^0.4.3",
     "analytics": "^0.8.16",
+    "comuni-province-regioni": "^0.4.3",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
     "i18n-iso-countries": "^7.3.0",

src/app/store.ts

@@ -6,13 +6,11 @@ import bugsPageReducer from '../features/bugsPage/bugsPageSlice';
 import filterReducer from '../features/campaignsFilter/campaignsFilterSlice';
 import navigationReducer from '../features/navigation/navigationSlice';
 import planModulesReducer from '../features/planModules';
-import userReducer from '../features/user/userSlice';
 import uxFilterReducer from '../features/uxFilters';
 import workspaceReducer from '../features/workspaces/workspaceSlice';
 
 export const store = configureStore({
   reducer: {
-    user: userReducer,
     navigation: navigationReducer,
     workspaces: workspaceReducer,
     filters: filterReducer,

src/common/Pages.tsx

@@ -23,6 +23,7 @@ import Manual from 'src/pages/Manual';
 import MediaNotFound from 'src/pages/NotFound/MediaNotFound';
 import NotFound from 'src/pages/NotFound/NotFound';
 import Plan from 'src/pages/Plan';
+import Profile from 'src/pages/Profile';
 import Template from 'src/pages/Template';
 import Templates from 'src/pages/Templates';
 import Video from 'src/pages/Video';
@@ -45,7 +46,11 @@ const Pages = () => {
                 <Route
                   path={`/${langPrefix}`}
                   key={`react-router-${langPrefix}`}
-                  errorElement={<ErrorBoundaryPage />}
+                  errorElement={
+                    process.env.NODE_ENV === 'development' ? undefined : (
+                      <ErrorBoundaryPage />
+                    )
+                  }
                 >
                   <Route
                     path={`/${langPrefix}/campaigns/:campaignId`}
@@ -116,6 +121,10 @@ const Pages = () => {
                   />
                   <Route path={`/${langPrefix}/oops`} element={<NotFound />} />
                   <Route index element={<Dashboard />} />
+                  <Route
+                    path={`/${langPrefix}/profile`}
+                    element={<Profile />}
+                  />
                 </Route>
               ))}
 

src/common/Track.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
-import { useAppSelector } from 'src/app/hooks';
+import { useGetUsersMeQuery } from 'src/features/api';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import { useAnalytics } from 'use-analytics';
 
@@ -26,7 +26,7 @@ export const Track = ({
   title: string;
   children: React.ReactNode;
 }) => {
-  const { userData } = useAppSelector((state) => state.user);
+  const { data: userData, isLoading, isSuccess } = useGetUsersMeQuery();
   const { activeWorkspace } = useActiveWorkspace();
   const { track, identify, page } = useAnalytics();
   const location = useLocation();
@@ -44,7 +44,7 @@ export const Track = ({
   );
 
   useEffect(() => {
-    if (userData?.role && activeWorkspace?.company) {
+    if (!isLoading && isSuccess && userData?.role && activeWorkspace?.company) {
       identify(`profile_${userData.profile_id}`, {
         role: userData.role,
         customer_role: userData.customer_role,

src/pages/JoinPage/Steps/PasswordRequirements.tsx → src/common/components/PasswordRequirements.tsx

@@ -1,9 +1,7 @@
 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,
@@ -29,30 +27,23 @@ const PasswordRequirement = ({
   </li>
 );
 
-const PasswordRequirements = () => {
-  const { values } = useFormikContext<JoinFormValues>();
+const PasswordRequirements = ({ password }: { password: string }) => {
   const { t } = useTranslation();
 
   return (
     <div data-qa="password-requirements" className="aq-mb-3">
       <MD>{t('PASSWORD_VALIDATOR_PASSWORD_REQUIREMENTS')}</MD>
       <ul>
-        <PasswordRequirement check={() => values.password.length >= 6}>
+        <PasswordRequirement check={() => password.length >= 6}>
           {t('PASSWORD_VALIDATOR_MINIMUM_OF_6_CHARACTERS')}
         </PasswordRequirement>
-        <PasswordRequirement
-          check={() => values.password.match(/[A-Z]/) !== null}
-        >
+        <PasswordRequirement check={() => password.match(/[A-Z]/) !== null}>
           {t('PASSWORD_VALIDATOR_CONTAIN_AN_UPPERCASE_LETTER')}
         </PasswordRequirement>
-        <PasswordRequirement
-          check={() => values.password.match(/[a-z]/) !== null}
-        >
+        <PasswordRequirement check={() => password.match(/[a-z]/) !== null}>
           {t('PASSWORD_VALIDATOR_CONTAIN_A_LOWERCASE_LETTER')}
         </PasswordRequirement>
-        <PasswordRequirement
-          check={() => values.password.match(/[0-9]/) !== null}
-        >
+        <PasswordRequirement check={() => password.match(/[0-9]/) !== null}>
           {t('PASSWORD_VALIDATOR_CONTAIN_A_NUMBER')}
         </PasswordRequirement>
       </ul>

src/common/components/inviteUsers/userItem.tsx

@@ -9,9 +9,11 @@ import {
 } from '@appquality/unguess-design-system';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAppSelector } from 'src/app/hooks';
 import { appTheme } from 'src/app/theme';
-import { GetWorkspacesByWidUsersApiResponse } from 'src/features/api';
+import {
+  GetWorkspacesByWidUsersApiResponse,
+  useGetUsersMeQuery,
+} from 'src/features/api';
 import styled from 'styled-components';
 import { getInitials } from '../navigation/header/utils';
 import RemoveConfirmModal from './modals/RemoveConfirmModal';
@@ -40,7 +42,8 @@ export const UserItem = ({
   showRemoveConfirm?: boolean;
 }) => {
   const { t } = useTranslation();
-  const { userData } = useAppSelector((state) => state.user);
+  const { data: userData, isLoading, isSuccess } = useGetUsersMeQuery();
+
   const [showRemoveConfirmModal, setShowRemoveConfirmModal] = useState(false);
 
   const handleRemoveUser = () => {
@@ -49,103 +52,111 @@ export const UserItem = ({
 
   const isMe = userData?.email === user.email;
 
+  if (isLoading || !isSuccess || !userData) return null;
+
   return (
-    <>
-      <UserListItem key={`profile_${user.profile_id}`}>
-        <Avatar avatarType="text" style={{ flexShrink: 0 }}>
-          {getInitials(user.name.length ? user.name : user.email)}
-        </Avatar>
-        <div>
-          <MD
-            isBold
-            style={{
-              color: getColor(appTheme.colors.primaryHue, 600),
-            }}
-          >
-            <StyledEllipsis>
-              {user.name.length ? user.name : user.email}{' '}
-              {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
-            </StyledEllipsis>
-          </MD>
-          {user.name.length > 0 && (
-            <SM
+    !isLoading &&
+    isSuccess &&
+    userData && (
+      <>
+        <UserListItem key={`profile_${user.profile_id}`}>
+          <Avatar avatarType="text" style={{ flexShrink: 0 }}>
+            {getInitials(user.name.length ? user.name : user.email)}
+          </Avatar>
+          <div>
+            <MD
+              isBold
               style={{
-                color: appTheme.palette.grey[700],
+                color: getColor(appTheme.colors.primaryHue, 600),
               }}
             >
-              <StyledEllipsis>{user.email}</StyledEllipsis>
-            </SM>
-          )}
-        </div>
-        {onResendInvite && onRemoveUser ? (
-          <div style={{ marginLeft: 'auto' }}>
-            {!isMe && (
-              <ButtonMenu
-                label={
-                  user.invitationPending
-                    ? t('__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL')
-                    : t('__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL')
-                }
-                buttonProps={{
-                  style: user.invitationPending
-                    ? { color: appTheme.palette.orange[600] }
-                    : {},
+              <StyledEllipsis>
+                {user.name.length ? user.name : user.email}{' '}
+                {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
+              </StyledEllipsis>
+            </MD>
+            {user.name.length > 0 && (
+              <SM
+                style={{
+                  color: appTheme.palette.grey[700],
                 }}
-                onSelect={(value) => {
-                  if (value === 'invite') {
-                    onResendInvite();
-                    return;
+              >
+                <StyledEllipsis>{user.email}</StyledEllipsis>
+              </SM>
+            )}
+          </div>
+          {onResendInvite && onRemoveUser ? (
+            <div style={{ marginLeft: 'auto' }}>
+              {!isMe && (
+                <ButtonMenu
+                  label={
+                    user.invitationPending
+                      ? t(
+                          '__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL'
+                        )
+                      : t('__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL')
                   }
+                  buttonProps={{
+                    style: user.invitationPending
+                      ? { color: appTheme.palette.orange[600] }
+                      : {},
+                  }}
+                  onSelect={(value) => {
+                    if (value === 'invite') {
+                      onResendInvite();
+                      return;
+                    }
 
-                  if (value === 'remove') {
-                    if (showRemoveConfirm) {
-                      handleRemoveUser();
-                    } else {
-                      onRemoveUser();
+                    if (value === 'remove') {
+                      if (showRemoveConfirm) {
+                        handleRemoveUser();
+                      } else {
+                        onRemoveUser();
+                      }
                     }
-                  }
-                }}
-              >
-                {user.invitationPending && (
-                  <ButtonMenu.Item value="invite">
-                    {t('__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION')}
+                  }}
+                >
+                  {user.invitationPending && (
+                    <ButtonMenu.Item value="invite">
+                      {t('__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION')}
+                    </ButtonMenu.Item>
+                  )}
+                  <ButtonMenu.Item value="remove">
+                    <Span hue={appTheme.components.text.dangerColor}>
+                      {t('__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION')}
+                    </Span>
                   </ButtonMenu.Item>
-                )}
-                <ButtonMenu.Item value="remove">
-                  <Span hue={appTheme.components.text.dangerColor}>
-                    {t('__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION')}
-                  </Span>
-                </ButtonMenu.Item>
-              </ButtonMenu>
-            )}
-          </div>
-        ) : (
-          <>
-            {user.invitationPending && (
-              <Span
-                style={{ marginLeft: 'auto' }}
-                hue={appTheme.palette.orange[600]}
-              >
-                {t('__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL')}
-              </Span>
-            )}
-            {!user.invitationPending && (
-              <Span
-                style={{ marginLeft: 'auto' }}
-                hue={appTheme.palette.grey[700]}
-              >
-                {t('__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL')}
-              </Span>
-            )}
-          </>
+                </ButtonMenu>
+              )}
+            </div>
+          ) : (
+            <>
+              {user.invitationPending && (
+                <Span
+                  style={{ marginLeft: 'auto' }}
+                  hue={appTheme.palette.orange[600]}
+                >
+                  {t('__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL')}
+                </Span>
+              )}
+              {!user.invitationPending && (
+                <Span
+                  style={{ marginLeft: 'auto' }}
+                  hue={appTheme.palette.grey[700]}
+                >
+                  {t('__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL')}
+                </Span>
+              )}
+            </>
+          )}
+        </UserListItem>
+        {showRemoveConfirmModal && onRemoveUser && (
+          <RemoveConfirmModal
+            onClose={(includeShared) => onRemoveUser(includeShared)}
+            handleCancel={() => setShowRemoveConfirmModal(false)}
+          />
         )}
-      </UserListItem>
-      {showRemoveConfirmModal && onRemoveUser && (
-        <RemoveConfirmModal
-          onClose={(includeShared) => onRemoveUser(includeShared)}
-          handleCancel={() => setShowRemoveConfirmModal(false)}
-        />
-      )}
-    </>
+      </>
+    )
   );
 };