feat(user): implement editing account

src/components/Account/Account.test.tsx

@@ -14,7 +14,14 @@ describe('<Account>', () => {
       currency: 'Euro',
       lastUserIp: 'temp',
     };
-    const { container } = render(<Account customer={customer} update={(customer) => console.info(customer)} />);
+    const { container } = render(
+      <Account
+        customer={customer}
+        onUpdateEmailSubmit={(values) => console.info(values)}
+        onUpdateInfoSubmit={(values) => console.info(values)}
+        onDeleteAccountClick={() => null}
+      />,
+    );
 
     // todo
     expect(container).toMatchSnapshot();

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<string, string>) => void;
+  onUpdateInfoSubmit: (data: Record<string, string>) => void;
   panelClassName?: string;
   panelHeaderClassName?: string;
   onDeleteAccountClick: () => void;
 };
 
 type Editing = 'none' | 'account' | 'password' | 'info';
+type FormValues = Record<string, string>;
 
-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<Editing>('none');
 
+  const handleSubmit = (values: FormValues) => {
+    switch (editing) {
+      case 'account':
+        return onUpdateEmailSubmit(values);
+      case 'info':
+        return onUpdateInfoSubmit(values);
+      default:
+        return;
+    }
+  };
+
   return (
-    <Form initialValues={{ test: 'test' }} onSubmit={(values) => update(values as Customer)}>
+    <Form initialValues={customer} onSubmit={handleSubmit} editing={editing !== 'none'}>
       {({ values, onChange, handleSubmit }) => (
         <>
           <div className={panelClassName}>
@@ -35,7 +55,7 @@ const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panel
               {editing === 'account' && (
                 <>
                   <strong>{t('account.confirm_password')}</strong>
-                  <input name="emailConfirm" value={values.emailConfirm} onChange={onChange} />
+                  <input name="confirmationPassword" value={values.confirmationPassword} onChange={onChange} />
                 </>
               )}
               <div className={styles.controls}>
@@ -68,9 +88,9 @@ const Account = ({ customer, update, onDeleteAccountClick, panelClassName, panel
             <div>
               <div className={styles.flexBox}>
                 <strong>{t('account.firstname')}</strong>
-                {editing === 'info' ? <input name="firstName" value={values.firstName} /> : <p>{customer.firstName}</p>}
+                {editing === 'info' ? <input name="firstName" value={values.firstName} onChange={onChange} /> : <p>{customer.firstName}</p>}
                 <strong>{t('account.lastname')}</strong>
-                {editing === 'info' ? <input name="lastName" value={values.lastName} /> : <p>{customer.lastName}</p>}
+                {editing === 'info' ? <input name="lastName" value={values.lastName} onChange={onChange} /> : <p>{customer.lastName}</p>}
                 <div className={styles.controls}>
                   {editing === 'info' ? (
                     <>

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

@@ -2,123 +2,121 @@
 
 exports[`<Account> renders and matches snapshot 1`] = `
 <div>
-  <form>
+  <div>
     <div>
-      <div>
-        <h3>
-          account.email
-        </h3>
+      <h3>
+        account.email
+      </h3>
+    </div>
+    <div
+      class="flexBox"
+    >
+      <strong>
+        account.email
+      </strong>
+      <p>
+        todo@test.nl
+      </p>
+      <div
+        class="controls"
+      >
+        <button
+          class="button default outlined"
+        >
+          <span>
+            account.edit_account
+          </span>
+        </button>
       </div>
+    </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>
       <div
         class="flexBox"
       >
         <strong>
-          account.email
+          account.firstname
         </strong>
-        <p>
-          todo@test.nl
-        </p>
+        <p />
+        <strong>
+          account.lastname
+        </strong>
+        <p />
         <div
           class="controls"
         >
           <button
             class="button default outlined"
           >
             <span>
-              account.edit_account
+              account.edit_information
             </span>
           </button>
         </div>
       </div>
     </div>
+  </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>
+      <h3>
+        Terms & tracking
+      </h3>
     </div>
     <div>
-      <div>
-        <h3>
-          account.about_you
-        </h3>
-      </div>
-      <div>
-        <div
-          class="flexBox"
-        >
-          <strong>
-            account.firstname
-          </strong>
-          <p />
+      <label
+        class="checkbox"
+      >
+        <input
+          id="terms1"
+          name="terms 1"
+          type="checkbox"
+          value="Bike"
+        />
+        <p>
+          I accept the 
           <strong>
-            account.lastname
+            Terms of Conditions
           </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>
+           of 
+          &lt;platform name&gt;
+        </p>
+      </label>
+      <button
+        class="button default outlined"
+      >
+        <span>
+          account.update_consents
+        </span>
+      </button>
     </div>
-  </form>
+  </div>
 </div>
 `;

src/components/Form/Form.tsx

@@ -1,22 +1,19 @@
 import React, { useState } from 'react';
 
-// import styles from './Form.module.scss';
-
-type FormValues = Record<string, string>;
-
 type Return = {
   values: FormValues;
-  onChange: (event: React.FormEvent<HTMLInputElement>) => void;
-  handleSubmit: () => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => 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<FormValues>(initialValues);
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -29,6 +26,10 @@ const Form = ({ initialValues, children, onSubmit }: Props): JSX.Element => {
     onSubmit(values);
   };
 
+  if (!editing) {
+    return children({ values });
+  }
+
   return <form onSubmit={handleSubmit}>{children({ values, onChange, handleSubmit })}</form>;
 };
 

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';