feat(user): add user screen with account and payment

.commitlintrc.js

@@ -9,6 +9,7 @@ module.exports = {
         'videodetail',
         'series',
         'search',
+        'user',
         'watchhistory',
         'favorites',
         'analytics',

src/components/Account/Account.module.scss

@@ -0,0 +1,11 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  > input {
+    margin-right: 10px;
+  }
+}

src/components/Account/Account.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Account from './Account';
+
+describe('<Account>', () => {
+  test('renders and matches snapshot', () => {
+    const account = { email: '[email protected]' } as Account;
+    const { container } = render(<Account account={account} update={(account) => console.info(account)} />);
+
+    // todo
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Account/Account.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from '../../components/Button/Button';
+
+import styles from './Account.module.scss';
+
+type Props = {
+  account: Account;
+  update: (account: Account) => void;
+  panelClassName?: string;
+  panelHeaderClassName?: string;
+};
+
+const Account = ({ account, update, panelClassName, panelHeaderClassName }: Props): JSX.Element => {
+  const { t } = useTranslation('user');
+
+  return (
+    <>
+      <div className={panelClassName}>
+        <div className={panelHeaderClassName}>
+          <h3>{t('account.email')}</h3>
+        </div>
+        <div>
+          <strong>{t('account.email')}</strong>
+          <p>{account.email}</p>
+          <Button label={t('account.edit_account')} onClick={() => update(account)} />
+        </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>{account.firstname}</p>
+          <strong>{t('account.lastname')}</strong>
+          <p>{account.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>
+    </>
+  );
+};
+
+export default Account;

src/components/Account/__snapshots__/Account.test.tsx.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Account> renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <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"
+      >
+        <span>
+          account.edit_information
+        </span>
+      </button>
+    </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>
+`;

src/components/Payment/Payment.module.scss

@@ -0,0 +1,38 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+
+.infoBox {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: variables.$base-spacing;
+  padding: variables.$base-spacing / 2 variables.$base-spacing;
+
+  font-size: 14px;
+  line-height: 18px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
+  background: rgba(61, 59, 59, 0.08);
+  border-radius: 4px;
+  > strong {
+    line-height: 16px;
+    letter-spacing: 0.25px;
+  }
+}
+
+.price {
+  font-size: 14px;
+  line-height: 18px;
+  > strong {
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 26px;
+  }
+}
+
+.cardDetails {
+  display: flex;
+}
+
+.expiryDate {
+  width: 250px;
+}

src/components/Payment/Payment.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Payment from './Payment';
+
+describe('<Payment>', () => {
+  test('renders and matches snapshot', () => {
+    const subscription = {} as Subscription;
+
+    const { container } = render(<Payment subscription={subscription} update={(subscription) => console.info(subscription)} />);
+
+    // todo
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Payment/Payment.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from '../Button/Button';
+
+import styles from './Payment.module.scss';
+
+type Props = {
+  subscription: Subscription;
+  update: (subscription: Subscription) => void;
+  panelClassName?: string;
+  panelHeaderClassName?: string;
+};
+
+const Payment = ({ subscription, update, panelClassName, panelHeaderClassName }: Props): JSX.Element => {
+  const { t } = useTranslation('user');
+  const showAllTransactions = () => console.info('show all');
+
+  return (
+    <>
+      <div className={panelClassName}>
+        <div className={panelHeaderClassName}>
+          <h3>{t('payment.subscription_details')}</h3>
+        </div>
+        <div className={styles.infoBox}>
+          <p>
+            <strong>{t('payment.monthly_subscription')}</strong> <br />
+            {t('payment.next_billing_date_on')}
+            {'<date>'}
+          </p>
+          <p className={styles.price}>
+            <strong>{'€ 14.76'}</strong>
+            {'/'}
+            {t('payment.month')}
+          </p>
+        </div>
+        <Button label={t('payment.edit_subscription')} onClick={() => update} />
+      </div>
+      <div className={panelClassName}>
+        <div className={panelHeaderClassName}>
+          <h3>{t('payment.payment_method')}</h3>
+        </div>
+        <div>
+          <strong>{t('payment.card_number')}</strong>
+          <p>xxxx xxxx xxxx 3456</p>
+          <div className={styles.cardDetails}>
+            <div className={styles.expiryDate}>
+              <strong>{t('payment.expiry_date')}</strong>
+              <p>03/2030</p>
+            </div>
+            <div>
+              <strong>{t('payment.cvc_cvv')}</strong>
+              <p>******</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={panelClassName}>
+        <div className={panelHeaderClassName}>
+          <h3>{t('payment.transactions')}</h3>
+        </div>
+        <div className={styles.infoBox}>
+          <p>
+            <strong>{t('payment.monthly_subscription')}</strong> <br />
+            {t('payment.price_payed_with_card')}
+          </p>
+          <p>
+            {'<Invoice code>'}
+            <br />
+            {'<Date>'}
+          </p>
+        </div>
+        <p>{t('payment.more_transactions', { amount: 4 })}</p>
+        <Button label="Show all" onClick={() => showAllTransactions()} />
+      </div>
+    </>
+  );
+};
+
+export default Payment;