MP-216 address form

Author: kkartunov

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

@@ -15,5 +15,13 @@
         >p {
             max-width: 380px;
         }
+
+        .form {
+            .formCTAs {
+                margin-top: $sp-4;
+                padding-top: $sp-4;
+                border-top: 2px solid $black-10;
+            }
+        }
     }
 }

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

@@ -1,10 +1,15 @@
-import { Dispatch, FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
+import { bind, trim } from 'lodash'
+import classNames from 'classnames'
 
 import {
-    Collapsible,
+    Button,
+    Collapsible, InputSelect, InputText,
 } from '~/libs/ui'
 import {
+    CountryLookup,
+    useCountryLookup,
     UserProfile,
 } from '~/libs/core'
 
@@ -15,12 +20,50 @@ interface MemberAddressProps {
 }
 
 const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
+    const countryLookup: CountryLookup[] | undefined
+        = useCountryLookup()
+
     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)
+    const [formErrors, setFormErrors]: [
+        { [key: string]: string },
+        Dispatch<SetStateAction<{ [key: string]: string }>>
+    ]
+        = useState<{ [key: string]: string }>({})
+
+    const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    function handleFormValueChange(key: string, event: React.ChangeEvent<HTMLInputElement>): void {
+        const oldFormValues = { ...formValues }
+
+        setFormValues({
+            ...oldFormValues,
+            [key]: event.target.value,
+        })
+        setIsFormChanged(true)
+    }
+
+    function handleFormAction(): void {
+        if (!trim(formValues.city)) {
+            setFormErrors({ city: 'Please select a city' })
+            return
+        }
+
+        if (!formValues.country) {
+            setFormErrors({ country: 'Please select a country' })
+            return
+        }
+
+        setIsSaving(true)
+
+    }
 
     return (
         <Collapsible
@@ -33,9 +76,90 @@ const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
                 Sharing your contact details will never result in robocalls about health insurance plans or junk mail.
             </p>
 
-            <div className={styles.formWrap}>
-                
-            </div>
+            <form
+                className={classNames(styles.formWrap)}
+            >
+                <div className={styles.form}>
+                    <InputText
+                        name='address'
+                        label='Address'
+                        error={formErrors.streetAddr1}
+                        placeholder='Your address'
+                        dirty
+                        tabIndex={0}
+                        type='text'
+                        onChange={bind(handleFormValueChange, this, 'address')}
+                        value={formValues.streetAddr1}
+                    />
+                    <InputText
+                        name='address2'
+                        label='Address 2'
+                        error={formErrors.streetAddr2}
+                        placeholder='Your address continued'
+                        dirty
+                        tabIndex={0}
+                        type='text'
+                        onChange={bind(handleFormValueChange, this, 'address2')}
+                        value={formValues.streetAddr2}
+                    />
+                    <InputText
+                        name='city'
+                        label='City *'
+                        error={formErrors.city}
+                        placeholder='Which city do you live in?'
+                        dirty
+                        tabIndex={0}
+                        type='text'
+                        onChange={bind(handleFormValueChange, this, 'city')}
+                        value={formValues.city}
+                    />
+                    <InputText
+                        name='state'
+                        label='State'
+                        error={formErrors.state}
+                        placeholder='State'
+                        dirty
+                        tabIndex={0}
+                        type='text'
+                        onChange={bind(handleFormValueChange, this, 'state')}
+                        value={formValues.state}
+                    />
+                    <InputText
+                        name='zip'
+                        label='Zip/Postal Code'
+                        error={formErrors.zip}
+                        placeholder='Your Zip or Postal Code'
+                        dirty
+                        tabIndex={0}
+                        type='text'
+                        onChange={bind(handleFormValueChange, this, 'zip')}
+                        value={formValues.zip}
+                    />
+                    <InputSelect
+                        options={(countryLookup || []).map((cl: CountryLookup) => ({
+                            label: cl.country,
+                            value: cl.countryCode,
+                        }))}
+                        value={formValues.country}
+                        onChange={bind(handleFormValueChange, this, 'country')}
+                        name='country'
+                        label='Country *'
+                        error={formErrors.country}
+                        placeholder='Select a Country'
+                        dirty
+                    />
+
+                    <div className={styles.formCTAs}>
+                        <Button
+                            secondary
+                            size='lg'
+                            label='Save Changes'
+                            onClick={handleFormAction}
+                            disabled={isSaving || !isFormChanged}
+                        />
+                    </div>
+                </div>
+            </form>
         </Collapsible>
     )
 }

src/libs/core/lib/profile/data-providers/index.ts

@@ -10,3 +10,4 @@ export * from './useMemberMFAStatus'
 export * from './useDiceIdConnection'
 export * from './useMemberTraits'
 export * from './useMemberDevicesLookup'
+export * from './useCountryLookup'

src/libs/core/lib/profile/data-providers/useCountryLookup.ts

@@ -0,0 +1,10 @@
+import { SWRResponse } from 'swr'
+import useSWRImmutable from 'swr/immutable'
+
+import { CountryLookup, countryLookupURL } from '~/libs/core'
+
+export function useCountryLookup(): CountryLookup[] | undefined {
+    const { data }: SWRResponse = useSWRImmutable(countryLookupURL)
+
+    return data ? data.result?.content : undefined
+}