From 8400c41027199e0f740117511cf2a446332ac876 Mon Sep 17 00:00:00 2001
From: PraiseImmanuel <praiseimmanuel601@gmail.com>
Date: Fri, 20 Jan 2023 13:48:15 +0100
Subject: [PATCH 1/5] feat: implemented new account settings component

---
 .../pages/account_settings/AccountSettings.js |   9 +-
 .../account_settings/AccountSettingsNew.jsx   | 277 ++++++++++++++++++
 .../AccountSettingsNew.module.css             | 133 +++++++++
 3 files changed, 413 insertions(+), 6 deletions(-)
 create mode 100644 Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
 create mode 100644 Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css

diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js b/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js
index 3f539393..0e19346a 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js
@@ -1,4 +1,5 @@
-import AccountSet from "./AccountSet";
+// import AccountSet from "./AccountSet";
+import AccountSettingsNew from "./AccountSettingsNew";
 import { useState, useEffect } from "react";
 import Spinner from "components/spinner/Spinner";
 
@@ -20,11 +21,7 @@ const AccountSettings = () => {
         return <Spinner />;
     }
 
-    return (
-        <div>
-            <AccountSet details={memberdetails} />
-        </div>
-    );
+    return <AccountSettingsNew details={memberdetails} />;
 };
 
 export default AccountSettings;
diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
new file mode 100644
index 00000000..6110d169
--- /dev/null
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
@@ -0,0 +1,277 @@
+import React, { useState } from "react";
+import classes from "./AccountSettingsNew.module.css";
+// import SettingsTopNav from "./SettingsTopNav";
+// import LetteredAvatar from "react-lettered-avatar";
+// import { useEffect } from "react";
+import axios from "axios";
+// import TopBar from "pages/dashboard_profile/components/TopBar/TopBar";
+// import { useSelector } from "react-redux";
+import { toast, ToastContainer } from "react-toastify";
+
+const AccountSettingsNew = ({ details }) => {
+    //User Info
+    // const { user } = useSelector(state => state.user);
+
+    // const fullName = user.fullName;
+    // const userEmail = user.sub;
+    // const [countryDetails, setCountryDetails] = useState([]);
+
+    const [formField, setFormField] = useState({
+        first_name: details?.firstName,
+        last_name: details?.lastName,
+        email: details?.emailAddress,
+        phone_number: details?.phoneNumber,
+        address: details?.address,
+        city: "",
+        state: "",
+        country_of_residence: "",
+        nationality: "",
+        date_of_birth: details?.dateOfBirth,
+        username: ""
+    });
+
+    const post = {
+        "first_name": formField.first_name,
+        "last_name": formField.last_name,
+        "country_of_residence": Number(formField.country),
+        "date_of_birth": formField.dateOfBirth,
+        "current_job_title": formField.currentJobTitle,
+        "email_address": formField.email,
+        "username": formField.username,
+        "phone_number": formField.phone_number,
+        "city": formField.city,
+        "state": formField.state,
+        "address": formField.address
+    };
+    const updateInfo = async () => {
+        const token = localStorage.getItem("tokenHngKey");
+        try {
+            // eslint-disable-next-line no-unused-vars
+            const res = await axios.put(
+                `https://api.applyforme.hng.tech/api/v1/member/update`,
+                post,
+                {
+                    headers: {
+                        "Authorization": `Bearer ${token}`
+                    },
+                    params: { "id": details.id }
+                }
+            );
+            toast.success("Profile successfully updated");
+        } catch (err) {
+            console.log("error for update", err);
+            toast.error(err?.response.data.message);
+        }
+    };
+
+    console.log(updateInfo, setFormField);
+
+    // const submitForm = () => {
+    //     updateInfo();
+    // };
+
+    return (
+        <div className={classes.account_settings_container}>
+            <ToastContainer />
+            <div className={classes.body_container}>
+                <div className={classes.body_content}>
+                    <div className={classes.general_details}>
+                        <h2>General Details</h2>
+                        <p>Update your photo and personal detail here</p>
+                    </div>
+
+                    <div className={classes.details_settings}>
+                        <div className={classes.details_setting}>
+                            <h3 className={classes.settings_heading}>
+                                Personal Details
+                            </h3>
+                            <form
+                                onSubmit={e => e.preventDefault()}
+                                className={classes.settings_form}
+                            >
+                                <div className={classes.form_row}>
+                                    <div className={classes.form_control}>
+                                        <label htmlFor="first_name">
+                                            First Name
+                                        </label>
+                                        <input
+                                            onChange={event =>
+                                                setFormField({
+                                                    ...formField,
+                                                    first_name:
+                                                        event.target.value
+                                                })
+                                            }
+                                            value={formField?.first_name}
+                                            type="text"
+                                            name="first_name"
+                                            id="first_name"
+                                            placeholder="First Name"
+                                        />
+                                    </div>
+                                    <div className={classes.form_control}>
+                                        <label htmlFor="last_name">
+                                            Last Name
+                                        </label>
+                                        <input
+                                            onChange={event =>
+                                                setFormField({
+                                                    ...formField,
+                                                    last_name:
+                                                        event.target.value
+                                                })
+                                            }
+                                            value={formField.last_name}
+                                            type="text"
+                                            name="last_name"
+                                            id="last_name"
+                                            placeholder="Last Name"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className={classes.form_row}>
+                                    <div className={classes.form_control}>
+                                        <label htmlFor="email">Email</label>
+                                        <input
+                                            onChange={event =>
+                                                setFormField({
+                                                    ...formField,
+                                                    email: event.target.value
+                                                })
+                                            }
+                                            value={formField.email}
+                                            type="email"
+                                            readOnly
+                                            name="email"
+                                            id="email"
+                                            placeholder="Email Address"
+                                        />
+                                    </div>
+
+                                    <div className={classes.form_control}>
+                                        <label htmlFor="number">
+                                            Phone Number
+                                        </label>
+                                        <input
+                                            onChange={event =>
+                                                setFormField({
+                                                    ...formField,
+                                                    phone_number:
+                                                        event.target.value
+                                                })
+                                            }
+                                            value={formField.phone_number}
+                                            type="text"
+                                            name="number"
+                                            id="number"
+                                            placeholder="+234-567-890-00"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className={classes.form_row}>
+                                    <div className={classes.form_control}>
+                                        <label htmlFor="password">
+                                            Password
+                                        </label>
+
+                                        <input
+                                            onChange={event =>
+                                                setFormField({
+                                                    ...formField,
+                                                    new_password:
+                                                        event.target.value
+                                                })
+                                            }
+                                            value={formField.new_password}
+                                            type="password"
+                                        />
+                                    </div>
+                                    <button
+                                        className={
+                                            classes.update_personal_details
+                                        }
+                                    >
+                                        Update
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+
+                        <div className={classes.photo_and_plan_settings}>
+                            <h3 className={classes.settings_heading}>
+                                Your Photo
+                            </h3>
+
+                            <div className={classes.edit_photo}>
+                                <div className={classes.previous_photo}></div>
+                                <div className={classes.edit_photo_buttons}>
+                                    <h3 className={classes.settings_heading}>
+                                        Edit your photo
+                                    </h3>
+                                    <div className={classes.edit_buttons}>
+                                        <button>Delete</button>
+                                        <button>Update</button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className={classes.edit_plan_container}>
+                                <h4>Plan details</h4>
+                                <div className={classes.edit_plan}>
+                                    <div className={classes.current_plan}>
+                                        Basic Plan
+                                    </div>
+                                    <button className={classes.change_plan}>
+                                        change plan
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.membership_plan_container}>
+                        <h3 className={classes.settings_heading}>
+                            Membership and Billing
+                        </h3>
+                        <div className={classes.plan_details_container}>
+                            <div className={classes.plan_details}>
+                                <div className={classes.card_details}>
+                                    <div>
+                                        <img src="" alt="" />
+                                        <p>
+                                            ********<span>67789</span>
+                                        </p>
+                                    </div>
+                                    <p>
+                                        To remove this card add another card
+                                        first
+                                    </p>
+                                </div>
+                                <div className={classes.next_billing_date}>
+                                    <p>Next billing Date</p>
+                                    <h3 className={classes.settings_heading}>
+                                        Your Next Billing date is January 31,
+                                        2023
+                                    </h3>
+                                </div>
+                            </div>
+
+                            <button className={classes.preferred_card}>
+                                {" "}
+                                Preferred Card{" "}
+                            </button>
+
+                            <button className={classes.edit_billing_details}>
+                                edit billing details
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccountSettingsNew;
diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
new file mode 100644
index 00000000..3177f185
--- /dev/null
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
@@ -0,0 +1,133 @@
+.account_settings_container {
+    width: 100%;
+    background: #f3f3fb;
+}
+
+.body_container {
+    width: 85%;
+    min-width: clamp(50rem, 10vw, 59rem);
+}
+
+.body_container .body_content {
+    display: flex;
+    flex-direction: column;
+    margin-top: 5rem;
+    padding-left: 12.5rem;
+}
+
+.general_details > h2 {
+    color: #171b1d;
+    font-size: clamp(1.25rem, 8vw, 2rem);
+    margin-bottom: 0.25rem;
+}
+
+.general_details > p {
+    color: #52515b;
+    margin-bottom: 1rem;
+}
+
+.details_settings {
+    display: flex;
+    column-gap: 3rem;
+    width: 100%;
+}
+
+.details_setting,
+.photo_and_plan_settings,
+.membership_plan_container {
+    background: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 0.5rem;
+}
+
+.details_setting {
+    width: 60%;
+}
+
+.photo_and_plan_settings {
+    width: 40%;
+}
+
+.settings_heading {
+    border-bottom: 1px solid #cccccc;
+    color: #171b1d;
+    font-size: clamp(1rem, 9vw, 1.25rem);
+    font-weight: 500;
+    width: 100%;
+}
+
+.settings_form,
+.settings_heading,
+.edit_photo,
+.plan_details_container {
+    padding: 1rem;
+}
+
+.settings_form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form_row {
+    display: flex;
+}
+
+.form_control > label {
+    color: #171b1d;
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0 0 0.5rem;
+}
+
+.form_control > input {
+    border: 1px solid #999999;
+    border-radius: 0.4rem;
+    color: #999999;
+    font-size: 0.9rem;
+    padding: 0.4rem 0.7rem;
+    margin-bottom: 1rem;
+}
+
+.form_control:nth-child(2n),
+.update_personal_details {
+    margin-left: 2rem;
+}
+
+.form_control {
+    display: flex;
+    flex-direction: column;
+}
+
+.account_settings_container button {
+    background-color: transparent;
+    border: none;
+}
+
+.account_settings_container button:focus,
+.form_control > input {
+    outline: none;
+}
+
+.update_personal_details {
+    color: #202065;
+    font-weight: 500;
+    margin-top: 0.6rem;
+}
+
+.membership_plan_container {
+    margin-top: 3rem;
+}
+
+@media screen and (max-width: 1238px) {
+    .details_settings {
+        column-gap: 1.5rem;
+    }
+
+    .details_setting {
+        width: 70%;
+    }
+
+    .photo_and_plan_settings {
+        width: 30%;
+    }
+}

From 09520dc812972d3d8c370f4ae9b904b9368544b0 Mon Sep 17 00:00:00 2001
From: PraiseImmanuel <praiseimmanuel601@gmail.com>
Date: Sat, 21 Jan 2023 15:50:41 +0100
Subject: [PATCH 2/5] feat: finished desktop view for account settings page

---
 .../account_settings/AccountSettingsNew.jsx   |  63 +++++++---
 .../AccountSettingsNew.module.css             | 112 +++++++++++++++++-
 2 files changed, 152 insertions(+), 23 deletions(-)

diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
index 6110d169..174ca6c5 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 import classes from "./AccountSettingsNew.module.css";
 // import SettingsTopNav from "./SettingsTopNav";
-// import LetteredAvatar from "react-lettered-avatar";
+import LetteredAvatar from "react-lettered-avatar";
 // import { useEffect } from "react";
 import axios from "axios";
 // import TopBar from "pages/dashboard_profile/components/TopBar/TopBar";
-// import { useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
 
 const AccountSettingsNew = ({ details }) => {
     //User Info
-    // const { user } = useSelector(state => state.user);
+    const { user } = useSelector(state => state.user);
 
-    // const fullName = user.fullName;
+    const fullName = user.fullName;
     // const userEmail = user.sub;
     // const [countryDetails, setCountryDetails] = useState([]);
 
@@ -205,25 +205,44 @@ const AccountSettingsNew = ({ details }) => {
                             </h3>
 
                             <div className={classes.edit_photo}>
-                                <div className={classes.previous_photo}></div>
+                                <div className={classes.previous_photo}>
+                                    <LetteredAvatar
+                                        name={fullName}
+                                        backgroundColor={"#52515B"}
+                                    />
+                                </div>
                                 <div className={classes.edit_photo_buttons}>
-                                    <h3 className={classes.settings_heading}>
+                                    <h3
+                                        className={`${classes.settings_heading} ${classes.settings_heading_without_border}`}
+                                    >
                                         Edit your photo
                                     </h3>
                                     <div className={classes.edit_buttons}>
-                                        <button>Delete</button>
-                                        <button>Update</button>
+                                        <button
+                                            className={classes.edit_button_red}
+                                        >
+                                            Delete
+                                        </button>
+                                        <button
+                                            className={classes.edit_button_blue}
+                                        >
+                                            Update
+                                        </button>
                                     </div>
                                 </div>
                             </div>
 
                             <div className={classes.edit_plan_container}>
-                                <h4>Plan details</h4>
+                                <h4 className={classes.plan_details}>
+                                    Plan details
+                                </h4>
                                 <div className={classes.edit_plan}>
                                     <div className={classes.current_plan}>
                                         Basic Plan
                                     </div>
-                                    <button className={classes.change_plan}>
+                                    <button
+                                        className={`${classes.change_plan} ${classes.edit_button_blue}`}
+                                    >
                                         change plan
                                     </button>
                                 </div>
@@ -237,10 +256,13 @@ const AccountSettingsNew = ({ details }) => {
                         </h3>
                         <div className={classes.plan_details_container}>
                             <div className={classes.plan_details}>
-                                <div className={classes.card_details}>
-                                    <div>
-                                        <img src="" alt="" />
-                                        <p>
+                                <div className={classes.card_details_container}>
+                                    <div className={classes.card_details}>
+                                        <img
+                                            src="https://res.cloudinary.com/doiq3txf7/image/upload/v1674223425/Praise%20Files/mastercard-svg_itpbkk.svg"
+                                            alt=""
+                                        />
+                                        <p className={classes.card_number}>
                                             ********<span>67789</span>
                                         </p>
                                     </div>
@@ -251,19 +273,22 @@ const AccountSettingsNew = ({ details }) => {
                                 </div>
                                 <div className={classes.next_billing_date}>
                                     <p>Next billing Date</p>
-                                    <h3 className={classes.settings_heading}>
-                                        Your Next Billing date is January 31,
+                                    <h3
+                                        className={`${classes.settings_heading} ${classes.settings_heading_without_border}  ${classes.settings_heading_without_padding}`}
+                                    >
+                                        Your next billing date is January 31,
                                         2023
                                     </h3>
                                 </div>
                             </div>
 
                             <button className={classes.preferred_card}>
-                                {" "}
-                                Preferred Card{" "}
+                                Preferred Card
                             </button>
 
-                            <button className={classes.edit_billing_details}>
+                            <button
+                                className={`${classes.change_plan} ${classes.edit_button_blue}`}
+                            >
                                 edit billing details
                             </button>
                         </div>
diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
index 3177f185..eada38c3 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
@@ -11,7 +11,7 @@
 .body_container .body_content {
     display: flex;
     flex-direction: column;
-    margin-top: 5rem;
+    margin-top: 3rem;
     padding-left: 12.5rem;
 }
 
@@ -59,7 +59,8 @@
 .settings_form,
 .settings_heading,
 .edit_photo,
-.plan_details_container {
+.plan_details_container,
+.edit_plan_container {
     padding: 1rem;
 }
 
@@ -100,7 +101,7 @@
 
 .account_settings_container button {
     background-color: transparent;
-    border: none;
+    border: transparent;
 }
 
 .account_settings_container button:focus,
@@ -114,11 +115,108 @@
     margin-top: 0.6rem;
 }
 
+.edit_photo {
+    align-items: center;
+    border-bottom: 1px solid #cccccc;
+    display: flex;
+}
+
+.edit_photo_buttons {
+    display: flex;
+    flex-direction: column;
+}
+
+.edit_buttons {
+    padding: 0 1rem;
+}
+
+.edit_buttons > button {
+    margin-right: 1rem;
+}
+
+.edit_button_red {
+    color: #8d3434;
+}
+
+.edit_button_blue {
+    color: #202065;
+}
+
+.plan_details {
+    color: #737373;
+    font-size: 0.8rem;
+}
+
+.edit_plan {
+    display: flex;
+}
+
+.current_plan {
+    color: #171b1d;
+    font-size: 1.25rem;
+    text-transform: uppercase;
+}
+
+.change_plan {
+    margin-left: 2rem;
+}
+
+.settings_heading_without_border {
+    border: transparent;
+    padding-bottom: 0.8rem;
+}
+
+.settings_heading_without_padding {
+    padding: 0;
+}
+
 .membership_plan_container {
-    margin-top: 3rem;
+    margin: 3rem 0 5rem;
+}
+
+.plan_details_container {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+}
+
+.plan_details {
+    display: flex;
+    flex-direction: column;
+}
+
+.account_settings_container .preferred_card {
+    border: 1px solid #000000;
+    border-radius: 0.25rem;
+    padding: 0.35rem;
+    text-transform: uppercase;
+}
+
+.card_details {
+    align-items: center;
+    display: flex;
+    margin-bottom: 0.5rem;
+}
+
+.card_number {
+    margin-left: 1.5rem;
+}
+
+.card_number,
+.card_number > span {
+    font-size: 1.5rem;
+    color: #171b1d;
+}
+
+.next_billing_date {
+    margin-top: 1rem;
 }
 
 @media screen and (max-width: 1238px) {
+    .body_container {
+        width: 97%;
+    }
+
     .details_settings {
         column-gap: 1.5rem;
     }
@@ -131,3 +229,9 @@
         width: 30%;
     }
 }
+
+@media screen and (max-width: 999px) {
+    .body_container {
+        width: 97%;
+    }
+}

From 980eeeed10a2d78f1fc5782e4026aca3112500cf Mon Sep 17 00:00:00 2001
From: PraiseImmanuel <praiseimmanuel601@gmail.com>
Date: Sat, 21 Jan 2023 17:02:28 +0100
Subject: [PATCH 3/5] feat: finished mobile view for account settings page

---
 .../account_settings/AccountSettingsNew.jsx   |  6 +--
 .../AccountSettingsNew.module.css             | 38 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
index 174ca6c5..def9f838 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
@@ -77,7 +77,7 @@ const AccountSettingsNew = ({ details }) => {
                 <div className={classes.body_content}>
                     <div className={classes.general_details}>
                         <h2>General Details</h2>
-                        <p>Update your photo and personal detail here</p>
+                        <p>Update your photo and personal details here</p>
                     </div>
 
                     <div className={classes.details_settings}>
@@ -286,9 +286,7 @@ const AccountSettingsNew = ({ details }) => {
                                 Preferred Card
                             </button>
 
-                            <button
-                                className={`${classes.change_plan} ${classes.edit_button_blue}`}
-                            >
+                            <button className={`${classes.edit_button_blue}`}>
                                 edit billing details
                             </button>
                         </div>
diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
index eada38c3..fa9d7e29 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
@@ -232,6 +232,42 @@
 
 @media screen and (max-width: 999px) {
     .body_container {
-        width: 97%;
+        width: 95%;
+        min-width: auto;
+    }
+
+    .details_settings {
+        flex-direction: column;
+        row-gap: 2.5rem;
+    }
+
+    .details_setting,
+    .photo_and_plan_settings {
+        width: 100%;
+    }
+
+    .plan_details_container {
+        flex-direction: column;
+        row-gap: 1rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .form_row {
+        flex-direction: column;
+    }
+
+    .form_control:nth-child(2n) {
+        margin: 0;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .body_container .body_content {
+        padding: 1.5rem;
+    }
+
+    .body_container {
+        width: 100%;
     }
 }

From db54da585518926666f80832d8a95f6b9064124f Mon Sep 17 00:00:00 2001
From: PraiseImmanuel <praiseimmanuel601@gmail.com>
Date: Fri, 3 Feb 2023 22:42:22 +0100
Subject: [PATCH 4/5] modify account settings component

---
 .../account_settings/AccountSettingsNew.jsx   | 37 +++++++++++--------
 .../AccountSettingsNew.module.css             |  4 ++
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
index def9f838..a041f3fe 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
@@ -12,37 +12,49 @@ const AccountSettingsNew = ({ details }) => {
     //User Info
     const { user } = useSelector(state => state.user);
 
-    const fullName = user.fullName;
+    const fullName = user?.fullName;
+    console.log(details);
+
     // const userEmail = user.sub;
     // const [countryDetails, setCountryDetails] = useState([]);
 
     const [formField, setFormField] = useState({
+        avatar: details?.avatar !== null ? details?.avatar : "",
         first_name: details?.firstName,
         last_name: details?.lastName,
         email: details?.emailAddress,
         phone_number: details?.phoneNumber,
         address: details?.address,
-        city: "",
-        state: "",
-        country_of_residence: "",
-        nationality: "",
+        city: details?.city !== null ? details.city : "",
+        state: details?.state !== null ? details.state : "",
+        country_of_residence:
+            details?.countryOfResidence !== null
+                ? details.countryOfResidence
+                : 15,
+        nationality: details?.nationality !== null ? details.nationality : 15,
         date_of_birth: details?.dateOfBirth,
-        username: ""
+        current_job_title:
+            details?.currentJobTitle !== null ? details?.currentJobTitle : "",
+        username: details?.username !== null ? details.username : "",
+        new_password: ""
     });
 
     const post = {
+        "avatar": formField.avatar,
         "first_name": formField.first_name,
         "last_name": formField.last_name,
-        "country_of_residence": Number(formField.country),
-        "date_of_birth": formField.dateOfBirth,
+        "nationality": formField.nationality,
+        "country_of_residence": formField.country_of_residence,
+        "date_of_birth": formField.date_of_birth,
         "current_job_title": formField.currentJobTitle,
         "email_address": formField.email,
-        "username": formField.username,
+        // "username": formField.username,
         "phone_number": formField.phone_number,
         "city": formField.city,
         "state": formField.state,
         "address": formField.address
     };
+
     const updateInfo = async () => {
         const token = localStorage.getItem("tokenHngKey");
         try {
@@ -64,12 +76,6 @@ const AccountSettingsNew = ({ details }) => {
         }
     };
 
-    console.log(updateInfo, setFormField);
-
-    // const submitForm = () => {
-    //     updateInfo();
-    // };
-
     return (
         <div className={classes.account_settings_container}>
             <ToastContainer />
@@ -189,6 +195,7 @@ const AccountSettingsNew = ({ details }) => {
                                         />
                                     </div>
                                     <button
+                                        onClick={updateInfo}
                                         className={
                                             classes.update_personal_details
                                         }
diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
index fa9d7e29..6a7b616f 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css
@@ -270,4 +270,8 @@
     .body_container {
         width: 100%;
     }
+
+    .update_personal_details {
+        margin-left: 0;
+    }
 }

From de91c69816f8084a07d839d21b830776bd8a83c5 Mon Sep 17 00:00:00 2001
From: PraiseImmanuel <praiseimmanuel601@gmail.com>
Date: Sat, 4 Feb 2023 09:32:46 +0100
Subject: [PATCH 5/5] Modify account settings component

---
 .../account_settings/AccountSettingsNew.jsx   | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
index a041f3fe..2c1501e8 100644
--- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
+++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import classes from "./AccountSettingsNew.module.css";
+import { Link } from "react-router-dom";
 // import SettingsTopNav from "./SettingsTopNav";
 import LetteredAvatar from "react-lettered-avatar";
 // import { useEffect } from "react";
@@ -13,13 +14,13 @@ const AccountSettingsNew = ({ details }) => {
     const { user } = useSelector(state => state.user);
 
     const fullName = user?.fullName;
-    console.log(details);
+    // console.log(details);
 
     // const userEmail = user.sub;
     // const [countryDetails, setCountryDetails] = useState([]);
 
     const [formField, setFormField] = useState({
-        avatar: details?.avatar !== null ? details?.avatar : "",
+        avatar: details?.avatar !== null ? details.avatar : "",
         first_name: details?.firstName,
         last_name: details?.lastName,
         email: details?.emailAddress,
@@ -46,15 +47,17 @@ const AccountSettingsNew = ({ details }) => {
         "nationality": formField.nationality,
         "country_of_residence": formField.country_of_residence,
         "date_of_birth": formField.date_of_birth,
-        "current_job_title": formField.currentJobTitle,
+        "current_job_title": formField.current_job_title,
         "email_address": formField.email,
-        // "username": formField.username,
+        "username": formField.username,
         "phone_number": formField.phone_number,
         "city": formField.city,
         "state": formField.state,
         "address": formField.address
     };
 
+    console.log(post);
+
     const updateInfo = async () => {
         const token = localStorage.getItem("tokenHngKey");
         try {
@@ -112,7 +115,7 @@ const AccountSettingsNew = ({ details }) => {
                                             type="text"
                                             name="first_name"
                                             id="first_name"
-                                            placeholder="First Name"
+                                            placeholder={details.firstName}
                                         />
                                     </div>
                                     <div className={classes.form_control}>
@@ -131,7 +134,7 @@ const AccountSettingsNew = ({ details }) => {
                                             type="text"
                                             name="last_name"
                                             id="last_name"
-                                            placeholder="Last Name"
+                                            placeholder={details.lastName}
                                         />
                                     </div>
                                 </div>
@@ -151,7 +154,7 @@ const AccountSettingsNew = ({ details }) => {
                                             readOnly
                                             name="email"
                                             id="email"
-                                            placeholder="Email Address"
+                                            placeholder={details.email}
                                         />
                                     </div>
 
@@ -171,7 +174,7 @@ const AccountSettingsNew = ({ details }) => {
                                             type="text"
                                             name="number"
                                             id="number"
-                                            placeholder="+234-567-890-00"
+                                            placeholder={details.phoneNumber}
                                         />
                                     </div>
                                 </div>
@@ -247,11 +250,12 @@ const AccountSettingsNew = ({ details }) => {
                                     <div className={classes.current_plan}>
                                         Basic Plan
                                     </div>
-                                    <button
+                                    <Link
+                                        to="/pricing"
                                         className={`${classes.change_plan} ${classes.edit_button_blue}`}
                                     >
                                         change plan
-                                    </button>
+                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -292,10 +296,12 @@ const AccountSettingsNew = ({ details }) => {
                             <button className={classes.preferred_card}>
                                 Preferred Card
                             </button>
-
-                            <button className={`${classes.edit_button_blue}`}>
+                            <Link
+                                to="/pricing"
+                                className={`${classes.edit_button_blue}`}
+                            >
                                 edit billing details
-                            </button>
+                            </Link>
                         </div>
                     </div>
                 </div>
