Added country

src/components/account_view/AccountViewCom.jsx

@@ -1,80 +1,79 @@
-import {useEffect} from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import {useLocation, useNavigate} from 'react-router-dom'
+import { useLocation, useNavigate } from "react-router-dom";
 
-import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import RouteLinks from '../../RouteLinks'
-import { getAccountView } from '../../services/siteServices'
-import queryKeys from '../../services/queryKeys'
+import BreadcrumbCom from "../breadcrumb/BreadcrumbCom";
+import RouteLinks from "../../RouteLinks";
+import { getAccountView } from "../../services/siteServices";
+import queryKeys from "../../services/queryKeys";
 import CustomerAccountView from "./CustomerAccountView";
 import AccountProfileView from "./AccountProfileView";
 import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
 import CustomerPaymentsView from "./CustomerPaymentsView";
 
 export default function AccountViewCom() {
+  const queryClient = useQueryClient();
 
-    const queryClient = useQueryClient()
+  const { state } = useLocation();
+  const navigate = useNavigate();
 
-    const {state} = useLocation()
-    const navigate = useNavigate()
+  useEffect(() => {
+    if (!state?.memberUID) {
+      navigate(RouteLinks.homePage, { replace: true });
+    }
+  }, [navigate, state?.memberUID]);
 
-    useEffect(()=>{
-        if(!state?.memberUID){
-            navigate(RouteLinks.homePage, {replace: true})
-        }
-    },[navigate, state?.memberUID])
+  const { data, isFetching, isError, error } = useQuery({
+    queryKey: queryKeys.account_view,
+    queryFn: () => {
+      // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+      const reqData = {
+        member_uid: state?.memberUID,
+        // page,
+        // ...filterData
+      };
+      return getAccountView(reqData);
+    },
+    staleTime: 0, //0 mins
+  });
+  const accountsViewData = data?.data; // ACCOUNT VIEW DATA
+  const account_info = accountsViewData?.account;
+  const account_profile = accountsViewData?.account_profile;
+  const subscriptions = accountsViewData?.subscriptions;
+  const payments = accountsViewData?.payments;
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.account_view,
-        queryFn: () => {
-            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
-            const reqData = {
-                member_uid: state?.memberUID
-                // page,
-                // ...filterData
-            }
-            return getAccountView(reqData)
-        },
-        staleTime: 0 //0 mins
-    })
-    const accountsViewData = data?.data // ACCOUNT VIEW DATA
-    const account_info = accountsViewData?.account
-    const account_profile = accountsViewData?.account_profile
-    const subscriptions = accountsViewData?.subscriptions
-    const payments = accountsViewData?.payments
-    // console.log('DATA', payments, subscriptions)
+  useEffect(() => {
+    queryClient.refetchQueries({
+      queryKey: [...queryKeys.account_view],
+      // type: 'active',
+      // exact: true,
+    });
+  }, [queryClient, state?.memberUID]);
 
-    useEffect(()=>{
-        queryClient.refetchQueries({
-            queryKey: [...queryKeys.account_view],
-            // type: 'active',
-            // exact: true,
-        })
-    },[queryClient, state?.memberUID])
+  return (
+    <div className="w-full flex flex-col gap-8">
+      <BreadcrumbCom
+        title={`Account View [${state?.memberUID}]`}
+        paths={["Dashboard", "Account View"]}
+      />
 
-    return (
-        <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/>
-
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isFetching ? 
-                <>
-                    <p className='text-slate-800'>Loading...</p>
-                </>
-                : isError ?
-                    <p className='text-red-500'>{error.message}</p>
-                :
-                        <>
-                            <CustomerAccountView accountInfo={account_info} />
-                            <AccountProfileView profile={account_profile} />
-                            <CustomerSubscriptionsView subscriptions={subscriptions} />
-                            <CustomerPaymentsView payments={payments} />
-                        </>
-
-                }
-
-            </div>
-        </div>
-    )
-}
+      <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
+        {isFetching ? (
+          <>
+            <p className="text-slate-800">Loading...</p>
+          </>
+        ) : isError ? (
+          <p className="text-red-500">{error.message}</p>
+        ) : (
+          <>
+            <CustomerAccountView accountInfo={account_info} />
+            <AccountProfileView profile={account_profile} />
+            <CustomerSubscriptionsView subscriptions={subscriptions} />
+            <CustomerPaymentsView payments={payments} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/account_view/CustomerAccountView.jsx

@@ -26,7 +26,9 @@ export default function CustomerAccountView({accountInfo}) {
                                 <th scope="col" className="px-2">
                                     Email
                                 </th>
-
+                                <th scope="col" className="px-2">
+                                    Country
+                                </th>
                                 <th scope="col" className="px-2 text-right">
                                     Action
                                 </th>
@@ -60,7 +62,11 @@ export default function CustomerAccountView({accountInfo}) {
                                             <div className="text-base font-semibold">{accountInfo?.email}</div>
                                         </div>
                                     </td>
-
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.country}</div>
+                                        </div>
+                                    </td>
                                     <td className="px-2 text-right">
                                         <div className='flex items-center justify-end gap-3 md:gap-4'>
                                             <div