MP-312 & MP-313 update work exp modal

Author: kkartunov

src/apps/onboarding/src/components/modal-add-work/index.tsx

@@ -5,8 +5,8 @@ import moment from 'moment'
 
 import { Button, IconSolid, InputDatePicker, InputSelect, InputText, Tooltip } from '~/libs/ui'
 import { FormInputCheckbox } from '~/apps/self-service/src/components/form-elements'
+import { INDUSTRIES_OPTIONS } from '~/libs/shared'
 
-import { INDUSTRIES_OPTIONS } from '../../config'
 import OnboardingBaseModal from '../onboarding-base-modal'
 import WorkInfo, { emptyWorkInfo } from '../../models/WorkInfo'
 

src/apps/onboarding/src/config/index.ts

@@ -25,16 +25,3 @@ export const ACTIONS: {
         UPDATE_MEMBER_PHOTO_URL: 'UPDATE_MEMBER_PHOTO_URL',
     },
 }
-
-export const INDUSTRIES_OPTIONS: string[] = [
-    'Banking',
-    'Consumer goods',
-    'Energy',
-    'Entertainment',
-    'Healthcare',
-    'Pharma',
-    'Tech & technology services',
-    'Telecoms',
-    'Public sector',
-    'Travel & hospitality',
-]

src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable complexity */
 import { Dispatch, FC, MutableRefObject, SetStateAction, useRef, useState } from 'react'
-import { bind, trim } from 'lodash'
+import { bind, sortBy, trim } from 'lodash'
 import { toast } from 'react-toastify'
 import classNames from 'classnames'
 
-import { BaseModal, Button, IconOutline, InputDatePicker, InputText } from '~/libs/ui'
+import { BaseModal, Button, IconOutline, InputDatePicker, InputSelect, InputText } from '~/libs/ui'
 import {
     createMemberTraitsAsync,
     updateMemberTraitsAsync,
     UserProfile, UserTrait,
     UserTraitCategoryNames,
     UserTraitIds,
 } from '~/libs/core'
+import { INDUSTRIES_OPTIONS } from '~/libs/shared'
 
 import { WorkExpirenceCard } from '../WorkExpirenceCard'
 
@@ -61,6 +62,12 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
     ]
         = useState<UserTrait[] | undefined>(props.workExpirence)
 
+    const industryOptions: any = sortBy(INDUSTRIES_OPTIONS)
+        .map(v => ({
+            label: v,
+            value: v,
+        }))
+
     function handleModifyWorkExpirenceSave(): void {
         if (addingNewItem || editedItemIndex !== undefined) {
             handleFormAction()
@@ -307,30 +314,17 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
                             onChange={bind(handleFormValueChange, this, 'position')}
                             value={formValues.position as string}
                         />
-                        <div className={styles.row}>
-                            <InputText
-                                name='industry'
-                                label='Industry'
-                                error={formErrors.industry}
-                                placeholder='Enter an industry'
-                                dirty
-                                tabIndex={0}
-                                type='text'
-                                onChange={bind(handleFormValueChange, this, 'industry')}
-                                value={formValues.industry as string}
-                            />
-                            <InputText
-                                name='city'
-                                label='City'
-                                error={formErrors.city}
-                                placeholder='Enter a city'
-                                dirty
-                                tabIndex={0}
-                                type='text'
-                                onChange={bind(handleFormValueChange, this, 'city')}
-                                value={formValues.city as string}
-                            />
-                        </div>
+                        <InputSelect
+                            tabIndex={0}
+                            options={industryOptions}
+                            value={formValues.industry as string}
+                            onChange={bind(handleFormValueChange, this, 'industry')}
+                            name='industry'
+                            label='Industry'
+                            placeholder='Select industry'
+                            dirty
+                            error={formErrors.industry}
+                        />
                         <div className={styles.row}>
                             <InputDatePicker
                                 label='Start Date'

src/libs/shared/lib/constants/index.ts

@@ -0,0 +1,12 @@
+export const INDUSTRIES_OPTIONS: string[] = [
+    'Banking',
+    'Consumer goods',
+    'Energy',
+    'Entertainment',
+    'Healthcare',
+    'Pharma',
+    'Tech & technology services',
+    'Telecoms',
+    'Public sector',
+    'Travel & hospitality',
+]

src/libs/shared/lib/index.ts

@@ -4,3 +4,4 @@ export * from './hooks'
 export * from './services'
 export * from './swr-config'
 export * from './utils'
+export * from './constants'