From d4f7dc2da6767a3e6dd149c06ffaaff8f55680a4 Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Wed, 11 May 2022 12:30:39 +0700
Subject: [PATCH 1/6] init payment account

---
 locales/en.yml                                |  1 +
 src/components/buyer/CBAccount.vue            |  7 ++
 .../account/{LBVerify.vue => LBCredit.vue}    |  0
 src/pages/buyer/account/address.vue           | 56 ++++++++++++++-
 .../buyer/account/{verify.vue => credit.vue}  |  2 +-
 src/pages/buyer/account/payment.vue           | 68 ++++++++++++++++---
 6 files changed, 122 insertions(+), 12 deletions(-)
 rename src/layouts/buyer/account/{LBVerify.vue => LBCredit.vue} (100%)
 rename src/pages/buyer/account/{verify.vue => credit.vue} (99%)

diff --git a/locales/en.yml b/locales/en.yml
index 8072eda..97c6981 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -33,6 +33,7 @@ caccount:
   orders: Orders
   download: Download
   payment-method: Payment Method
+  credit-card: Credit Card
   address: Address
   account-details: Account Details
   Logout: Logout
diff --git a/src/components/buyer/CBAccount.vue b/src/components/buyer/CBAccount.vue
index 9c6b7cb..fcc5cdc 100644
--- a/src/components/buyer/CBAccount.vue
+++ b/src/components/buyer/CBAccount.vue
@@ -32,6 +32,13 @@ const { t } = useI18n()
       </div>
     </router-link>
 
+     <router-link to="/buyer/account/credit" :title="credit">
+      <div class="items">
+        <i class="fa fa-credit-card" />
+        {{ t('caccount.credit-card') }}
+      </div>
+    </router-link>
+
     <router-link to="/buyer/account/address" :title="address">
       <div class="items">
         <i class="fa fa-map-marker" />
diff --git a/src/layouts/buyer/account/LBVerify.vue b/src/layouts/buyer/account/LBCredit.vue
similarity index 100%
rename from src/layouts/buyer/account/LBVerify.vue
rename to src/layouts/buyer/account/LBCredit.vue
diff --git a/src/pages/buyer/account/address.vue b/src/pages/buyer/account/address.vue
index 17e5bd2..42377de 100644
--- a/src/pages/buyer/account/address.vue
+++ b/src/pages/buyer/account/address.vue
@@ -3,6 +3,58 @@ meta:
   layout: buyer/account/LBAddress
 </route>
 
