Add select display name

src/components/Common/PersonalDataForm.tsx

@@ -8,9 +8,10 @@ import { NameLabels } from "components/Dashboard/PersonalDataParent";
 import { useDashboardAppDispatch, useDashboardAppSelector } from "dashboard-hooks";
 import { AVAILABLE_LANGUAGES, LOCALIZED_MESSAGES } from "globals";
 import validatePersonalData from "helperFunctions/validation/validatePersonalData";
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Field, Form as FinalForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
+import Select, { MultiValue } from "react-select";
 import { updateIntl } from "slices/Internationalisation";
 import CustomInput from "./CustomInput";
 import EduIDButton from "./EduIDButton";
@@ -27,8 +28,11 @@ export default function PersonalDataForm(props: PersonalDataFormProps) {
   const personal_data = useDashboardAppSelector((state) => state.personal_data.response);
   const messages = LOCALIZED_MESSAGES;
 
+  const [displayName, setDisplayName] = useState<string | undefined>();
+
   async function formSubmit(values: PersonalDataRequest) {
-    const response = await dispatch(postPersonalData(values));
+    const response = await dispatch(postPersonalData(displayName ? { ...values, display_name: displayName } : values));
+
     if (postPersonalData.fulfilled.match(response)) {
       props.setEditMode(false); // tell parent component we're done editing
       if (response.payload.language) {
@@ -55,9 +59,9 @@ export default function PersonalDataForm(props: PersonalDataFormProps) {
           <form id="personaldata-view-form" onSubmit={formProps.handleSubmit}>
             <fieldset className="name-inputs">
               {props.isVerifiedIdentity ? (
-                <RenderLockedNames labels={labels} />
+                <RenderLockedNames labels={labels} setDisplayName={setDisplayName} />
               ) : (
-                <RenderEditableNames labels={labels} />
+                <RenderEditableNames labels={labels} setDisplayName={setDisplayName} />
               )}
             </fieldset>
             <RenderLanguageSelect />
@@ -73,6 +77,83 @@ export default function PersonalDataForm(props: PersonalDataFormProps) {
   );
 }
 
+function SelectDisplayName(props: { setDisplayName: any }): JSX.Element {
+  const is_verified = useDashboardAppSelector((state) => state.identities.is_verified);
+  const given_name = useDashboardAppSelector((state) => state.personal_data.response?.given_name);
+  const surname = useDashboardAppSelector((state) => state.personal_data.response?.surname);
+  const [selectedOptions, setSelectedOptions] = useState<{ label: string; value: string }[]>([]);
+  const [defaultValues, setDefaultValues] = useState<{ label: string; value: string }[]>([]);
+  const givenNameInputElement = document.getElementById("given_name") as HTMLInputElement;
+  const givenNameInputValue = givenNameInputElement?.value;
+  const surNameInputElement = document.getElementById("surname") as HTMLInputElement;
+  const surNameInputValue = surNameInputElement?.value;
+
+  useEffect(() => {
+    if (!is_verified && givenNameInputValue && surNameInputValue) {
+      const fullName = `${givenNameInputValue} ${surNameInputValue}`;
+      const splitFullName = fullName?.split(/[\s-]+/);
+      const transformedOptions = splitFullName?.map((name) => ({
+        label: name,
+        value: name,
+      }));
+      setSelectedOptions(transformedOptions);
+      setDefaultValues(transformedOptions);
+    }
+    if (is_verified && given_name && surname) {
+      const fullName = `${given_name} ${surname}`;
+      const splitFullName = fullName?.split(/[\s-]+/);
+      const transformedOptions = splitFullName?.map((name) => ({
+        label: name,
+        value: name,
+      }));
+      setSelectedOptions(transformedOptions);
+      setDefaultValues(transformedOptions);
+    }
+  }, [given_name, surname, givenNameInputValue, surNameInputValue]);
+
+  const handleSelectChange = (newValue: MultiValue<{ label: string; value: string }>) => {
+    const updatedValue = Array.from(newValue);
+    if (updatedValue) {
+      setSelectedOptions(updatedValue);
+      const result = updatedValue.map((name: any) => name.value).join(" ");
+      if (result) {
+        props.setDisplayName(result);
+        console.log("result", result);
+      }
+    }
+  };
+
+  if (!defaultValues.length) {
+    return <></>;
+  }
+
+  return (
+    <fieldset>
+      <legend className="require">
+        <FormattedMessage defaultMessage="Display name" description="Display name select legend" />
+      </legend>
+      <Select
+        isMulti
+        defaultValue={selectedOptions}
+        name="display_name"
+        options={defaultValues}
+        onChange={handleSelectChange}
+        className="basic-multi-select"
+        classNamePrefix="select"
+        noOptionsMessage={() => (
+          <FormattedMessage
+            defaultMessage="To change the display name, delete and choose again"
+            description="Display name noOptionsMessage"
+          />
+        )}
+        placeholder={
+          <FormattedMessage defaultMessage="Select display name..." description="Display name select placeholder" />
+        }
+      />
+    </fieldset>
+  );
+}
+
 function RenderLanguageSelect(): JSX.Element {
   // Make an ordered list of languages to be presented as radio buttons
   const _languages = AVAILABLE_LANGUAGES as { [key: string]: string };
@@ -103,7 +184,7 @@ function RenderLanguageSelect(): JSX.Element {
  * the legal names from Skatteverket. There is however a button to request renewal of the names
  * from Skatteverket, which the user can use to speed up syncing in case of name change.
  */
-const RenderLockedNames = (props: { labels: NameLabels }) => {
+const RenderLockedNames = (props: { labels: NameLabels; setDisplayName: any }) => {
   const dispatch = useDashboardAppDispatch();
   const loading = useDashboardAppSelector((state) => state.config.loading_data);
   const given_name = useDashboardAppSelector((state) => state.personal_data.response?.given_name);
@@ -139,11 +220,12 @@ const RenderLockedNames = (props: { labels: NameLabels }) => {
           />
         </label>
       </div>
+      <SelectDisplayName setDisplayName={props.setDisplayName} />
     </Fragment>
   );
 };
 
-function RenderEditableNames(props: { labels: NameLabels }) {
+function RenderEditableNames(props: { labels: NameLabels; setDisplayName: any }) {
   return (
     <Fragment>
       <fieldset>
@@ -168,6 +250,7 @@ function RenderEditableNames(props: { labels: NameLabels }) {
           placeholder={props.labels.last}
         />
       </fieldset>
+      <SelectDisplayName setDisplayName={props.setDisplayName} />
       <p className="help-text">
         <FormattedMessage
           defaultMessage="First and last name will be replaced with your legal name if you verify your eduID with your personal id number."

src/components/Dashboard/PersonalDataParent.tsx

@@ -9,6 +9,7 @@ export interface NameLabels {
   // These are translated labels for "First" and "Last" name input- or text-fields
   first: string;
   last: string;
+  display_name: string;
 }
 
 interface RenderAddPersonalDataPromptProps {
@@ -31,6 +32,7 @@ function RenderAddPersonalDataPrompt({ setEditMode }: RenderAddPersonalDataPromp
 function RenderPersonalData(props: { labels: NameLabels }) {
   const first_name = useDashboardAppSelector((state) => state.personal_data.response?.given_name);
   const last_name = useDashboardAppSelector((state) => state.personal_data.response?.surname);
+  const display_name = useDashboardAppSelector((state) => state.personal_data.response?.display_name);
   const pref_language = useDashboardAppSelector((state) => state.personal_data.response?.language);
   // if language is set render label
   const hasPrefLanguage = pref_language !== undefined && pref_language !== null;
@@ -47,6 +49,7 @@ function RenderPersonalData(props: { labels: NameLabels }) {
     <div className="personal-data-info">
       <NameDisplay htmlFor="first name" label={props.labels.first} name={first_name} />
       <NameDisplay htmlFor="last name" label={props.labels.last} name={last_name} />
+      <NameDisplay htmlFor="display name" label={props.labels.display_name} name={display_name} />
       {hasPrefLanguage ? (
         <NameDisplay
           htmlFor="language"
@@ -120,6 +123,11 @@ function PersonalDataParent() {
       defaultMessage: "Last name",
       description: "Last name label/template (edit personal data)",
     }),
+    display_name: intl.formatMessage({
+      id: "pd.display_name",
+      defaultMessage: "Display name",
+      description: "Display name label/template (edit personal data)",
+    }),
   };
 
   return (

src/styles/_forms.scss

@@ -126,3 +126,9 @@ fieldset {
     }
   }
 }
+
+// React-select
+.select__multi-value__label {
+  font-size: 1.25rem !important;
+  align-self: center !important;
+}

src/translation/extractedMessages.json

@@ -1053,6 +1053,10 @@
     "developer_comment": "Dashboard change password modal main text",
     "string": "You will need to log in again to change your password."
   },
+  "Ryb62w": {
+    "developer_comment": "Display name noOptionsMessage",
+    "string": "To change the display name, delete and choose again"
+  },
   "S1ESg7": {
     "developer_comment": "Currently in progress title",
     "string": "Currently in progress"
@@ -1273,6 +1277,10 @@
     "developer_comment": "choosing usb key - list definition",
     "string": "Check with the manufacturer or retailer that the product meets the following requirements:"
   },
+  "XzScE+": {
+    "developer_comment": "Display name select legend",
+    "string": "Display name"
+  },
   "Y33LNf": {
     "developer_comment": "explanation text for vetting phone",
     "string": "For you with a phone number registered in your name"
@@ -1588,6 +1596,10 @@
     "developer_comment": "how to contact support - paragraph 3",
     "string": ", but for simple matters you can also reach us on phone number {phone}."
   },
+  "eFceSz": {
+    "developer_comment": "Display name select placeholder",
+    "string": "Select display name..."
+  },
   "eIAskC": {
     "developer_comment": "Start",
     "string": "Start"
@@ -2301,6 +2313,10 @@
     "developer_comment": "help - headline",
     "string": "Help and contact"
   },
+  "pd.display_name": {
+    "developer_comment": "Display name label/template (edit personal data)",
+    "string": "Display name"
+  },
   "pd.given_name": {
     "developer_comment": "First name label/template (edit personal data)",
     "string": "First name"