MP-216 init

Author: kkartunov

src/apps/accounts/src/settings/tabs/account/AccountTab.tsx

@@ -5,6 +5,7 @@ import { UserProfile, UserTraits } from '~/libs/core'
 import { AccountRole } from './account-role'
 import { SecuritySection } from './security'
 import { UserAndPassword } from './user-and-pass'
+import { MemberAddress } from './address'
 import styles from './AccountTab.module.scss'
 
 interface AccountTabProps {
@@ -20,6 +21,8 @@ const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
 
         <UserAndPassword profile={props.profile} memberTraits={props.memberTraits} />
 
+        <MemberAddress profile={props.profile} />
+
         <SecuritySection profile={props.profile} />
     </div>
 )

src/apps/accounts/src/settings/tabs/account/address/MemberAddress.module.scss

@@ -0,0 +1,19 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    margin: $sp-8 0;
+
+    .content {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        margin-bottom: 0;
+
+        @include ltelg {
+            grid-template-columns: 1fr;
+        }
+
+        >p {
+            max-width: 380px;
+        }
+    }
+}

src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx

@@ -0,0 +1,43 @@
+import { Dispatch, FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import {
+    Collapsible,
+} from '~/libs/ui'
+import {
+    UserProfile,
+} from '~/libs/core'
+
+import styles from './MemberAddress.module.scss'
+
+interface MemberAddressProps {
+    profile: UserProfile
+}
+
+const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
+    const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
+        country: props.profile.homeCountryCode || props.profile.competitionCountryCode,
+        ...props.profile.addresses ? props.profile.addresses[0] : {},
+    })
+
+    console.log('formValues', formValues)
+
+    return (
+        <Collapsible
+            header={<h3>Address</h3>}
+            containerClass={styles.container}
+            contentClass={styles.content}
+        >
+            <p>
+                By keeping this information up to date we may surprise you with a cool T-shirt.
+                Sharing your contact details will never result in robocalls about health insurance plans or junk mail.
+            </p>
+
+            <div className={styles.formWrap}>
+                
+            </div>
+        </Collapsible>
+    )
+}
+
+export default MemberAddress

src/apps/accounts/src/settings/tabs/account/address/index.ts

@@ -0,0 +1 @@
+export { default as MemberAddress } from './MemberAddress'

src/libs/core/lib/profile/user-profile.model.ts

@@ -1,6 +1,13 @@
 export type TC_TRACKS = 'DEVELOP' | 'DESIGN' | 'DATA_SCIENCE'
 
 export interface UserProfile {
+    addresses?: Array<{
+        city?: string
+        stateCode?: string
+        streetAddr1?: string
+        streetAddr2?: string
+        zip?: string
+    }>
     competitionCountryCode: string
     createdAt: number
     description: string