From e22de8f8baf5bdf0ba0fa9957185f0d5aaf9c79d Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Tue, 20 Jul 2021 17:30:24 +0200 Subject: [PATCH] feat(user): implement editing account --- src/components/Account/Account.test.tsx | 9 +- src/components/Account/Account.tsx | 32 ++- .../__snapshots__/Account.test.tsx.snap | 184 +++++++++--------- src/components/Form/Form.module.scss | 3 - src/components/Form/Form.tsx | 15 +- src/components/Payment/Payment.test.tsx | 1 + src/containers/Customer/Customer.ts | 28 --- ...omer.test.ts => CustomerContainer.test.ts} | 0 src/containers/Customer/CustomerContainer.ts | 38 ++++ src/screens/User/User.tsx | 17 +- src/services/account.service.ts | 6 +- types/account.d.ts | 9 + types/general.d.ts | 1 + 13 files changed, 199 insertions(+), 144 deletions(-) delete mode 100644 src/components/Form/Form.module.scss delete mode 100644 src/containers/Customer/Customer.ts rename src/containers/Customer/{Customer.test.ts => CustomerContainer.test.ts} (100%) create mode 100644 src/containers/Customer/CustomerContainer.ts create mode 100644 types/general.d.ts diff --git a/src/components/Account/Account.test.tsx b/src/components/Account/Account.test.tsx index d09cfc816..ed1f514ed 100644 --- a/src/components/Account/Account.test.tsx +++ b/src/components/Account/Account.test.tsx @@ -14,7 +14,14 @@ describe('', () => { currency: 'Euro', lastUserIp: 'temp', }; - const { container } = render( console.info(customer)} />); + const { container } = render( + console.info(values)} + onUpdateInfoSubmit={(values) => console.info(values)} + onDeleteAccountClick={() => null} + />, + ); // todo expect(container).toMatchSnapshot(); diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx index 519bd12cc..2b7debf3c 100644 --- a/src/components/Account/Account.tsx +++ b/src/components/Account/Account.tsx @@ -9,20 +9,40 @@ import styles from './Account.module.scss'; type Props = { customer: Customer; - update: (customer: Customer) => void; + onUpdateEmailSubmit: (data: Record) => void; + onUpdateInfoSubmit: (data: Record) => void; panelClassName?: string; panelHeaderClassName?: string; onDeleteAccountClick: () => void; }; type Editing = 'none' | 'account' | 'password' | 'info'; +type FormValues = Record; -const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panelHeaderClassName }: Props): JSX.Element => { +const Account = ({ + customer, + panelClassName, + panelHeaderClassName, + onUpdateEmailSubmit, + onUpdateInfoSubmit, + onDeleteAccountClick, +}: Props): JSX.Element => { const { t } = useTranslation('user'); const [editing, setEditing] = useState('none'); + const handleSubmit = (values: FormValues) => { + switch (editing) { + case 'account': + return onUpdateEmailSubmit(values); + case 'info': + return onUpdateInfoSubmit(values); + default: + return; + } + }; + return ( -
update(values as Customer)}> + {({ values, onChange, handleSubmit }) => ( <>
@@ -35,7 +55,7 @@ const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panel {editing === 'account' && ( <> {t('account.confirm_password')} - + )}
@@ -68,9 +88,9 @@ const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panel
{t('account.firstname')} - {editing === 'info' ? :

{customer.firstName}

} + {editing === 'info' ? :

{customer.firstName}

} {t('account.lastname')} - {editing === 'info' ? :

{customer.lastName}

} + {editing === 'info' ? :

{customer.lastName}

}
{editing === 'info' ? ( <> diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap index 1f66c037f..4ab19c682 100644 --- a/src/components/Account/__snapshots__/Account.test.tsx.snap +++ b/src/components/Account/__snapshots__/Account.test.tsx.snap @@ -2,22 +2,74 @@ exports[` renders and matches snapshot 1`] = `
- +
-
-

- account.email -

+

+ account.email +

+
+
+ + account.email + +

+ todo@test.nl +

+
+
+
+
+
+
+

+ account.security +

+
+
+ + account.password + +

+ **************** +

+ +
+
+
+
+

+ account.about_you +

+
+
- account.email + account.firstname -

- todo@test.nl -

+

+ + account.lastname + +

@@ -25,100 +77,46 @@ exports[` renders and matches snapshot 1`] = ` class="button default outlined" > - account.edit_account + account.edit_information
+
+
-
-

- account.security -

-
-
- - account.password - -

- **************** -

- -
+

+ Terms & tracking +

-
-

- account.about_you -

-
-
-
- - account.firstname - -

+

+ I accept the - account.lastname + Terms of Conditions -

-

- -
-
-
-
-
-
-

- Terms & tracking -

-
-
- - -
+ of + <platform name> +

+ +
- +
`; diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss deleted file mode 100644 index e5c89e02f..000000000 --- a/src/components/Form/Form.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '../../styles/variables'; -@use '../../styles/theme'; -@use '../../styles/mixins/responsive'; diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index fd83a974a..2dbfb3d7d 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -1,22 +1,19 @@ import React, { useState } from 'react'; -// import styles from './Form.module.scss'; - -type FormValues = Record; - type Return = { values: FormValues; - onChange: (event: React.FormEvent) => void; - handleSubmit: () => void; + onChange?: (event: React.FormEvent) => void; + handleSubmit?: () => void; }; type Props = { initialValues: FormValues; + editing?: boolean; children: ({ values, onChange }: Return) => JSX.Element; onSubmit: (values: FormValues) => void; }; -const Form = ({ initialValues, children, onSubmit }: Props): JSX.Element => { +const Form = ({ initialValues, editing = true, children, onSubmit }: Props): JSX.Element => { const [values, setValues] = useState(initialValues); const onChange = (event: React.FormEvent) => { @@ -29,6 +26,10 @@ const Form = ({ initialValues, children, onSubmit }: Props): JSX.Element => { onSubmit(values); }; + if (!editing) { + return children({ values }); + } + return
{children({ values, onChange, handleSubmit })}
; }; diff --git a/src/components/Payment/Payment.test.tsx b/src/components/Payment/Payment.test.tsx index 215e2d18f..ba0ad3674 100644 --- a/src/components/Payment/Payment.test.tsx +++ b/src/components/Payment/Payment.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; +import type { Subscription } from 'types/subscription'; import Payment from './Payment'; diff --git a/src/containers/Customer/Customer.ts b/src/containers/Customer/Customer.ts deleted file mode 100644 index f60abb9bc..000000000 --- a/src/containers/Customer/Customer.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { Customer } from 'types/account'; - -type ChildrenParams = { - customer: Customer; - update: () => void; -}; - -type Props = { - children: (data: ChildrenParams) => JSX.Element; -}; - -const Account = ({ children }: Props): JSX.Element => { - const customer: Customer = { - id: '1', - email: 'todo@test.nl', - locale: 'en_en', - country: 'England', - currency: 'Euro', - lastUserIp: 'temp', - firstName: 'Henk', - lastName: 'Peterson', - }; - const update = (customer: Customer) => console.info('update', customer); - - return children({ customer, update } as ChildrenParams); -}; - -export default Account; diff --git a/src/containers/Customer/Customer.test.ts b/src/containers/Customer/CustomerContainer.test.ts similarity index 100% rename from src/containers/Customer/Customer.test.ts rename to src/containers/Customer/CustomerContainer.test.ts diff --git a/src/containers/Customer/CustomerContainer.ts b/src/containers/Customer/CustomerContainer.ts new file mode 100644 index 000000000..9ecbbd449 --- /dev/null +++ b/src/containers/Customer/CustomerContainer.ts @@ -0,0 +1,38 @@ +import type { Customer } from 'types/account'; + +import { ConfigStore } from '../../stores/ConfigStore'; +import { AccountStore } from '../../stores/AccountStore'; +import { updateCustomer } from '../../services/account.service'; + +type ChildrenParams = { + customer: Customer; + onUpdateEmailSubmit: (values: FormValues) => void; + onUpdateInfoSubmit: (values: FormValues) => void; +}; + +type Props = { + children: (data: ChildrenParams) => JSX.Element; +}; + +const CustomerContainer = ({ children }: Props): JSX.Element => { + const customer = AccountStore.useState((state) => state.user); + const auth = AccountStore.useState((state) => state.auth); + const { + config: { cleengSandbox }, + } = ConfigStore.getRawState(); + + const onUpdateEmailSubmit = (values: FormValues) => { + if (auth?.jwt) { + updateCustomer({ id: values.id, email: values.email, confirmationPassword: values.confirmationPassword }, cleengSandbox, auth.jwt); + } + }; + const onUpdateInfoSubmit = (values: FormValues) => { + if (auth?.jwt) { + updateCustomer({ id: values.id, firstName: values.firstName, lastName: values.lastName }, cleengSandbox, auth.jwt); + } + }; + + return children({ customer, onUpdateEmailSubmit, onUpdateInfoSubmit } as ChildrenParams); +}; + +export default CustomerContainer; diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx index 0529ac279..d70d2268b 100644 --- a/src/screens/User/User.tsx +++ b/src/screens/User/User.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import Customer from '../../containers/Customer/Customer'; +import CustomerContainer from '../../containers/Customer/CustomerContainer'; import SubscriptionContainer from '../../containers/Subscription/Subscription'; import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint'; import Button from '../../components/Button/Button'; @@ -12,6 +12,7 @@ import AccountCircle from '../../icons/AccountCircle'; import Favorite from '../../icons/Favorite'; import BalanceWallet from '../../icons/BalanceWallet'; import Exit from '../../icons/Exit'; +import { AccountStore } from '../../stores/AccountStore'; import styles from './User.module.scss'; @@ -19,6 +20,11 @@ const User = (): JSX.Element => { const { t } = useTranslation('user'); const breakpoint = useBreakpoint(); const isLargeScreen = breakpoint >= Breakpoint.md; + const customer = AccountStore.useState((state) => state.user); + + if (!customer) { + return
Open login panel?
; + } return (
@@ -45,17 +51,18 @@ const User = (): JSX.Element => {
- - {({ customer, update }) => ( + + {({ customer, onUpdateEmailSubmit, onUpdateInfoSubmit }) => ( console.error('Sure?')} /> )} - +
Favorites
diff --git a/src/services/account.service.ts b/src/services/account.service.ts index b583721c2..0546b4bce 100644 --- a/src/services/account.service.ts +++ b/src/services/account.service.ts @@ -1,4 +1,4 @@ -import type { ChangePassword, GetCustomer, Login, Register, ResetPassword } from '../../types/account'; +import type { ChangePassword, GetCustomer, Login, Register, ResetPassword, UpdateCustomer } from '../../types/account'; import { post, put, patch, get } from './cleeng.service'; @@ -18,6 +18,10 @@ export const changePassword: ChangePassword = async (payload, sandbox) => { return patch(sandbox, '/customers/passwords', JSON.stringify(payload)); }; +export const updateCustomer: UpdateCustomer = async (payload, sandbox, jwt) => { + return patch(sandbox, `/customers/${payload.id}`, JSON.stringify(payload), jwt); +}; + export const getCustomer: GetCustomer = async (payload, sandbox, jwt) => { return get(sandbox, `/customers/${payload.customerId}`, jwt); }; diff --git a/types/account.d.ts b/types/account.d.ts index 44afd34a7..8369da022 100644 --- a/types/account.d.ts +++ b/types/account.d.ts @@ -48,6 +48,14 @@ export type GetCustomerPayload = { customerId: string; }; +export type UpdateCustomerPayload = { + id?: string; + email?: string; + confirmationPassword?: string; + firstName?: string; + lastName?: string; +}; + export type Customer = { id: string; email: string; @@ -66,3 +74,4 @@ type Register = CleengRequest; type ResetPassword = CleengRequest>; type ChangePassword = CleengRequest>; type GetCustomer = CleengAuthRequest; +type UpdateCustomer = CleengAuthRequest; diff --git a/types/general.d.ts b/types/general.d.ts new file mode 100644 index 000000000..aafebb521 --- /dev/null +++ b/types/general.d.ts @@ -0,0 +1 @@ +type FormValues = Record;