From 11a3d81b23ab634e988c13ffb3e6a909fcf00683 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Thu, 8 Jun 2023 11:25:09 +0300
Subject: [PATCH 1/4] MP-84 fix space settings section without items

---
 .../tabs/tools/service-provider/ServiceProvider.module.scss   | 4 ++++
 .../settings/tabs/tools/service-provider/ServiceProvider.tsx  | 3 ++-
 .../src/settings/tabs/tools/software/Software.module.scss     | 4 ++++
 .../accounts/src/settings/tabs/tools/software/Software.tsx    | 3 ++-
 .../tabs/tools/subscriptions/Subscriptions.module.scss        | 4 ++++
 .../src/settings/tabs/tools/subscriptions/Subscriptions.tsx   | 3 ++-
 6 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.module.scss b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.module.scss
index 1de4cfa45..791843c2d 100644
--- a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.module.scss
+++ b/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;
diff --git a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
index 53644e14f..4579f8f2e 100644
--- a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
@@ -1,6 +1,7 @@
 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 { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
@@ -288,7 +289,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}>
diff --git a/src/apps/accounts/src/settings/tabs/tools/software/Software.module.scss b/src/apps/accounts/src/settings/tabs/tools/software/Software.module.scss
index 1de4cfa45..791843c2d 100644
--- a/src/apps/accounts/src/settings/tabs/tools/software/Software.module.scss
+++ b/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;
diff --git a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
index 338db50f3..4cf846691 100644
--- a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
@@ -1,6 +1,7 @@
 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 { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
@@ -267,7 +268,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}>
diff --git a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.module.scss b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.module.scss
index 1de4cfa45..791843c2d 100644
--- a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.module.scss
+++ b/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;
diff --git a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
index f8568b16f..ffda1cc85 100644
--- a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
@@ -1,6 +1,7 @@
 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 { Button, Collapsible, ConfirmModal, IconOutline, InputText } from '~/libs/ui'
@@ -251,7 +252,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}>

From bd86ad95461f006927d37468dcf2869c0951c11c Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Thu, 8 Jun 2023 11:59:09 +0300
Subject: [PATCH 2/4] MP-85 & MP-87 select dropdoen UI fixes

---
 src/apps/accounts/src/settings/tabs/tools/software/Software.tsx | 1 +
 .../form-groups/form-input/input-select/InputSelect.module.scss | 2 +-
 .../form/form-groups/form-input/input-select/InputSelect.tsx    | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
index 4cf846691..7ba8bdcf9 100644
--- a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
@@ -279,6 +279,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                         name='softwareTypes'
                         label='Software Type *'
                         error={formErrors.softwareType}
+                        placeholder='Select a Software Type'
                         dirty
                     />
                     <InputText
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss
index fac611ba4..aa2ab320f 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss
+++ b/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;
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
index d937e4cef..8be26c3d7 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
+++ b/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>

From b3278c0c7abf4849648187b5fbfc804d039c6bc0 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Thu, 8 Jun 2023 12:14:44 +0300
Subject: [PATCH 3/4] MP-88 fix edit mode bugs

---
 .../settings/tabs/tools/service-provider/ServiceProvider.tsx  | 4 ++++
 .../accounts/src/settings/tabs/tools/software/Software.tsx    | 3 +++
 .../src/settings/tabs/tools/subscriptions/Subscriptions.tsx   | 3 +++
 3 files changed, 10 insertions(+)

diff --git a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
index 4579f8f2e..9e3ccba6f 100644
--- a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
@@ -93,6 +93,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
         setSelectedServiceProviderType(undefined)
         setSelectedServiceProviderName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -201,6 +202,8 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
             trait.name === itemToRemove?.name && trait.serviceProviderType === itemToRemove?.serviceProviderType
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{
@@ -301,6 +304,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
                         label='Service Provider Type *'
                         error={formErrors.serviceProviderType}
                         dirty
+                        placeholder='Select a Service Provider Type'
                     />
                     <InputText
                         name='serviceProviderName'
diff --git a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
index 7ba8bdcf9..9a19c068b 100644
--- a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
@@ -86,6 +86,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
         setSelectedSoftwareType(undefined)
         setSelectedSoftwareName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -190,6 +191,8 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
             trait.name === itemToRemove?.name && trait.softwareType === itemToRemove?.softwareType
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{
diff --git a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
index ffda1cc85..a9c1cf067 100644
--- a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
@@ -73,6 +73,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
     function resetForm(): void {
         setSelectedSubscriptionName(undefined)
         formElRef.current.reset()
+        setIsEditMode(false)
     }
 
     function handleFormAction(): void {
@@ -175,6 +176,8 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
             trait.name === itemToRemove?.name
         )) || []
 
+        resetForm()
+
         updateMemberTraitsAsync(
             props.profile.handle,
             [{

From 4d7648e44813ececa54a9a0743ea3b0b03615b86 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Thu, 8 Jun 2023 13:59:03 +0300
Subject: [PATCH 4/4] MP-82 fix for trait create

---
 .../tabs/tools/service-provider/ServiceProvider.tsx      | 9 +++++++--
 .../src/settings/tabs/tools/software/Software.tsx        | 9 +++++++--
 .../settings/tabs/tools/subscriptions/Subscriptions.tsx  | 9 +++++++--
 src/libs/core/lib/profile/profile-functions/index.ts     | 1 +
 .../profile-functions/profile-store/profile-xhr.store.ts | 7 +++++++
 .../lib/profile/profile-functions/profile.functions.ts   | 8 ++++++++
 6 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
index 9e3ccba6f..05ec76154 100644
--- a/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx
@@ -3,7 +3,7 @@ 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,
@@ -22,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()
 
@@ -159,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',
diff --git a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
index 9a19c068b..9f16577ab 100644
--- a/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/software/Software.tsx
@@ -3,7 +3,7 @@ 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'
 
@@ -15,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()
 
@@ -148,7 +153,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                         setIsEditMode(false)
                     })
             } else {
-                updateMemberTraitsAsync(
+                methodsMap[!softwareTypesData || !softwareTypesData.length ? 'create' : 'update'](
                     props.profile.handle,
                     [{
                         categoryName: 'Software',
diff --git a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
index a9c1cf067..f21cecb28 100644
--- a/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
+++ b/src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx
@@ -3,7 +3,7 @@ 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'
 
@@ -14,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()
 
@@ -133,7 +138,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
                         setIsEditMode(false)
                     })
             } else {
-                updateMemberTraitsAsync(
+                methodsMap[!subscriptionsTypesData || !subscriptionsTypesData.length ? 'create' : 'update'](
                     props.profile.handle,
                     [{
                         categoryName: 'Subscription',
diff --git a/src/libs/core/lib/profile/profile-functions/index.ts b/src/libs/core/lib/profile/profile-functions/index.ts
index 2278bfb47..7db6438ec 100644
--- a/src/libs/core/lib/profile/profile-functions/index.ts
+++ b/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'
diff --git a/src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts b/src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts
index 664f2b129..cbee64597 100644
--- a/src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts
+++ b/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)
+}
diff --git a/src/libs/core/lib/profile/profile-functions/profile.functions.ts b/src/libs/core/lib/profile/profile-functions/profile.functions.ts
index 70f3e8b73..b6c074568 100644
--- a/src/libs/core/lib/profile/profile-functions/profile.functions.ts
+++ b/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)
+}