Skip to content

Commit

Permalink
feat(user): add form component and implement to user screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@royschut
royschut committed Jul 20, 2021
1 parent 4f6a203 commit d270d93
Show file tree
Hide file tree
Showing 10 changed files with 295 additions and 144 deletions.
16 changes: 16 additions & 0 deletions src/components/Account/Account.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@
@use '../../styles/theme';
@use '../../styles/mixins/responsive';

button {
margin-right: variables.$base-spacing;
}

.flexBox {
display: flex;
flex-direction: column;
> * {
margin-bottom: variables.$base-spacing / 2;
}
}

.controls {
margin-top: variables.$base-spacing;
}

.checkbox {
display: flex;
align-items: center;
Expand Down
136 changes: 86 additions & 50 deletions src/components/Account/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import type { Customer } from 'types/account';

import Button from '../../components/Button/Button';
import Form from '../Form/Form';

import styles from './Account.module.scss';

Expand All @@ -11,60 +12,95 @@ type Props = {
update: (customer: Customer) => void;
panelClassName?: string;
panelHeaderClassName?: string;
onDeleteAccountClick: () => void;
};

const Account = ({ customer, update, panelClassName, panelHeaderClassName }: Props): JSX.Element => {
type Editing = 'none' | 'account' | 'password' | 'info';

const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panelHeaderClassName }: Props): JSX.Element => {
const { t } = useTranslation('user');
const [editing, setEditing] = useState<Editing>('none');

return (
<>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.email')}</h3>
</div>
<div>
<strong>{t('account.email')}</strong>
<p>{customer.email}</p>
<Button label={t('account.edit_account')} onClick={() => update(customer)} />
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.security')}</h3>
</div>
<div>
<strong>{t('account.password')}</strong>
<p>****************</p>
<Button label={t('account.edit_password')} />
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.about_you')}</h3>
</div>
<div>
<strong>{t('account.firstname')}</strong>
<p>{customer.firstName}</p>
<strong>{t('account.lastname')}</strong>
<p>{customer.lastName}</p>
<Button label={t('account.edit_information')} />
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{'Terms & tracking'}</h3>
</div>
<div>
<label className={styles.checkbox}>
<input type="checkbox" id="terms1" name="terms 1" value="Bike" />
<p>
I accept the <strong>Terms of Conditions</strong> of {'<platform name>'}
</p>
</label>
<Button label={t('account.update_consents')} />
</div>
</div>
</>
<Form initialValues={{ test: 'test' }} onSubmit={(values) => update(values as Customer)}>
{({ values, onChange, handleSubmit }) => (
<>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.email')}</h3>
</div>
<div className={styles.flexBox}>
<strong>{t('account.email')}</strong>
{editing === 'account' ? <input name="email" value={values.email} onChange={onChange} /> : <p>{customer.email}</p>}
{editing === 'account' && (
<>
<strong>{t('account.confirm_password')}</strong>
<input name="emailConfirm" value={values.emailConfirm} onChange={onChange} />
</>
)}
<div className={styles.controls}>
{editing === 'account' ? (
<>
<Button label={t('account.save')} onClick={handleSubmit} />
<Button variant="text" label={t('account.cancel')} onClick={() => setEditing('none')} />
<Button label={t('account.delete_account')} onClick={onDeleteAccountClick} />
</>
) : (
<Button label={t('account.edit_account')} onClick={() => setEditing('account')} />
)}
</div>
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.security')}</h3>
</div>
<div>
<strong>{t('account.password')}</strong>
<p>****************</p>
<Button label={t('account.edit_password')} onClick={() => setEditing('password')} />
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{t('account.about_you')}</h3>
</div>
<div>
<div className={styles.flexBox}>
<strong>{t('account.firstname')}</strong>
{editing === 'info' ? <input name="firstName" value={values.firstName} /> : <p>{customer.firstName}</p>}
<strong>{t('account.lastname')}</strong>
{editing === 'info' ? <input name="lastName" value={values.lastName} /> : <p>{customer.lastName}</p>}
<div className={styles.controls}>
{editing === 'info' ? (
<>
<Button label={t('account.save')} onClick={handleSubmit} />
<Button variant="text" label={t('account.cancel')} onClick={() => setEditing('none')} />
</>
) : (
<Button label={t('account.edit_information')} onClick={() => setEditing('info')} />
)}
</div>
</div>
</div>
</div>
<div className={panelClassName}>
<div className={panelHeaderClassName}>
<h3>{'Terms & tracking'}</h3>
</div>
<div>
<label className={styles.checkbox}>
<input type="checkbox" id="terms1" name="terms 1" value="Bike" />
<p>
I accept the <strong>Terms of Conditions</strong> of {'<platform name>'}
</p>
</label>
<Button label={t('account.update_consents')} />
</div>
</div>
</>
)}
</Form>
);
};

