MP36 - QA fixes -> dev

src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx

@@ -1,8 +1,9 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
-import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
+import { createMemberTraitsAsync, updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import {
     FinancialInstitutionIcon,
@@ -21,6 +22,11 @@ interface ServiceProviderProps {
     profile: UserProfile
 }
 
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
+}
+
 const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps) => {
     const formElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -92,6 +98,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
         setSelectedServiceProviderType(undefined)
         setSelectedServiceProviderName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -157,7 +164,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
                         setIsEditMode(false)
                     })
             } else {
-                updateMemberTraitsAsync(
+                methodsMap[!serviceProviderTypesData || !serviceProviderTypesData.length ? 'create' : 'update'](
                     props.profile.handle,
                     [{
                         categoryName: 'Service Provider',
@@ -200,6 +207,8 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
             trait.name === itemToRemove?.name && trait.serviceProviderType === itemToRemove?.serviceProviderType
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{
@@ -288,7 +297,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !serviceProviderTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new service provider</p>
                 <div className={styles.form}>
@@ -300,6 +309,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
                         label='Service Provider Type *'
                         error={formErrors.serviceProviderType}
                         dirty
+                        placeholder='Select a Service Provider Type'
                     />
                     <InputText
                         name='serviceProviderName'

src/apps/accounts/src/settings/tabs/tools/software/Software.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/software/Software.tsx

@@ -1,8 +1,9 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
-import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
+import { createMemberTraitsAsync, updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import { SettingSection, SoftwareIcon } from '~/apps/accounts/src/lib'
 
@@ -14,6 +15,11 @@ interface SoftwareProps {
     profile: UserProfile
 }
 
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
+}
+
 const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
     const formElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -85,6 +91,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
         setSelectedSoftwareType(undefined)
         setSelectedSoftwareName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -146,7 +153,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                         setIsEditMode(false)
                     })
             } else {
-                updateMemberTraitsAsync(
+                methodsMap[!softwareTypesData || !softwareTypesData.length ? 'create' : 'update'](
                     props.profile.handle,
                     [{
                         categoryName: 'Software',
@@ -189,6 +196,8 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
             trait.name === itemToRemove?.name && trait.softwareType === itemToRemove?.softwareType
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{
@@ -267,7 +276,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !softwareTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new software</p>
                 <div className={styles.form}>
@@ -278,6 +287,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                         name='softwareTypes'
                         label='Software Type *'
                         error={formErrors.softwareType}
+                        placeholder='Select a Software Type'
                         dirty
                     />
                     <InputText

src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx

@@ -1,8 +1,9 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
-import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
+import { createMemberTraitsAsync, updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputText } from '~/libs/ui'
 import { SettingSection, SubscriptionsIcon } from '~/apps/accounts/src/lib'
 
@@ -13,6 +14,11 @@ interface SubscriptionsProps {
     profile: UserProfile
 }
 
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
+}
+
 const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
     const formElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -72,6 +78,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
     function resetForm(): void {
         setSelectedSubscriptionName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -131,7 +138,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
                         setIsEditMode(false)
                     })
             } else {
-                updateMemberTraitsAsync(
+                methodsMap[!subscriptionsTypesData || !subscriptionsTypesData.length ? 'create' : 'update'](
                     props.profile.handle,
                     [{
                         categoryName: 'Subscription',
@@ -174,6 +181,8 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
             trait.name === itemToRemove?.name
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{
@@ -251,7 +260,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !subscriptionsTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new subscription</p>
                 <div className={styles.form}>

src/libs/core/lib/profile/profile-functions/index.ts

@@ -11,6 +11,7 @@ export {
     updateMemberMFAStatusAsync,
     updateMemberPasswordAsync,
     updateMemberTraitsAsync,
+    createMemberTraitsAsync,
 } from './profile.functions'
 export * from './profile-store'
 export * from './rating.functions'

src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts

@@ -85,3 +85,10 @@ export async function updateMemberTraits(
 ): Promise<UserTraits[]> {
     return xhrPutAsync<UserTraits[], UserTraits[]>(`${profileUrl(handle)}/traits`, traits)
 }
+
+export async function createMemberTraits(
+    handle: string,
+    traits: UserTraits[],
+): Promise<UserTraits[]> {
+    return xhrPostAsync<UserTraits[], UserTraits[]>(`${profileUrl(handle)}/traits`, traits)
+}

src/libs/core/lib/profile/profile-functions/profile.functions.ts

@@ -13,6 +13,7 @@ import { UserVerify } from '../user-verify.model'
 import { profileFactoryCreate } from './profile-factory'
 import { getMemberStats, getVerification, profileStoreGet, profileStorePatchName } from './profile-store'
 import {
+    createMemberTraits,
     getCountryLookup,
     updateMemberEmailPreferences,
     updateMemberMFA,
@@ -108,3 +109,10 @@ export async function updateMemberTraitsAsync(
 ): Promise<UserTraits[]> {
     return updateMemberTraits(handle, traits)
 }
+
+export async function createMemberTraitsAsync(
+    handle: string,
+    traits: UserTraits[],
+): Promise<UserTraits[]> {
+    return createMemberTraits(handle, traits)
+}

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss

@@ -5,7 +5,7 @@
     align-items: center;
     margin-top: $sp-1;
     cursor: pointer;
-    color: $black-100;
+    color: $black-60;
 
     &-icon {
         margin-left: auto;

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -32,6 +32,7 @@ interface InputSelectProps {
     readonly name: string
     readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
     readonly options: ReadonlyArray<InputSelectOption>
+    readonly placeholder?: string
     readonly tabIndex?: number
     readonly value?: string
 }
@@ -79,6 +80,7 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
         >
             <div className={styles.selected} onClick={toggleIfNotDisabled}>
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
+                <span className='body-small'>{!selectedOption && !!props.placeholder ? props.placeholder : ''}</span>
                 <span className={styles['selected-icon']}>
                     <IconOutline.ChevronDownIcon />
                 </span>