Merge pull request #217 from alexookah/minor_fix_issues

Logout using refreshCart
beljp · Aug 19, 2024 · c4deb6b · c4deb6b
2 parents 7ad928f + 1c6f8bc
commit c4deb6b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/woonuxt_base/app/composables/useAuth.ts b/woonuxt_base/app/composables/useAuth.ts
@@ -2,7 +2,7 @@ import { GqlLogin, GqlLogout, GqlRegisterCustomer, GqlResetPasswordEmail, GqlGet
 import type { RegisterCustomerInput, CreateAccountInput } from '#gql';
 
 export const useAuth = () => {
-  const { refreshCart, emptyCart, cart } = useCart();
+  const { refreshCart, cart } = useCart();
   const { logGQLError, clearAllCookies } = useHelpers();
 
   const customer = useState<Customer>('customer', () => ({ billing: {}, shipping: {} }));
@@ -47,20 +47,21 @@ export const useAuth = () => {
 
   // Log out the user
   const logoutUser = async (): Promise<{ success: boolean; error: any }> => {
-    viewer.value = null;
-    cart.value = null;
-    customer.value = { billing: {}, shipping: {} };
-
+    isPending.value = true;
     try {
       const { logout } = await GqlLogout();
       if (logout) {
+        await refreshCart();
         clearAllCookies();
-        await emptyCart();
+        viewer.value = null;
+        customer.value = { billing: {}, shipping: {} };
       }
       return { success: true, error: null };
     } catch (error) {
       logGQLError(error);
       return { success: false, error };
+    } finally {
+      isPending.value = false;
     }
   };
 

diff --git a/woonuxt_base/app/pages/my-account/index.vue b/woonuxt_base/app/pages/my-account/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-const { logoutUser, viewer, customer, avatar } = useAuth();
+const { logoutUser, viewer, customer, avatar, isPending } = useAuth();
 const { cart } = useCart();
 const route = useRoute();
 
 const activeTab = computed(() => route.query.tab || 'my-details');
-const showLoader = computed(() => !viewer && !customer);
+const showLoader = computed(() => !cart.value);
 
 useSeoMeta({
   title: `My Account`,
@@ -13,7 +13,7 @@ useSeoMeta({
 
 <template>
   <div class="container min-h-[600px]">
-    <div v-if="showLoader || !cart" class="flex flex-col min-h-[500px]">
+    <div v-if="showLoader" class="flex flex-col min-h-[500px]">
       <LoadingIcon class="m-auto" />
     </div>
     <template v-else>
@@ -27,8 +27,8 @@ useSeoMeta({
               <span v-if="viewer?.email" class="text-gray-400 font-light" :title="viewer?.email">{{ viewer?.email }}</span>
             </div>
             <button class="flex text-gray-700 items-center flex-col p-2 px-4 rounded-lg hover:bg-white hover:text-red-700 lg:hidden" @click="logoutUser">
-              <LoadingIcon size="22" />
-              <Icon name="ion:log-out-outline" size="22" />
+              <LoadingIcon v-if="isPending" size="22" />
+              <Icon v-else name="ion:log-out-outline" size="22" />
               <small>{{ $t('messages.account.logout') }}</small>
             </button>
           </section>
@@ -54,7 +54,8 @@ useSeoMeta({
           <template class="hidden lg:block">
             <hr class="my-8" />
             <button class="flex text-gray-700 items-center gap-4 p-2 px-4 w-full rounded-lg hover:bg-white hover:text-red-700" @click="logoutUser">
-              <Icon name="ion:log-out-outline" size="22" />
+              <LoadingIcon v-if="isPending" size="22" />
+              <Icon v-else name="ion:log-out-outline" size="22" />
               {{ $t('messages.account.logout') }}
             </button>
           </template>