Expand Down
202 changes: 109 additions & 93 deletions src/components/Account/__snapshots__/Account.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,123 @@

exports[`<Account> renders and matches snapshot 1`] = `
<div>
<div>
<form>
<div>
<h3>
account.email
</h3>
</div>
<div>
<strong>
account.email
</strong>
<p>
[email protected]
</p>
<button
class="button default outlined"
>
<span>
account.edit_account
</span>
</button>
</div>
</div>
<div>
<div>
<h3>
account.security
</h3>
</div>
<div>
<strong>
account.password
</strong>
<p>
****************
</p>
<button
class="button default outlined"
>
<span>
account.edit_password
</span>
</button>
</div>
</div>
<div>
<div>
<h3>
account.about_you
</h3>
</div>
<div>
<strong>
account.firstname
</strong>
<p />
<strong>
account.lastname
</strong>
<p />
<button
class="button default outlined"
<div>
<h3>
account.email
</h3>
</div>
<div
class="flexBox"
>
<span>
account.edit_information
</span>
</button>
<strong>
account.email
</strong>
<p>
[email protected]
</p>
<div
class="controls"
>
<button
class="button default outlined"
>
<span>
account.edit_account
</span>
</button>
</div>
</div>
</div>
</div>
<div>
<div>
<h3>
Terms & tracking
</h3>
<div>
<h3>
account.security
</h3>
</div>
<div>
<strong>
account.password
</strong>
<p>
****************
</p>
<button
class="button default outlined"
>
<span>
account.edit_password
</span>
</button>
</div>
</div>
<div>
<label
class="checkbox"
>
<input
id="terms1"
name="terms 1"
type="checkbox"
value="Bike"
/>
<p>
I accept the
<div>
<h3>
account.about_you
</h3>
</div>
<div>
<div
class="flexBox"
>
<strong>
Terms of Conditions
account.firstname
</strong>
of
&lt;platform name&gt;
</p>
</label>
<button
class="button default outlined"
>
<span>
account.update_consents
</span>
</button>
<p />
<strong>
account.lastname
</strong>
<p />
<div
class="controls"
>
<button
class="button default outlined"
>
<span>
account.edit_information
</span>
</button>
</div>
</div>
</div>
</div>
<div>
<div>
<h3>
Terms & tracking
</h3>
</div>
<div>
<label
class="checkbox"
>
<input
id="terms1"
name="terms 1"
type="checkbox"
value="Bike"
/>
<p>
I accept the
<strong>
Terms of Conditions
</strong>
of
&lt;platform name&gt;
</p>
</label>
<button
class="button default outlined"
>
<span>
account.update_consents
</span>
</button>
</div>
</div>
</div>
</form>
</div>
`;
3 changes: 3 additions & 0 deletions src/components/Form/Form.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use '../../styles/variables';
@use '../../styles/theme';
@use '../../styles/mixins/responsive';
Loading

0 comments on commit d270d93

Please sign in to comment.