diff --git a/src/common/schema.ts b/src/common/schema.ts index 059fd6e38..c1200e4b3 100644 --- a/src/common/schema.ts +++ b/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 {} diff --git a/src/features/api/index.ts b/src/features/api/index.ts index 987698f9e..0f749823b 100644 --- a/src/features/api/index.ts +++ b/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[]; diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 85ed12f01..88bf9307f 100644 --- a/src/locales/en/translation.json +++ b/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", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 551b1dd62..4a53f8bea 100644 --- a/src/locales/it/translation.json +++ b/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": "", diff --git a/src/pages/Profile/FormProfile.tsx b/src/pages/Profile/FormProfile.tsx index 7e3492fc1..234944a10 100644 --- a/src/pages/Profile/FormProfile.tsx +++ b/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() diff --git a/src/pages/Profile/parts/ProfileCard.tsx b/src/pages/Profile/parts/ProfileCard.tsx index 62104afd0..541298063 100644 --- a/src/pages/Profile/parts/ProfileCard.tsx +++ b/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(null); + const { data: userRolesData, isLoading: userRoleIsLoading } = + useGetUsersRolesQuery(); + const { data: userCompanySizesData, isLoading: userCompanySizesIsLoading } = + useGetCompaniesSizesQuery(); + const selectRoleRef = useRef(null); + const selectCompanyRef = useRef(null); const { setFieldValue, touched, isSubmitting, submitForm } = useFormikContext(); - if (isLoading) return ; + if (userRoleIsLoading || userCompanySizesIsLoading) return ; return ( { {({ field, meta }: FieldProps) => { const hasError = meta.touched && Boolean(meta.error); return ( -
+
+ userCompanySizesData?.find( + (companySize) => + companySize.id === + Number.parseInt(value.inputValue ?? '', 10) + )?.name + } + label={ + <> + {t('__PROFILE_PAGE_USER_CARD_COMPANY_SIZE_LABEL')} + + * + + + } + onSelect={(companySize) => { + setFieldValue( + 'companySizeId', + Number.parseInt(companySize, 10) + ); + ( + selectCompanyRef.current?.querySelector( + '[role="combobox"]' + ) as HTMLElement | null + )?.blur(); + }} + > + {userCompanySizesData?.map((companySize) => ( + + {companySize.name} + + ))} + + {hasError && ( + + {meta.error} + + )} +
+ ); + }} + +