Merge pull request #1409 from AppQuality/UN-1694

UN-1694  - Add companies sizes to profile page

Author: sinatragianpaolo

src/common/schema.ts

@@ -305,6 +305,9 @@ export interface paths {
       };
     };
   };
+  "/companies/sizes": {
+    get: operations["get-companies-sizes"];
+  };
   "/insights/{iid}": {
     get: operations["get-insights-iid"];
     delete: operations["delete-insights-iid"];
@@ -623,9 +626,6 @@ export interface paths {
       };
     };
   };
-  "/companies/sizes": {
-    get: operations["get-companies-sizes"];
-  };
 }
 
 export interface components {
@@ -1526,6 +1526,7 @@ export interface components {
     };
     /** User */
     User: {
+      company_size: string;
       customer_role: string;
       /** Format: email */
       email: string;
@@ -3107,6 +3108,19 @@ export interface operations {
       500: components["responses"]["Error"];
     };
   };
+  "get-companies-sizes": {
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": {
+            id: number;
+            name: string;
+          }[];
+        };
+      };
+    };
+  };
   "get-insights-iid": {
     parameters: {
       path: {
@@ -3636,6 +3650,7 @@ export interface operations {
       200: {
         content: {
           "application/json": {
+            companySize?: string;
             name?: string;
             role?: string;
             surname?: string;
@@ -3648,6 +3663,7 @@ export interface operations {
     requestBody: {
       content: {
         "application/json": {
+          companySizeId?: number;
           name?: string;
           password?: {
             current: string;
@@ -4432,19 +4448,6 @@ export interface operations {
       };
     };
   };
-  "get-companies-sizes": {
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": {
-            id: number;
-            name: string;
-          }[];
-        };
-      };
-    };
-  };
 }
 
 export interface external {}

src/features/api/index.ts

@@ -1664,12 +1664,14 @@ export type HeadUsersByEmailByEmailApiArg = {
 export type GetUsersMeApiResponse = /** status 200  */ User;
 export type GetUsersMeApiArg = void;
 export type PatchUsersMeApiResponse = /** status 200 OK */ {
+  companySize?: string;
   name?: string;
   role?: string;
   surname?: string;
 };
 export type PatchUsersMeApiArg = {
   body: {
+    companySizeId?: number;
     name?: string;
     password?: {
       current: string;
@@ -2768,6 +2770,7 @@ export type Feature = {
   slug?: string;
 };
 export type User = {
+  company_size: string;
   customer_role: string;
   email: string;
   features?: Feature[];

src/locales/en/translation.json

@@ -1136,6 +1136,7 @@
   "__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_TITLE": "Allow notifications",
   "__PROFILE_MODAL_NOTIFICATIONS_UPDATED": "Changes saved",
   "__PROFILE_MODAL_PRIVACY_ITEM_LABEL": "Privacy settings",
+  "__PROFILE_PAGE_COMPANY_SIZE_REQUIRED_ERROR": "Company size is required",
   "__PROFILE_PAGE_CONFIRM_PASSWORD_MUST_MATCH_NEW_PASSWORD": "The confirmation password must match the new password",
   "__PROFILE_PAGE_NAME_REQUIRED_ERROR": "Name is required",
   "__PROFILE_PAGE_NAV_ITEM_PASSWORD": "Password settings",
@@ -1151,6 +1152,8 @@
   "__PROFILE_PAGE_TOAST_ERROR_UPDATING_PROFILE": "An error occurred while updating your profile. Please try again.",
   "__PROFILE_PAGE_TOAST_SUCCESS_PASSWORD_UPDATED": "Password updated successfully",
   "__PROFILE_PAGE_UPDATE_SUCCESS": "Profile updated successfully",
+  "__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_LABEL": "Company size",
+  "__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_PLACEHOLDER": "Select a Company size",
   "__PROFILE_PAGE_USER_CARD_EMAIL_LABEL": "Work email",
   "__PROFILE_PAGE_USER_CARD_LABEL": "Profile settings",
   "__PROFILE_PAGE_USER_CARD_NAME_LABEL": "First name",
@@ -1319,7 +1322,7 @@
   "_CAMPAIGN_WIDGET_UX_TEST_PROGRESS_MONITORING_HEADER": "Test Progress",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_DESCRIPTION_HEADER": "There are observations on",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_HEADER": "Analyzed User Contributions",
-  "_PAGE_PROFILE_HEADER_TEXT": "Keep your profile up to date: edit your name, role, or password anytime to make UNGUESS truly yours.",
+  "_PAGE_PROFILE_HEADER_TEXT": "Manage your profile anytime: check and update your personal information whenever you need.",
   "_PLAN_PAGE_MODULE_LANGUAGE_DESCRIPTION": "You’ll receive feedback in the language you’re selecting",
   "_PLAN_PAGE_MODULE_LANGUAGE_SUBTITLE": "Select participants' preferred language",
   "_PROJECT_PAGE_PLANS_GROUP_SEE_ALL": "View more",

src/locales/it/translation.json

@@ -1167,6 +1167,7 @@
   "__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_TITLE": "Vuoi ricevere le notifiche?",
   "__PROFILE_MODAL_NOTIFICATIONS_UPDATED": "Modifiche salvate",
   "__PROFILE_MODAL_PRIVACY_ITEM_LABEL": "Opzioni Privacy",
+  "__PROFILE_PAGE_COMPANY_SIZE_REQUIRED_ERROR": "",
   "__PROFILE_PAGE_CONFIRM_PASSWORD_MUST_MATCH_NEW_PASSWORD": "",
   "__PROFILE_PAGE_NAME_REQUIRED_ERROR": "",
   "__PROFILE_PAGE_NAV_ITEM_PASSWORD": "",
@@ -1182,6 +1183,8 @@
   "__PROFILE_PAGE_TOAST_ERROR_UPDATING_PROFILE": "",
   "__PROFILE_PAGE_TOAST_SUCCESS_PASSWORD_UPDATED": "",
   "__PROFILE_PAGE_UPDATE_SUCCESS": "",
+  "__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_LABEL": "",
+  "__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_PLACEHOLDER": "",
   "__PROFILE_PAGE_USER_CARD_EMAIL_LABEL": "",
   "__PROFILE_PAGE_USER_CARD_LABEL": "",
   "__PROFILE_PAGE_USER_CARD_NAME_LABEL": "",

src/pages/Profile/FormProfile.tsx

@@ -16,6 +16,7 @@ export const FormProfile = () => {
 
   const initialValues: ProfileFormValues = {
     roleId: data?.roleId || 0,
+    companySizeId: data?.companySizeId || 0,
     name: data?.name || '',
     surname: data?.surname || '',
     email: data?.email || '',
@@ -29,6 +30,9 @@ export const FormProfile = () => {
     roleId: Yup.number()
       .min(1, t('__PROFILE_PAGE_ROLE_REQUIRED_ERROR'))
       .required(t('__PROFILE_PAGE_ROLE_REQUIRED_ERROR')),
+    companySizeId: Yup.number()
+      .min(1, t('__PROFILE_PAGE_COMPANY_SIZE_REQUIRED_ERROR'))
+      .required(t('__PROFILE_PAGE_COMPANY_SIZE_REQUIRED_ERROR')),
   });
 
   return (
@@ -45,6 +49,7 @@ export const FormProfile = () => {
             name: values.name,
             surname: values.surname,
             roleId: values.roleId,
+            companySizeId: values.companySizeId,
           },
         })
           .unwrap()

src/pages/Profile/parts/ProfileCard.tsx

@@ -13,7 +13,10 @@ import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
 import { ReactComponent as UserIcon } from 'src/assets/icons/user.svg';
-import { useGetUsersRolesQuery } from 'src/features/api';
+import {
+  useGetUsersRolesQuery,
+  useGetCompaniesSizesQuery,
+} from 'src/features/api';
 import { ProfileFormValues } from '../valuesType';
 import { Loader } from './cardLoader';
 import {
@@ -25,12 +28,16 @@ import {
 
 export const ProfileCard = () => {
   const { t } = useTranslation();
-  const { data, isLoading } = useGetUsersRolesQuery();
-  const selectRef = useRef<HTMLDivElement>(null);
+  const { data: userRolesData, isLoading: userRoleIsLoading } =
+    useGetUsersRolesQuery();
+  const { data: userCompanySizesData, isLoading: userCompanySizesIsLoading } =
+    useGetCompaniesSizesQuery();
+  const selectRoleRef = useRef<HTMLDivElement>(null);
+  const selectCompanyRef = useRef<HTMLDivElement>(null);
   const { setFieldValue, touched, isSubmitting, submitForm } =
     useFormikContext<ProfileFormValues>();
 
-  if (isLoading) return <Loader />;
+  if (userRoleIsLoading || userCompanySizesIsLoading) return <Loader />;
 
   return (
     <StyledContainerCard
@@ -124,15 +131,15 @@ export const ProfileCard = () => {
           {({ field, meta }: FieldProps) => {
             const hasError = meta.touched && Boolean(meta.error);
             return (
-              <div ref={selectRef}>
+              <div ref={selectRoleRef}>
                 <Select
                   placeholder={t('__PROFILE_PAGE_USER_CARD_ROLE_PLACEHOLDER')}
                   data-qa="roleId-select"
                   {...field}
                   inputValue={field.value}
                   selectionValue={field.value}
                   renderValue={(value) =>
-                    data?.find(
+                    userRolesData?.find(
                       (role) =>
                         role.id === Number.parseInt(value.inputValue ?? '', 10)
                     )?.name
@@ -152,13 +159,13 @@ export const ProfileCard = () => {
                   onSelect={(role) => {
                     setFieldValue('roleId', Number.parseInt(role, 10));
                     (
-                      selectRef.current?.querySelector(
+                      selectRoleRef.current?.querySelector(
                         '[role="combobox"]'
                       ) as HTMLElement | null
                     )?.blur();
                   }}
                 >
-                  {data?.map((role) => (
+                  {userRolesData?.map((role) => (
                     <Select.Option key={role.id} value={role.id.toString()}>
                       {role.name}
                     </Select.Option>
@@ -177,6 +184,72 @@ export const ProfileCard = () => {
           }}
         </Field>
 
+        <Field name="companySizeId">
+          {({ field, meta }: FieldProps) => {
+            const hasError = meta.touched && Boolean(meta.error);
+            return (
+              <div ref={selectCompanyRef}>
+                <Select
+                  placeholder={t(
+                    '__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_PLACEHOLDER'
+                  )}
+                  data-qa="companySizeId-select"
+                  {...field}
+                  inputValue={field.value}
+                  selectionValue={field.value}
+                  renderValue={(value) =>
+                    userCompanySizesData?.find(
+                      (companySize) =>
+                        companySize.id ===
+                        Number.parseInt(value.inputValue ?? '', 10)
+                    )?.name
+                  }
+                  label={
+                    <>
+                      {t('__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_LABEL')}
+                      <Span
+                        style={{
+                          color: appTheme.palette.red[600],
+                        }}
+                      >
+                        *
+                      </Span>
+                    </>
+                  }
+                  onSelect={(companySize) => {
+                    setFieldValue(
+                      'companySizeId',
+                      Number.parseInt(companySize, 10)
+                    );
+                    (
+                      selectCompanyRef.current?.querySelector(
+                        '[role="combobox"]'
+                      ) as HTMLElement | null
+                    )?.blur();
+                  }}
+                >
+                  {userCompanySizesData?.map((companySize) => (
+                    <Select.Option
+                      key={companySize.id}
+                      value={companySize.id.toString()}
+                    >
+                      {companySize.name}
+                    </Select.Option>
+                  ))}
+                </Select>
+                {hasError && (
+                  <Message
+                    data-qa="update-profile-companySizeId-error"
+                    validation="error"
+                  >
+                    {meta.error}
+                  </Message>
+                )}
+              </div>
+            );
+          }}
+        </Field>
+
         <StyledFooter>
           <Button
             isAccent

src/pages/Profile/useProfileData.ts

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
-import { useGetUsersMeQuery, useGetUsersRolesQuery } from 'src/features/api';
+import {
+  useGetUsersMeQuery,
+  useGetUsersRolesQuery,
+  useGetCompaniesSizesQuery,
+} from 'src/features/api';
 import { ProfileFormValues } from './valuesType';
 
 export const useProfileData = () => {
@@ -8,15 +12,22 @@ export const useProfileData = () => {
   const { data: userData, isLoading: isUserDataLoading } = useGetUsersMeQuery();
   const { data: rolesData, isLoading: isRolesDataLoading } =
     useGetUsersRolesQuery();
+  const { data: companySizesData, isLoading: isCompanySizesLoading } =
+    useGetCompaniesSizesQuery();
 
   useEffect(() => {
-    if (userData && rolesData) {
+    if (userData && rolesData && companySizesData) {
       const roleObj = rolesData.find(
         (role) => role.name === userData.customer_role
       );
+      const companySizeObj = companySizesData.find(
+        (size) => size.name === userData.company_size
+      );
       const initialValues: ProfileFormValues = {
         role: roleObj?.name || undefined,
         roleId: roleObj?.id || 0,
+        companySize: companySizeObj?.name || '',
+        companySizeId: companySizeObj?.id || 0,
         name: userData.first_name || '',
         surname: userData.last_name || '',
         email: userData.email || '',
@@ -27,7 +38,8 @@ export const useProfileData = () => {
 
   return {
     data: profile,
-    isLoading: isUserDataLoading || isRolesDataLoading,
-    isFetching: isUserDataLoading || isRolesDataLoading,
+    isLoading: isUserDataLoading || isRolesDataLoading || isCompanySizesLoading,
+    isFetching:
+      isUserDataLoading || isRolesDataLoading || isCompanySizesLoading,
   };
 };

src/pages/Profile/valuesType.ts

@@ -4,6 +4,8 @@ export type ProfileFormValues = {
   roleId: number;
   email?: string;
   role?: string;
+  companySize?: string;
+  companySizeId: number;
 };
 
 export type PasswordFormValues = {

tests/api/users/_post/request_invited_user_request.json

@@ -1,9 +1,9 @@
 {
+  "companySizeId": 3,
   "name": "string",
   "password": "string",
   "profileId": 11111,
   "roleId": 0,
-  "companySizeId": 3,
   "surname": "string",
   "token": "th1s1s4f4k3t0k3n",
   "type": "invite"

tests/api/users/_post/request_new_user_request.json

@@ -1,9 +1,9 @@
 {
+  "companySizeId": 3,
   "email": "jhon.doe@example.com",
   "name": "string",
   "password": "string",
   "roleId": 0,
-  "companySizeId": 3,
   "surname": "string",
   "type": "new",
   "workspace": "My new Workspace"