+<script setup>
+import { useRouter } from 'vue-router'
+import { toast } from '~/stores/toast'
+import { handleError } from '~/helpers/error'
+import AccountRequest from '~/services/account-request'
+
+useHead({
+  title: 'buyer | address',
+})
+
+const router = useRouter()
+const useToast = toast()
+
+const fullName = ref('...')
+const address = ref('...')
+const phone = ref('...')
+
+onMounted(() => {
+  AccountRequest.getAddress().then((res) => {
+    fullName.value = res.data.full_name
+    address.value = res.data.address
+    phone.value = res.data.phone
+    useToast.updateToast('success', 'Address updated successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
+const payload = reactive({
+  full_name: '',
+  phone: '',
+  state: '',
+  city: '',
+  town: '',
+  address: '',
+  is_home: false,
+  is_pickup_address: false,
+  is_default_address: false,
+  is_return_address: false,
+})
+
+const handleSubmit = async(e) => {
+  e.preventDefault()
+  await AccountRequest.createAddress(payload).then(() => {
+    useToast.updateToast('success', 'Address created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+</script>
+
 <template>
   <div class="myaccount-content border-1 border-solid border-light-700 rounded-md p-5 bg-[#EBF6FC] dark:bg-cool-gray-800">
     <div class="border-b-1 border-b-solid border-b-light-700 py-3 font-medium flex items-center gap-1">
@@ -11,7 +63,6 @@ meta:
         Billing Address
       </h3>
     </div>
-
     <div class="py-5">
       <p class="font-medium text-gray-500 text-md">
         Thuong Truong
@@ -23,12 +74,11 @@ meta:
         Mobile: (+84) 917-085-937
       </p>
     </div>
-
     <a href="#" class="edit-address-btn text-sm text-blue-700 gap-1 flex items-center"><i
       class="fa fa-edit"
     />Edit Address</a>
 
-    <form action="" method="post">
+    <form>
       <div>
         <label>Full name</label>
         <input type="text" name="full_name" required>
diff --git a/src/pages/buyer/account/verify.vue b/src/pages/buyer/account/credit.vue
similarity index 99%
rename from src/pages/buyer/account/verify.vue
rename to src/pages/buyer/account/credit.vue
index a9846c0..b4ac92f 100644
--- a/src/pages/buyer/account/verify.vue
+++ b/src/pages/buyer/account/credit.vue
@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  layout: buyer/account/LBVerify
+  layout: buyer/account/LBCredit
 </route>
 
 <script setup>
diff --git a/src/pages/buyer/account/payment.vue b/src/pages/buyer/account/payment.vue
index bb33eba..399ca35 100644
--- a/src/pages/buyer/account/payment.vue
+++ b/src/pages/buyer/account/payment.vue
@@ -3,6 +3,48 @@ meta:
   layout: buyer/account/LBPayment
 </route>
 
+<script setup>
+import { toast } from '~/stores/toast'
+import { handleError } from '~/helpers/error'
+import AccountRequest from '~/services/account-request'
+
+useHead({
+  title: 'buyer | account payment',
+})
+
+const useToast = toast()
+
+const payload = reactive({
+  accountholder_name: '',
+  identification_number: '',
+  bank_name: '',
+  bank_branch: '',
+  account_number: '',
+})
+
+watchOnce(async() => {
+  await AccountRequest.getAddress().then((res) => {
+    payload.accountholder_name = res.data.accountholder_name
+    payload.identification_number = res.data.identification_number
+    payload.bank_name = res.data.bank_name
+    payload.bank_branch = res.data.bank_branch
+    payload.account_number = res.data.account_number
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
+const handleUpdate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.createAddress(payload).then(() => {
+    useToast.updateToast('success', 'Payment method created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+</script>
+
 <template>
   <div class="payment-container border-1 border-solid border-light-700 rounded-md p-5 bg-[#EBF6FC] dark:bg-cool-gray-800">
     <div class="border-b-1 border-b-solid border-b-light-700 py-3 font-medium flex items-center gap-1">
@@ -11,34 +53,44 @@ meta:
         Payment method
       </h3>
     </div>
+    <div class="py-5">
+      <p class="font-medium text-gray-500 text-md">
+        Thuong Truong
+      </p>
+      <p class="text-sm">
+        6 quater, Linh Trung ward, Thu Duc dist, HoChiMinh city, VietNam
+      </p>
+      <p class="text-sm">
+        Mobile: (+84) 917-085-937
+      </p>
+    </div>
     <p class="saved-message py-5 text-gray-400 text-sm font-medium">
       You not't saved your Payment method yet.
     </p>
 
-    <form action="" method="post">
+    <form @submit.prevent="handleUpdate">
       <div>
         <label>Full name</label>
-        <input type="text" name="accountholder_name" required>
+        <input v-model="payload.accountholder_name" type="text" required>
       </div>
       <div>
         <label>Identification number</label>
-        <input type="number" name="identification_number" required>
+        <input v-model="payload.identification_number" type="text" required>
       </div>
       <div>
         <label>Bank name</label>
-        <input type="text" name="bank_name" required>
+        <input v-model="payload.bank_name" type="text" required>
       </div>
       <div>
         <label>Bank branch</label>
-        <input type="text" name="bank_branch" required>
+        <input v-model="payload.bank_branch" type="text" required>
       </div>
       <div>
         <label>Card number</label>
-        <input type="text" name="account_number" required>
+        <input v-model="payload.account_number" type="text" required>
       </div>
-
       <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
           <ISave />Save Changes
         </button>
       </div>

From 0c1e72f5bc3a2cffe9c3628e8a68f179607ff90e Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Wed, 11 May 2022 17:33:08 +0700
Subject: [PATCH 2/6] update bank credit card infor

---
 locales/en.yml                          |   1 -
 src/components.d.ts                     |   1 +
 src/components/buyer/CBAccount.vue      |  11 +-
 src/layouts/buyer/account/LBCredit.vue  |  27 +--
 src/layouts/buyer/account/LBDetails.vue |  19 --
 src/pages/buyer/account/address.vue     | 101 +++++++---
 src/pages/buyer/account/credit.vue      | 243 ++++++++++++------------
 src/pages/buyer/account/dashboard.vue   | 127 ++++++-------
 src/pages/buyer/account/details.vue     |  68 -------
 src/pages/buyer/account/payment.vue     |  33 +++-
 10 files changed, 301 insertions(+), 330 deletions(-)
 delete mode 100644 src/layouts/buyer/account/LBDetails.vue
 delete mode 100644 src/pages/buyer/account/details.vue

diff --git a/locales/en.yml b/locales/en.yml
index 97c6981..211520b 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -35,7 +35,6 @@ caccount:
   payment-method: Payment Method
   credit-card: Credit Card
   address: Address
-  account-details: Account Details
   Logout: Logout
 ccategory:
   men-fashion: Men's Fashion
diff --git a/src/components.d.ts b/src/components.d.ts
index 0cd1dd5..acedd16 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
diff --git a/src/components/buyer/CBAccount.vue b/src/components/buyer/CBAccount.vue
index fcc5cdc..d9f8ca7 100644
--- a/src/components/buyer/CBAccount.vue
+++ b/src/components/buyer/CBAccount.vue
@@ -27,12 +27,13 @@ const { t } = useI18n()
 
     <router-link to="/buyer/account/payment" :title="payment">
       <div class="items">
-        <i class="fa fa-credit-card" />
+        <!-- <i class="fa fa-credit-card" /> -->
+        <i class="fas fa-university" />
         {{ t('caccount.payment-method') }}
       </div>
     </router-link>
 
-     <router-link to="/buyer/account/credit" :title="credit">
+    <router-link to="/buyer/account/credit" :title="credit">
       <div class="items">
         <i class="fa fa-credit-card" />
         {{ t('caccount.credit-card') }}
@@ -46,12 +47,6 @@ const { t } = useI18n()
       </div>
     </router-link>
 
-    <router-link to="/buyer/account/details" :title="details" class="active">
-      <div class="items">
-        <i class="fa fa-user" /> {{ t('caccount.account-details') }}
-      </div>
-    </router-link>
-
     <router-link to="/buyer/login" :title="logout">
       <div class="items rounded-b-lg">
         <i class="fa fa-sign-out" /> {{ t('caccount.Logout') }}
diff --git a/src/layouts/buyer/account/LBCredit.vue b/src/layouts/buyer/account/LBCredit.vue
index 4ee72ac..332f531 100644
--- a/src/layouts/buyer/account/LBCredit.vue
+++ b/src/layouts/buyer/account/LBCredit.vue
@@ -1,16 +1,19 @@
 <template>
-  <main class="text-gray-700 dark:text-gray-200 overflow-x-hidden">
-    <SHead />
-    <div class="seller-main w-screen flex justify-center p-20 items-center bg-[#F6F6F6] dark:bg-black">
-      <router-view />
+  <main class="text-gray-700 dark:text-gray-200">
+    <CBHeaderTop />
+    <CBHead />
+    <div class="header divide-y divide-gray-200 divide-solid px-15">
+      <div class="capitalize text-3xl font-semibold pt-15 pb-5 flex justify-center items-center">
+        <IAccount />
+        <h1>
+          My Account
+        </h1>
+      </div>
+      <div class="grid grid-cols-4 pt-5 pb-20">
+        <CBAccount class="col-span-1" />
+        <router-view class="col-span-3" />
+      </div>
     </div>
+    <CBFooter />
   </main>
 </template>
-
-<style scoped>
-.seller-main{
-  background: url("/img/admin/login_bg.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-</style>
diff --git a/src/layouts/buyer/account/LBDetails.vue b/src/layouts/buyer/account/LBDetails.vue
deleted file mode 100644
index 332f531..0000000
--- a/src/layouts/buyer/account/LBDetails.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <main class="text-gray-700 dark:text-gray-200">
-    <CBHeaderTop />
-    <CBHead />
-    <div class="header divide-y divide-gray-200 divide-solid px-15">
-      <div class="capitalize text-3xl font-semibold pt-15 pb-5 flex justify-center items-center">
-        <IAccount />
-        <h1>
-          My Account
-        </h1>
-      </div>
-      <div class="grid grid-cols-4 pt-5 pb-20">
-        <CBAccount class="col-span-1" />
-        <router-view class="col-span-3" />
-      </div>
-    </div>
-    <CBFooter />
-  </main>
-</template>
diff --git a/src/pages/buyer/account/address.vue b/src/pages/buyer/account/address.vue
index 42377de..fe4919c 100644
--- a/src/pages/buyer/account/address.vue
+++ b/src/pages/buyer/account/address.vue
@@ -15,21 +15,7 @@ useHead({
 
 const router = useRouter()
 const useToast = toast()
-
-const fullName = ref('...')
-const address = ref('...')
-const phone = ref('...')
-
-onMounted(() => {
-  AccountRequest.getAddress().then((res) => {
-    fullName.value = res.data.full_name
-    address.value = res.data.address
-    phone.value = res.data.phone
-    useToast.updateToast('success', 'Address updated successfully!', true)
-  }).catch((error) => {
-    return handleError(error)
-  })
-})
+const id = JSON.parse(localStorage.getItem('user')).data.id
 
 const payload = reactive({
   full_name: '',
@@ -44,10 +30,31 @@ const payload = reactive({
   is_return_address: false,
 })
 
+const isEdit = ref(false)
+
+watchOnce(() => {
+  AccountRequest.getAddress().then((res) => {
+    payload.full_name = res.data.full_name
+    payload.address = res.data.address
+    payload.phone = res.data.phone
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
 const handleSubmit = async(e) => {
   e.preventDefault()
   await AccountRequest.createAddress(payload).then(() => {
-    useToast.updateToast('success', 'Address created successfully!', true)
+    useToast.updateToast('created', 'Address has been created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+const handleUpdate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.creatupdateAddressById(id, payload).then(() => {
+    useToast.updateToast('updated', 'Address has been updated successfully!', true)
   }).catch((error) => {
     return handleError(error)
   })
@@ -74,38 +81,80 @@ const handleSubmit = async(e) => {
         Mobile: (+84) 917-085-937
       </p>
     </div>
-    <a href="#" class="edit-address-btn text-sm text-blue-700 gap-1 flex items-center"><i
+    <a class="edit-address-btn text-sm text-blue-700 gap-1 flex items-center cursor-pointer" @click="isEdit = !isEdit"><i
       class="fa fa-edit"
     />Edit Address</a>
 
     <form>
       <div>
         <label>Full name</label>
-        <input type="text" name="full_name" required>
+        <input v-model="payload.full_name" type="text" required>
       </div>
       <div>
         <label>Phone number</label>
-        <input type="number" name="phone" required>
+        <input v-model="payload.phone" type="number" required>
       </div>
       <div>
         <label>State</label>
-        <input type="text" name="state" required>
+        <input v-model="payload.state" type="text" required>
       </div>
       <div>
         <label>City</label>
-        <input type="text" name="city" required>
+        <input v-model="payload.city" type="text" required>
       </div>
       <div>
         <label>Town</label>
-        <input type="text" name="town" required>
+        <input v-model="payload.town" type="text" required>
       </div>
       <div>
         <label>Address</label>
-        <input type="text" name="address" required>
+        <input v-model="payload.address" type="text" required>
       </div>
 
-      <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium">
+      <div class="dark:text-black">
+        <select v-model="payload.is_home">
+          <option>Is Home</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_pickup_address">
+          <option>Is Pickup Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_default_address">
+          <option>Is Default Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_return_address">
+          <option>Is Return Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+      </div>
+
+      <div class="pt-5 flex gap-5 justify-end">
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-80" :disabled="!isEdit" @click="handleUpdate">
+          <ISave />Update address
+        </button>
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleSubmit">
           <ISave />Save Changes
         </button>
       </div>
@@ -114,7 +163,7 @@ const handleSubmit = async(e) => {
 </template>
 
 <style scoped>
-input{
+input, select{
   width: 80%;
   outline: none;
   border: 1px solid rgba(233, 236, 239);
diff --git a/src/pages/buyer/account/credit.vue b/src/pages/buyer/account/credit.vue
index b4ac92f..d09d321 100644
--- a/src/pages/buyer/account/credit.vue
+++ b/src/pages/buyer/account/credit.vue
@@ -4,148 +4,145 @@ meta:
 </route>
 
 <script setup>
-import { useRouter } from 'vue-router'
 import { toast } from '~/stores/toast'
-import EmailRequest from '~/services/email-request'
+import { handleError } from '~/helpers/error'
+import AccountRequest from '~/services/account-request'
 
 useHead({
-  title: 'buyer | verify account',
+  title: 'buyer | account credit',
 })
-const router = useRouter()
 
-const payload = reactive({ id: JSON.parse(localStorage.getItem('user')).data.id, hash: '', signature: '' })
+const useToast = toast()
+const id = JSON.parse(localStorage.getItem('user')).data.id
 
-const handleSubmit = () => {
-  EmailRequest.getVerifyEmailById(payload).then((res) => {
-    router.push({ path: '/buyer/account/verify/success' })
+const payload = reactive({
+  cardholder_name: '',
+  expiry_date: '',
+  cvv: '',
+  registration_address: '',
+  postal_code: '',
+  card_number: '',
+})
+
+watchOnce(async() => {
+  await AccountRequest.getCreditCard().then((res) => {
+    payload.cardholder_name = res.data.cardholder_name
+    payload.expiry_date = res.data.expiry_date
+    payload.cvv = res.data.cvv
+    payload.registration_address = res.data.registration_address
+    payload.postal_code = res.data.postal_code
+    payload.card_number = res.data.card_number
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
+const handleCreate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.createCreditCard(payload).then(() => {
+    useToast.updateToast('created', 'your card has been created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+const handleUpdate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.updateCreditCardById(id, payload).then(() => {
+    useToast.updateToast('updated', 'Your card has been successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+const handleDelete = async(e) => {
+  e.preventDefault()
+  await AccountRequest.deleteCreditCardById(id, payload).then(() => {
+    useToast.updateToast('deleted', 'Your card has been deleted!', true)
+  }).catch((error) => {
+    return handleError(error)
   })
 }
 
 </script>
 
 <template>
-  <div class="login-container grid grid-rows-5">
-    <div class="login-banner row-span-2 flex justify-center items-center relative">
-      <h1 class="text-3xl text-white font-bold z-20">
-        Verify your account
-      </h1>
-      <span class="bg-blue-900 w-full h-full absolute opacity-30 z-10 rounded-t-2xl" />
+  <div class="payment-container border-1 border-solid border-light-700 rounded-md p-5 bg-[#EBF6FC] dark:bg-cool-gray-800">
+    <div class="border-b-1 border-b-solid border-b-light-700 py-3 font-medium flex items-center gap-1">
+      <IBPayment />
+      <h3 class="text-2xl">
+        Payment method
+      </h3>
     </div>
-    <div class="row-span-3 px-20 py-15 bg-white rounded-b-2xl shadow-md shadow-gray-400">
-      <form action="" method="post">
-        <div>
-          <label for="user_name">Username</label>
-          <input type="text" placeholder="Enter username">
-        </div>
-        <div>
-          <label for="password">Password</label>
-          <input type="password" placeholder="Enter password">
-        </div>
-        <div class="flex justify-between items-center pl-25">
-          <label class="container">Remember me
-            <input type="checkbox" checked="checked">
-            <span class="checkmark" />
-          </label>
-          <label for="forgot_password" class="cursor-pointer hover:text-[#6DB846] duration-200">Fogot Password?</label>
-        </div>
-        <div class="flex justify-center">
-          <router-link to="/admin/home">
-            <button type="submit" class="rounded-3xl bg-[#57B846] hover:bg-[#333333] py-2 px-10 text-white text-lg shadow-md shadow-gray-300 flex items-center gap-1">
-              <ILogin class="text-sm" /> Login
-            </button>
-          </router-link>
-        </div>
-      </form>
+    <div class="py-5">
+      <p class="font-medium text-gray-500 text-md">
+        Thuong Truong
+      </p>
+      <p class="text-sm">
+        6 quater, Linh Trung ward, Thu Duc dist, HoChiMinh city, VietNam
+      </p>
+      <p class="text-sm">
+        ZIP postal: 700000
+      </p>
     </div>
+    <p class="saved-message py-5 text-gray-400 text-sm font-medium">
+      You not't saved your Payment method yet.
+    </p>
+
+    <form @submit.prevent="handleCreate">
+      <div>
+        <label>Card holder name</label>
+        <input v-model="payload.cardholder_name" type="text" required>
+      </div>
+      <div>
+        <label>Card number</label>
+        <input v-model="payload.card_number" type="text" required>
+      </div>
+      <div>
+        <label>Expiry date</label>
+        <input v-model="payload.expiry_date " type="date" required>
+      </div>
+      <div>
+        <label>Cvv</label>
+        <input v-model="payload.cvv" type="text" required>
+      </div>
+      <div>
+        <label>Registration address</label>
+        <input v-model="payload.registration_address" type="text" required>
+      </div>
+      <div>
+        <label>Postal ZIP code</label>
+        <input v-model="payload.postal_code" type="text" required>
+      </div>
+      <div class="pt-5 flex justify-end gap-5">
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleUpdate">
+          <ISave />Update address
+        </button>
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
+          <ISave />Save Changes
+        </button>
+      </div>
+    </form>
   </div>
 </template>
 
 <style scoped>
-.login-banner{
-    background-image: url('/img/admin/login_header.jpg');
-    background-size: cover;
-    border-radius: 1rem 1rem 0 0;
-}
-input[type='text'],
-input[type='password']{
-    border: 1px solid gray;
-    outline: none;
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    padding: 0.5rem 0;
-    width: 30rem;
-}
-form > div{
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-}
-form > div:nth-child(2){
-    margin: 2rem 0 1rem 0;
+input{
+  width: 80%;
+  outline: none;
+  border: 1px solid rgba(233, 236, 239);
+  border-radius: 0.3rem;
+  padding: 0.3rem 1rem;
+  transition: 0.2s linear;
+  font-size: 0.9rem;
 }
-.container {
-  display: block;
-  position: relative;
-  padding-left: 2rem;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 1rem;
-  width: max-content;
+input:focus{
+    box-shadow: 2px 2px 4px rgba(59, 175, 252, 0.8);
 }
-
-/* Hide the browser's default checkbox */
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 1.25rem;
-  width: 1.25rem;
-  background-color: #eee;
-  border-radius: 0.2rem;
-}
-
-/* On mouse-over, add a grey background color */
-.container:hover input ~ .checkmark {
-  background-color: #ccc;
-}
-
-/* When the checkbox is checked, add a blue background */
-.container input:checked ~ .checkmark {
-  background-color: #6DB846;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.container .checkmark:after {
-  left: 9px;
-  top: 5px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 3px 3px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+form > div:not(:last-child){
+  padding: 0.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
 }
 </style>
diff --git a/src/pages/buyer/account/dashboard.vue b/src/pages/buyer/account/dashboard.vue
index 28692a8..315ad52 100644
--- a/src/pages/buyer/account/dashboard.vue
+++ b/src/pages/buyer/account/dashboard.vue
@@ -5,15 +5,46 @@ meta:
 
 <script setup>
 import { useRouter } from 'vue-router'
+import { toast } from '~/stores/toast'
+import { handleError } from '~/helpers/error'
 import AuthRequest from '~/services/auth-request'
+import AccountRequest from '~/services/account-request'
 
 useHead({
   title: 'e-shopee | buyer dashboard',
 })
 
 const user = JSON.parse(localStorage.getItem('user'))
-
 const router = useRouter()
+const useToast = toast()
+
+const payload = reactive({
+  display_name: '',
+  phone: '',
+  gender: 1,
+  date_of_birth: '',
+  avatar_image: 'https://avatars.githubusercontent.com/u/47313528?v=4',
+})
+
+watchOnce(async() => {
+  await AccountRequest.getProfile().then((res) => {
+    payload.display_name = res.data.display_name
+    payload.phone = res.data.phone
+    payload.gender = res.data.gender
+    payload.date_of_birth = res.data.date_of_birth
+    payload.avatar_image = res.data.avatar_image
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
+const updateProfile = async() => {
+  await AccountRequest.updateProfile().then(() => {
+    useToast.updateToast('success', 'Profile account has been updated!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
 
 const signOut = async() => {
   await AuthRequest.signOut().then(() => {
@@ -46,72 +77,36 @@ const signOut = async() => {
       password and account details.
     </p>
 
-    <form action="" method="post">
-      <div>
-        <label>Full name</label>
-        <input type="text" name="accountholder_name" required>
+    <form @submit.prevent="updateProfile">
+      <div class="">
+        <input v-model="payload.display_name" placeholder="Full name" type="email" required>
       </div>
-      <div>
-        <label>Phone number</label>
-        <input type="number" name="phone" required>
-      </div>
-      <div>
-        <label>State</label>
-        <input type="text" name="state" required>
-      </div>
-      <div>
-        <label>City</label>
-        <input type="text" name="city" required>
-      </div>
-      <div>
-        <label>Town</label>
-        <input type="text" name="town" required>
-      </div>
-      <div>
-        <label>Address</label>
-        <input type="text" name="address" required>
-      </div>
-      <div class="dark:text-black">
-        <select name="is_home">
-          <option>Is Home</option>
-          <option value="false">
-            False
-          </option>
-          <option value="true">
-            True
-          </option>
-        </select>
-        <select name="is_pickup_address">
-          <option>Is Pickup Address</option>
-          <option value="false">
-            False
-          </option>
-          <option value="true">
-            True
-          </option>
-        </select>
-        <select name="is_default_address">
-          <option>Is Default Address</option>
-          <option value="false">
-            False
-          </option>
-          <option value="true">
-            True
+
+      <div class="">
+        <input v-model="payload.phone" placeholder="Phone name" type="text">
+        <select v-model="payload.gender" class="cursor-pointer">
+          <option :value="1">
+            Gender
           </option>
-        </select>
-        <select name="is_return_address">
-          <option>Is Return Address</option>
-          <option value="false">
-            False
+          <option :value="2">
+            Male
           </option>
-          <option value="true">
-            True
+          <option :value="3">
+            Female
           </option>
         </select>
       </div>
 
+      <div>
+        <input v-model="payload.date_of_birth" placeholder="Date of birth" type="date" required>
+      </div>
+
+      <div>
+        <input v-model="payload.avatar_image" placeholder="Avatar link url" type="text" required>
+      </div>
+
       <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="updateProfile">
           <ISave />Save Changes
         </button>
       </div>
@@ -121,22 +116,18 @@ const signOut = async() => {
 
 <style scoped>
 input, select{
+  width: 100%;
   border: 1px solid rgba(233, 236, 239);
   border-radius: 0.3rem;
   padding: 0.3rem 1rem;
   transition: 0.2s linear;
   font-size: 0.9rem;
 }
-input{
-  width: 80%;
-}
-select{
-  cursor: pointer;
-}
-input:focus, select:focus{
-  box-shadow: 2px 2px 4px rgba(59, 175, 252, 0.8);
+input:focus,
+select:hover{
+    box-shadow: 2px 2px 4px rgba(59, 175, 252, 0.8);
 }
-form > div:not(:last-child){
+form > div{
   padding: 0.5rem 0;
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/buyer/account/details.vue b/src/pages/buyer/account/details.vue
deleted file mode 100644
index 156148d..0000000
--- a/src/pages/buyer/account/details.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<route lang="yaml">
-meta:
-  layout: buyer/account/LBDetails
-</route>
-
-<template>
-  <div class="myaccount-content border-1 border-solid border-light-700 rounded-md p-5 bg-[#EBF6FC] dark:bg-cool-gray-800">
-    <div class="border-b-1 border-b-solid border-b-light-700 py-3 font-medium flex items-center gap-1">
-      <IBAccount />
-      <h3 class="text-2xl">
-        Account details
-      </h3>
-    </div>
-
-    <div class="account-details-form">
-      <form action="">
-        <div class="">
-          <input id="full-name" placeholder="Full Name" type="text">
-          <input id="user-name" placeholder="User Name" type="text" required>
-        </div>
-
-        <div class="">
-          <input id="email" placeholder="Email Address" type="email" required>
-        </div>
-
-        <div class="text-md font-medium">
-          <h4>Password change</h4>
-        </div>
-
-        <div class="">
-          <input id="current-pwd" placeholder="Current Password" type="password" required>
-        </div>
-
-        <div class="">
-          <input id="new-password" placeholder="New Password" type="password" required>
-          <input id="confirm-password" placeholder="Confirm Password" type="password" required>
-        </div>
-
-        <div class="pt-5">
-          <button class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium">
-            <ISave />Save Changes
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-input{
-  width: 100%;
-  border: 1px solid rgba(233, 236, 239);
-  border-radius: 0.3rem;
-  padding: 0.3rem 1rem;
-  transition: 0.2s linear;
-  font-size: 0.9rem;
-}
-input:focus{
-    box-shadow: 2px 2px 4px rgba(59, 175, 252, 0.8);
-}
-form > div{
-  padding: 0.5rem 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 2rem;
-}
-</style>
diff --git a/src/pages/buyer/account/payment.vue b/src/pages/buyer/account/payment.vue
index 399ca35..ba65300 100644
--- a/src/pages/buyer/account/payment.vue
+++ b/src/pages/buyer/account/payment.vue
@@ -13,6 +13,7 @@ useHead({
 })
 
 const useToast = toast()
+const id = JSON.parse(localStorage.getItem('user')).data.id
 
 const payload = reactive({
   accountholder_name: '',
@@ -34,10 +35,26 @@ watchOnce(async() => {
   })
 })
 
-const handleUpdate = async(e) => {
+const handleCreate = async(e) => {
   e.preventDefault()
   await AccountRequest.createAddress(payload).then(() => {
-    useToast.updateToast('success', 'Payment method created successfully!', true)
+    useToast.updateToast('success', 'Payment method has been created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+const handleUpdate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.updateBankAccountById(id, payload).then(() => {
+    useToast.updateToast('updated', 'Payment method has been updated successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+const handleDelete = async(e) => {
+  e.preventDefault()
+  await AccountRequest.deleteBankAccountById(id, payload).then(() => {
+    useToast.updateToast('updated', 'Payment method has been updated successfully!', true)
   }).catch((error) => {
     return handleError(error)
   })
@@ -68,7 +85,7 @@ const handleUpdate = async(e) => {
       You not't saved your Payment method yet.
     </p>
 
-    <form @submit.prevent="handleUpdate">
+    <form @submit.prevent="handleCreate">
       <div>
         <label>Full name</label>
         <input v-model="payload.accountholder_name" type="text" required>
@@ -89,8 +106,14 @@ const handleUpdate = async(e) => {
         <label>Card number</label>
         <input v-model="payload.account_number" type="text" required>
       </div>
-      <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
+      <div class="pt-5 flex justify-end gap-5">
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleDelete">
+          <ISave />Delete address
+        </button>
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleUpdate">
+          <ISave />Update address
+        </button>
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />Save Changes
         </button>
       </div>

From a755ce6b4067405c1cd980381741c7f5e0ab160b Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Wed, 11 May 2022 17:42:57 +0700
Subject: [PATCH 3/6] add delete address feature

---
 src/components.d.ts                 |  1 -
 src/pages/buyer/account/address.vue | 15 +++++++++++++--
 src/pages/buyer/account/credit.vue  |  7 +++++--
 src/pages/buyer/account/payment.vue | 12 ++++++------
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index acedd16..0cd1dd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,7 +10,6 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
-    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
diff --git a/src/pages/buyer/account/address.vue b/src/pages/buyer/account/address.vue
index fe4919c..05e9ef6 100644
--- a/src/pages/buyer/account/address.vue
+++ b/src/pages/buyer/account/address.vue
@@ -42,7 +42,7 @@ watchOnce(() => {
   })
 })
 
-const handleSubmit = async(e) => {
+const handleCreate = async(e) => {
   e.preventDefault()
   await AccountRequest.createAddress(payload).then(() => {
     useToast.updateToast('created', 'Address has been created successfully!', true)
@@ -59,6 +59,14 @@ const handleUpdate = async(e) => {
     return handleError(error)
   })
 }
+const handleDelete = async(e) => {
+  e.preventDefault()
+  await AccountRequest.deleteAddressById(id).then(() => {
+    useToast.updateToast('updated', 'Address has been updated successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
 
 </script>
 
@@ -151,10 +159,13 @@ const handleUpdate = async(e) => {
       </div>
 
       <div class="pt-5 flex gap-5 justify-end">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleDelete">
+          <ISave />Delete address
+        </button>
         <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-80" :disabled="!isEdit" @click="handleUpdate">
           <ISave />Update address
         </button>
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleSubmit">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />Save Changes
         </button>
       </div>
diff --git a/src/pages/buyer/account/credit.vue b/src/pages/buyer/account/credit.vue
index d09d321..fa88de7 100644
--- a/src/pages/buyer/account/credit.vue
+++ b/src/pages/buyer/account/credit.vue
@@ -88,7 +88,7 @@ const handleDelete = async(e) => {
       You not't saved your Payment method yet.
     </p>
 
-    <form @submit.prevent="handleCreate">
+    <form>
       <div>
         <label>Card holder name</label>
         <input v-model="payload.cardholder_name" type="text" required>
@@ -114,8 +114,11 @@ const handleDelete = async(e) => {
         <input v-model="payload.postal_code" type="text" required>
       </div>
       <div class="pt-5 flex justify-end gap-5">
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleDelete">
+          <ISave />Delete credit
+        </button>
         <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleUpdate">
-          <ISave />Update address
+          <ISave />Update credit
         </button>
         <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />Save Changes
diff --git a/src/pages/buyer/account/payment.vue b/src/pages/buyer/account/payment.vue
index ba65300..7f90b80 100644
--- a/src/pages/buyer/account/payment.vue
+++ b/src/pages/buyer/account/payment.vue
@@ -38,7 +38,7 @@ watchOnce(async() => {
 const handleCreate = async(e) => {
   e.preventDefault()
   await AccountRequest.createAddress(payload).then(() => {
-    useToast.updateToast('success', 'Payment method has been created successfully!', true)
+    useToast.updateToast('created', 'Payment method has been created successfully!', true)
   }).catch((error) => {
     return handleError(error)
   })
@@ -53,8 +53,8 @@ const handleUpdate = async(e) => {
 }
 const handleDelete = async(e) => {
   e.preventDefault()
-  await AccountRequest.deleteBankAccountById(id, payload).then(() => {
-    useToast.updateToast('updated', 'Payment method has been updated successfully!', true)
+  await AccountRequest.deleteBankAccountById(id).then(() => {
+    useToast.updateToast('deleted', 'Payment method has been deleted successfully!', true)
   }).catch((error) => {
     return handleError(error)
   })
@@ -85,7 +85,7 @@ const handleDelete = async(e) => {
       You not't saved your Payment method yet.
     </p>
 
-    <form @submit.prevent="handleCreate">
+    <form>
       <div>
         <label>Full name</label>
         <input v-model="payload.accountholder_name" type="text" required>
@@ -108,10 +108,10 @@ const handleDelete = async(e) => {
       </div>
       <div class="pt-5 flex justify-end gap-5">
         <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleDelete">
-          <ISave />Delete address
+          <ISave />Delete payment
         </button>
         <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-60" @click="handleUpdate">
-          <ISave />Update address
+          <ISave />Update payment
         </button>
         <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />Save Changes

From 16ec9645da8714864868054564fce4d2c0434cc0 Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Thu, 12 May 2022 00:55:21 +0700
Subject: [PATCH 4/6] fixes request account

---
 src/App.vue                                   |  4 +-
 src/components.d.ts                           |  2 +-
 .../{CLoading.vue => CProgress.vue}           |  5 ++
 src/components/buyer/CBAccount.vue            | 22 +++++--
 src/components/header/RMenu.vue               | 15 ++++-
 src/helpers/error.ts                          |  2 +-
 src/pages/buyer/account/credit.vue            | 14 ++---
 src/pages/buyer/account/dashboard.vue         | 59 +++++++++++--------
 src/pages/buyer/cart.vue                      | 18 +++---
 src/pages/buyer/register.vue                  | 23 +++++---
 src/services/axios-instance.js                |  7 +--
 11 files changed, 109 insertions(+), 62 deletions(-)
 rename src/components/{CLoading.vue => CProgress.vue} (92%)

diff --git a/src/App.vue b/src/App.vue
index 66c5e4a..028c60e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,8 +38,8 @@ window.addEventListener('scroll', scrollFunction)
     </div>
   </Transition>
   <CToast />
-  <router-view v-if="useLoading.isLoading === false" />
-  <CBLoading v-if="useLoading.isLoading === true" />
+  <router-view />
+  <CProgress v-if="useLoading.isLoading === true" />
   <!-- <router-view v-slot="{ Component, route }">
     <transition :name="route.meta.transition || 'fade'" mode="out-in">
       <keep-alive>
diff --git a/src/components.d.ts b/src/components.d.ts
index 0cd1dd5..6231c46 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -36,9 +36,9 @@ declare module 'vue' {
     CBTopProducts: typeof import('./components/buyer/CBTopProducts.vue')['default']
     CBTrending: typeof import('./components/buyer/CBTrending.vue')['default']
     CExtension: typeof import('./components/CExtension.vue')['default']
-    CLoading: typeof import('./components/CLoading.vue')['default']
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
+    CProgress: typeof import('./components/CProgress.vue')['default']
     CSFooter: typeof import('./components/seller/CSFooter.vue')['default']
     CSlick: typeof import('./components/CSlick.vue')['default']
     CToast: typeof import('./components/CToast.vue')['default']
diff --git a/src/components/CLoading.vue b/src/components/CProgress.vue
similarity index 92%
rename from src/components/CLoading.vue
rename to src/components/CProgress.vue
index fb9a085..5a7ace0 100644
--- a/src/components/CLoading.vue
+++ b/src/components/CProgress.vue
@@ -18,6 +18,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background: #7a7a7a59 10%;
 }
 
 .load-wrapp {
diff --git a/src/components/buyer/CBAccount.vue b/src/components/buyer/CBAccount.vue
index d9f8ca7..530c083 100644
--- a/src/components/buyer/CBAccount.vue
+++ b/src/components/buyer/CBAccount.vue
@@ -1,5 +1,19 @@
 <script setup>
+import { useRouter } from 'vue-router'
+import AuthRequest from '~/services/auth-request'
+
 const { t } = useI18n()
+
+const router = useRouter()
+
+const signOut = async() => {
+  await AuthRequest.logoutUser().then(() => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    router.push({ path: '/buyer/login' })
+  })
+}
+
 </script>
 
 <template>
@@ -47,11 +61,9 @@ const { t } = useI18n()
       </div>
     </router-link>
 
-    <router-link to="/buyer/login" :title="logout">
-      <div class="items rounded-b-lg">
-        <i class="fa fa-sign-out" /> {{ t('caccount.Logout') }}
-      </div>
-    </router-link>
+    <div class="items rounded-b-lg" @click="signOut">
+      <i class="fa fa-sign-out" /> {{ t('caccount.Logout') }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/header/RMenu.vue b/src/components/header/RMenu.vue
index de98f4b..98cd2c6 100644
--- a/src/components/header/RMenu.vue
+++ b/src/components/header/RMenu.vue
@@ -1,5 +1,18 @@
 <script setup>
+import { useRouter } from 'vue-router'
+import AuthRequest from '~/services/auth-request'
 const { t } = useI18n()
+
+const router = useRouter()
+
+const signOut = async() => {
+  await AuthRequest.logoutUser().then(() => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    router.push({ path: '/buyer/login' })
+  })
+}
+
 </script>
 
 <template>
@@ -54,7 +67,7 @@ const { t } = useI18n()
               {{ t('header.login') }} <ILogin />
             </a>
           </li>
-          <li class="menu-child-item">
+          <li class="menu-child-item" @click="signOut">
             <a href="/buyer/login" class="menu-child-link">
               {{ t('header.sign out') }} <ILogout />
             </a>
diff --git a/src/helpers/error.ts b/src/helpers/error.ts
index 8ee26c8..091bd02 100644
--- a/src/helpers/error.ts
+++ b/src/helpers/error.ts
@@ -1 +1 @@
-export const handleError = (error: any) => process.stdout.write(error.toJSON())
+export const handleError = (error: any) => (`Error message: ${error.message}`)
diff --git a/src/pages/buyer/account/credit.vue b/src/pages/buyer/account/credit.vue
index fa88de7..364f9cf 100644
--- a/src/pages/buyer/account/credit.vue
+++ b/src/pages/buyer/account/credit.vue
@@ -26,12 +26,12 @@ const payload = reactive({
 
 watchOnce(async() => {
   await AccountRequest.getCreditCard().then((res) => {
-    payload.cardholder_name = res.data.cardholder_name
-    payload.expiry_date = res.data.expiry_date
-    payload.cvv = res.data.cvv
-    payload.registration_address = res.data.registration_address
-    payload.postal_code = res.data.postal_code
-    payload.card_number = res.data.card_number
+    payload.cardholder_name = res
+    payload.expiry_date = res
+    payload.cvv = res
+    payload.registration_address = res
+    payload.postal_code = res
+    payload.card_number = res
   }).catch((error) => {
     return handleError(error)
   })
@@ -99,7 +99,7 @@ const handleDelete = async(e) => {
       </div>
       <div>
         <label>Expiry date</label>
-        <input v-model="payload.expiry_date " type="date" required>
+        <input v-model="payload.expiry_date " type="text" required>
       </div>
       <div>
         <label>Cvv</label>
diff --git a/src/pages/buyer/account/dashboard.vue b/src/pages/buyer/account/dashboard.vue
index 315ad52..d7f8b7a 100644
--- a/src/pages/buyer/account/dashboard.vue
+++ b/src/pages/buyer/account/dashboard.vue
@@ -26,20 +26,35 @@ const payload = reactive({
   avatar_image: 'https://avatars.githubusercontent.com/u/47313528?v=4',
 })
 
-watchOnce(async() => {
+const genderType = reactive([
+  {
+    id: 1,
+    type: 'Gender',
+  },
+  {
+    id: 2,
+    type: 'Male',
+  },
+  {
+    id: 3,
+    type: 'Female',
+  }])
+
+const handleGet = async() => {
   await AccountRequest.getProfile().then((res) => {
-    payload.display_name = res.data.display_name
-    payload.phone = res.data.phone
-    payload.gender = res.data.gender
-    payload.date_of_birth = res.data.date_of_birth
-    payload.avatar_image = res.data.avatar_image
+    payload.display_name = res
+    payload.phone = res
+    payload.gender = res
+    payload.date_of_birth = res.toString()
+    payload.avatar_image = res
   }).catch((error) => {
     return handleError(error)
   })
-})
+}
 
-const updateProfile = async() => {
-  await AccountRequest.updateProfile().then(() => {
+const handleUpdate = async() => {
+  await AccountRequest.updateProfile(payload).then((res) => {
+    handleGet()
     useToast.updateToast('success', 'Profile account has been updated!', true)
   }).catch((error) => {
     return handleError(error)
@@ -47,7 +62,7 @@ const updateProfile = async() => {
 }
 
 const signOut = async() => {
-  await AuthRequest.signOut().then(() => {
+  await AuthRequest.logoutUser().then(() => {
     localStorage.removeItem('token')
     localStorage.removeItem('user')
     router.push({ path: '/buyer/login' })
@@ -67,38 +82,32 @@ const signOut = async() => {
     <div class="welcome py-5">
       <p>
         Hello, <strong>@{{ user.data.username }}</strong><span class="text-xs ml-5">(If not you !<a
-          class="logout text-red-400" @click="signOut"
+          class="logout text-red-400 cursor-pointer" @click="signOut"
         > Logout</a>)</span>
       </p>
     </div>
-    <p class="text-md font-light">
+    <p class="text-sm text-gray-400">
       From your account dashboard. you can easily check &amp; view your
       recent orders, manage your shipping and billing addresses and edit your
       password and account details.
     </p>
 
     <form @submit.prevent="updateProfile">
-      <div class="">
-        <input v-model="payload.display_name" placeholder="Full name" type="email" required>
+      <div>
+        <input v-model="payload.display_name" placeholder="Full name" type="text" required>
       </div>
 
-      <div class="">
+      <div>
         <input v-model="payload.phone" placeholder="Phone name" type="text">
         <select v-model="payload.gender" class="cursor-pointer">
-          <option :value="1">
-            Gender
-          </option>
-          <option :value="2">
-            Male
-          </option>
-          <option :value="3">
-            Female
+          <option v-for="(gender, i) in genderType" :key="i" :value="gender.id">
+            {{ gender.type }}
           </option>
         </select>
       </div>
 
       <div>
-        <input v-model="payload.date_of_birth" placeholder="Date of birth" type="date" required>
+        <input v-model="payload.date_of_birth" placeholder="Date of birth" type="text" required>
       </div>
 
       <div>
@@ -106,7 +115,7 @@ const signOut = async() => {
       </div>
 
       <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="updateProfile">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
           <ISave />Save Changes
         </button>
       </div>
diff --git a/src/pages/buyer/cart.vue b/src/pages/buyer/cart.vue
index b9f3ae2..fa7b469 100644
--- a/src/pages/buyer/cart.vue
+++ b/src/pages/buyer/cart.vue
@@ -5,12 +5,16 @@ meta:
 
 <script setup>
 import { useRouter } from 'vue-router'
-const router = useRouter()
+import { toast } from '~/stores/toast'
+import { handleError } from '~/helpers/error'
+
 useHead({
   title: 'e-shopee | buyer cart',
 })
 const { t } = useI18n()
 
+const router = useRouter()
+
 const onCheckout = computed(() => {
   router.push({ path: '/buyer/checkout' })
 })
@@ -79,7 +83,7 @@ const cartList = reactive([{
 
 <template>
   <div class="cart-container text-center">
-    <table class="table w-full bg-white shadow-md shadow-300">
+    <table class="table w-full shadow-md shadow-300 bg-[#ffffff99] dark:bg-gray-800">
       <thead class="bg-[#F33535] text-white">
         <tr>
           <th class="flex justify-center items-center gap-1">
@@ -160,7 +164,9 @@ const cartList = reactive([{
           </div>
 
           <div class="promoCode mt-5">
-            <p class="w-full italic mb-2">{{ t('cart.promo-code') }}?</p>
+            <p class="w-full italic mb-2">
+              {{ t('cart.promo-code') }}?
+            </p>
             <form action="" method="post" class="flex">
               <input type="text" name="promo" placholder="Enter Code" class="p-2 w-4/5 border-1 border-[#dadada]">
               <button type="submit" class="flex justify-center font-semibold border-1 border-solid border-[#82CA9C] bg-[#82CA9C] hover:border-[#f69679] hover:bg-[#f69679] py-3 rounded-r-3xl w-1/5">
@@ -489,7 +495,6 @@ C216.3,217.7,200.8,213.7,178.1,211.7z"
 <style scoped>
 input[type="number"]{
     border: 1px solid rgb(210, 210, 210);
-    outline: none;
     border-radius: 0.25rem;
     width: 35%;
     padding: 0.25rem;
@@ -501,14 +506,13 @@ input[type="number"]:focus{
 }
 table {
   border-collapse: collapse;
-  border-radius: 0.6em;
+  border-radius: 2rem;
   overflow: hidden;
 }
 th{
   padding: 0.5em 0;
 }
-td {
-  padding: 0.5em;
+td:not(:last-child){
   border-bottom: 1px solid rgb(212, 212, 212);
 }
 /* *******************CHECKOUT BOT CONTAINER ******************/
diff --git a/src/pages/buyer/register.vue b/src/pages/buyer/register.vue
index 8f7e6da..5dcfdd0 100644
--- a/src/pages/buyer/register.vue
+++ b/src/pages/buyer/register.vue
@@ -28,18 +28,23 @@ const payload = reactive({
   password_confirmation: '',
 })
 
+const verify = () => {
+  EmailRequest.createVerifyEmail().then(() => {
+
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
 const handleSubmit = async(e) => {
   e.preventDefault()
   useLoading.isLoading = true
   await AuthRequest.registerUser(payload)
     .then((res) => {
-      EmailRequest.createVerifyEmail().then(() => {
-        router.push({ path: '/buyer/login' })
-        useLoading.isLoading = false
-        useToast.updateToast('success', `Hi, ${payload.username}. Check verification email sent in your mailbox!`, true)
-      }).catch((error) => {
-        return handleError(error)
-      })
+      // verify()
+      router.push({ path: '/buyer/login' })
+      useLoading.isLoading = false
+      useToast.updateToast('success', `Hi, ${payload.username}. Check verification email sent in your mailbox!`, true)
     })
     .catch((error) => {
       return handleError(error)
@@ -83,14 +88,14 @@ const handleSubmit = async(e) => {
           <div class="icon">
             <IBRepeat />
           </div>
-          <input v-model="payload.password_confirmation" type="password" placeholder="Password confirmation" required>
+          <input v-model="payload.password_confirmation" type="password" placeholder="Password confirmation" autocomplete="true" required>
         </div>
         <div>
           <button type="submit" class="capitalize bg-[#5ABBC1] font-semibold text-white text-md rounded-md py-1.75 w-full" :disabled="payload.email === ''" @click="handleSubmit">
             {{ t('auth.b-register-btn') }}
           </button>
           <p class="text-left text-gray-400 text-sm mt-3">
-            {{t('auth.b-register-already-account')}}? <a href="/buyer/login" class="text-[#5ABBC1] capitalize">{{ t('auth.b-register-refer') }}</a>
+            {{ t('auth.b-register-already-account') }}? <a href="/buyer/login" class="text-[#5ABBC1] capitalize">{{ t('auth.b-register-refer') }}</a>
           </p>
         </div>
       </form>
diff --git a/src/services/axios-instance.js b/src/services/axios-instance.js
index cbfb088..e87123c 100644
--- a/src/services/axios-instance.js
+++ b/src/services/axios-instance.js
@@ -5,16 +5,15 @@ const AxiosInstance = axios.create({
   baseURL: `${import.meta.env.VITE_BASE_DOMAIN}/api/v2`,
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': localStorage.getItem('token'),
+    // 'Authorization': localStorage.getItem('token'),
   },
   paramsSerializer: params => queryString.stringify(params),
   responseEncoding: 'utf8',
 })
-
 AxiosInstance.interceptors.request.use(
   async(request) => {
-    // if (localStorage.getItem('token'))
-    //   request.headers.token = `Bearer ${localStorage.getItem('token')}`
+    const token = localStorage.getItem('token')
+    request.headers.Authorization = token ? `Bearer ${token}` : ''
     return request
   },
   (error) => {

From 06b7a62463c865174e703bf0c3e47df82b517be5 Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Thu, 12 May 2022 10:42:53 +0700
Subject: [PATCH 5/6] feat: add shop register

---
 .env.production                            |   2 +-
 src/layouts/seller/shop/LSShopRegister.vue |   8 ++
 src/pages/buyer/register.vue               |   2 +-
 src/pages/seller/shop/register.vue         | 112 +++++++++++++++++++++
 src/services/axios-instance.js             |   1 +
 5 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/seller/shop/LSShopRegister.vue
 create mode 100644 src/pages/seller/shop/register.vue

diff --git a/.env.production b/.env.production
index ec68e32..bdc4c3c 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-VITE_BASE_DOMAIN=https://127.0.0.1:444
\ No newline at end of file
+VITE_BASE_DOMAIN=https://tp-o.tk/ec
\ No newline at end of file
diff --git a/src/layouts/seller/shop/LSShopRegister.vue b/src/layouts/seller/shop/LSShopRegister.vue
new file mode 100644
index 0000000..8ab9576
--- /dev/null
+++ b/src/layouts/seller/shop/LSShopRegister.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="text-gray-700 dark:text-gray-200 overflow-x-hidden bg-[#F6F6F6] h-screen">
+    <SHead />
+    <div class="w-screen bg-[#F6F6F6] dark:bg-black">
+      <router-view />
+    </div>
+  </main>
+</template>
diff --git a/src/pages/buyer/register.vue b/src/pages/buyer/register.vue
index 5dcfdd0..523da99 100644
--- a/src/pages/buyer/register.vue
+++ b/src/pages/buyer/register.vue
@@ -41,7 +41,7 @@ const handleSubmit = async(e) => {
   useLoading.isLoading = true
   await AuthRequest.registerUser(payload)
     .then((res) => {
-      // verify()
+      verify()
       router.push({ path: '/buyer/login' })
       useLoading.isLoading = false
       useToast.updateToast('success', `Hi, ${payload.username}. Check verification email sent in your mailbox!`, true)
diff --git a/src/pages/seller/shop/register.vue b/src/pages/seller/shop/register.vue
new file mode 100644
index 0000000..8eb76e9
--- /dev/null
+++ b/src/pages/seller/shop/register.vue
@@ -0,0 +1,112 @@
+<route lang="yaml">
+meta:
+  layout: seller/shop/LSShopRegister
+</route>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { toast } from '~/utils/toast'
+import ShopRequest from '~/services/shop-request'
+import { loading } from '~/stores/loading'
+import { handleError } from '~/helpers/error'
+
+useHead({
+  title: 'seller | shop register',
+})
+const { t } = useI18n()
+const router = useRouter()
+const useLoading = loading()
+const useToast = toast()
+
+const payload = reactive({
+  name: '',
+  slug: '',
+  address: '',
+  phone: '',
+})
+
+const handleCreate = async() => {
+  useLoading.isLoading = true
+  await ShopRequest.createShops(payload).then((res) => {
+    router.push('/seller/home')
+    useLoading.isLoading = false
+    useToast.updateToast('success', 'Your shop information has been created successfull!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+</script>
+
+<template>
+  <div class="shop_register_container w-full p-10 flex justify-center">
+    <div class="bg-white max-w-300 w-300 grid shadow-sm shadow-gray-500/50 rounded-md divide-1 divide-solid divide-y divide-light-800 p-10">
+      <div class="head-profile grid justify-center items-center p-5">
+        <div class="flex justify-center items-center gap-3">
+          <div class="flex items-center bg-orange-600 rounded-full w-2.5 h-2.5" />
+          <div class="flex items-center bg-orange-600 rounded-full w-sm h-0.75" />
+          <div class="flex items-center bg-orange-600 rounded-full w-2.5 h-2.5" />
+        </div>
+        <div class="flex justify-center items-center justify-between gap-5 text-sm text-gray-500">
+          <p>Shop information settings</p>
+          <div />
+          <p>Post products for sale</p>
+        </div>
+      </div>
+      <form class="grid justify-center p-5 gap-8">
+        <div class="register_field w-lg">
+          <div>
+            <label><span>*</span> Shop name</label>
+            <div class="w-full border-1 border-red-500 border-solid flex items-center py-1 rounded-md divide-x divide-solid divide-3 divide-gray-300">
+              <input id="add-product-name" v-model="payload.name" type="text" name="add-product-name" class="w-full px-2" placeholder="Input..." pattern="[A-Za-z0-9]{120}" required>
+              <p class="flex justify-around opacity-60 text-xs px-2">
+                {{ payload.name.length }}/30
+              </p>
+            </div>
+          </div>
+          <div>
+            <label><span>*</span> Shop ID</label>
+            <input v-model="payload.slug" type="text" class="w-full px-3 py-1 border-1 border-[#e9e9e9] rounded-md" placeholder="Input shop id..." required>
+          </div>
+          <div>
+            <label><span>*</span> New address</label>
+            <input v-model="payload.address" type="text" class="w-full px-3 py-1 border-1 border-[#e9e9e9] rounded-md" placeholder="Input address..." required>
+          </div>
+          <div>
+            <label><span>*</span> Phone</label>
+            <div class="w-full border-1 border-[#e9e9e9] border-solid flex items-center py-1 rounded-md divide-x divide-solid divide-3 divide-gray-300">
+              <p class="flex justify-around opacity-60 text-xs px-2">
+                +84
+              </p>
+              <input v-model="payload.phone" type="text" name="add-product-name" class="w-full px-2" placeholder="Input phone number..." pattern="[A-Za-z0-9]{120}" required>
+            </div>
+          </div>
+        </div>
+        <div class="col-span-5 flex justify-center items-center">
+          <button type="submit" class="bg-[#E54A2B] text-white rounded-md px-10 py-1.5 my-5 shadow-md shadow-gray-300" @click="handleCreate">
+            Create
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register_field > div{
+    display: grid;
+    grid-template-columns: 30% 60%;
+    grid-gap: 2rem;
+    margin-top: 1.25rem;
+}
+.register_field label{
+    text-align: right;
+    font-size: 1em;
+}
+.register_field label span{
+    color: orangered;
+   font-size: 0.8em;
+}
+.register_field > div input::placeholder{
+    font-size: 0.8em;
+}
+</style>
diff --git a/src/services/axios-instance.js b/src/services/axios-instance.js
index e87123c..9314c27 100644
--- a/src/services/axios-instance.js
+++ b/src/services/axios-instance.js
@@ -5,6 +5,7 @@ const AxiosInstance = axios.create({
   baseURL: `${import.meta.env.VITE_BASE_DOMAIN}/api/v2`,
   headers: {
     'Content-Type': 'application/json',
+    'X-Requested-With': 'XMLHttpRequest',
     // 'Authorization': localStorage.getItem('token'),
   },
   paramsSerializer: params => queryString.stringify(params),

From 90d7ad0997473abf35da56edc6f69aa93687faa4 Mon Sep 17 00:00:00 2001
From: thuongtruong1009 <ititiu19228@student.hcmiu.edu.vn>
Date: Thu, 12 May 2022 10:52:43 +0700
Subject: [PATCH 6/6] handle sumit register

---
 src/pages/seller/shop/register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/seller/shop/register.vue b/src/pages/seller/shop/register.vue
index 8eb76e9..7ea520a 100644
--- a/src/pages/seller/shop/register.vue
+++ b/src/pages/seller/shop/register.vue
@@ -5,7 +5,7 @@ meta:
 
 <script setup>
 import { useRouter } from 'vue-router'
-import { toast } from '~/utils/toast'
+import { toast } from '~/stores/toast'
 import ShopRequest from '~/services/shop-request'
 import { loading } from '~/stores/loading'
 import { handleError } from '~/helpers/error'