From 398eb0a2dfda031e3fe1b5592fe87f0ac5fcec62 Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 16 May 2024 14:07:53 +0700
Subject: [PATCH 1/7] [RED] update test for payment with transaction history

---
 .../payment/payment-details-with-url.test.tsx |  26 ++--
 __tests__/payment/payment-fail.test.tsx       |  72 +++++++++++
 __tests__/payment/payment-success.test.tsx    |  33 ++---
 __tests__/profile/profile.test.tsx            | 122 +++++++++++++++++-
 4 files changed, 224 insertions(+), 29 deletions(-)
 create mode 100644 __tests__/payment/payment-fail.test.tsx

diff --git a/__tests__/payment/payment-details-with-url.test.tsx b/__tests__/payment/payment-details-with-url.test.tsx
index 0c994bf..2fa5b36 100644
--- a/__tests__/payment/payment-details-with-url.test.tsx
+++ b/__tests__/payment/payment-details-with-url.test.tsx
@@ -8,17 +8,19 @@ jest.mock('next/navigation', () => ({
   })),
 }))
 
+const mockTransaction = {
+  package: { name: 'Test Package' },
+  payment_type: 'Test Payment Type',
+  payment_merchant: 'Test Payment Merchant',
+  midtrans_url: 'https://example.com/midtrans',
+}
+
 jest.mock('@/redux/api/paymentApi', () => ({
   useLazyGetTransactionQuery: jest.fn(() => [
     jest.fn(),
     {
       data: {
-        transaction_detail: {
-          package: { name: 'Test Package' },
-          payment_type: 'Test Payment Type',
-          payment_merchant: 'Test Payment Merchant',
-          midtrans_url: 'https://example.com/midtrans',
-        },
+        transaction_detail: mockTransaction,
       },
       isLoading: false,
     },
@@ -36,10 +38,16 @@ describe('Payment Detail Page With Midtrans Url', () => {
       expect(queryByTestId('loader')).not.toBeInTheDocument()
     })
 
-    expect(getByText('Transaction Detail')).toBeInTheDocument()
+    expect(getByText('Transaction detail')).toBeInTheDocument()
     expect(getByText('Test Package')).toBeInTheDocument()
-    expect(getByText('Test Payment Type')).toBeInTheDocument()
-    expect(getByText('Test Payment Merchant')).toBeInTheDocument()
+    expect(getByText('Payment Type')).toBeInTheDocument()
+    expect(getByText('Merchant')).toBeInTheDocument()
+    expect(
+      getByText(mockTransaction.payment_type.toUpperCase())
+    ).toBeInTheDocument()
+    expect(
+      getByText(mockTransaction.payment_merchant.toUpperCase())
+    ).toBeInTheDocument()
 
     fireEvent.click(getByText('Continue Transaction'))
 
diff --git a/__tests__/payment/payment-fail.test.tsx b/__tests__/payment/payment-fail.test.tsx
new file mode 100644
index 0000000..dac830d
--- /dev/null
+++ b/__tests__/payment/payment-fail.test.tsx
@@ -0,0 +1,72 @@
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
+import PaymentPage from '@/app/payment/page'
+
+jest.mock('next/link', () => {
+  const MockedLink = ({ children, href }: any) => <a href={href}>{children}</a>
+
+  MockedLink.displayName = 'MockedNextLink'
+
+  return MockedLink
+})
+
+jest.mock('next/navigation', () => ({
+  useSearchParams: jest.fn(() => ({
+    get: jest.fn((param) => {
+      switch (param) {
+        case 'order_id':
+          return 'test_order_id'
+        case 'transaction_status':
+          return 'deny'
+        default:
+          return null
+      }
+    }),
+  })),
+}))
+
+jest.mock('@/redux/api/paymentApi', () => ({
+  useLazyGetTransactionQuery: jest.fn(),
+}))
+describe('PaymentSuccess Component', () => {
+  it('renders the success message when data is loaded', async () => {
+    ;(useLazyGetTransactionQuery as jest.Mock).mockReturnValue([
+      jest.fn(),
+      {
+        data: {
+          transaction_detail: {
+            id: 'transaction_id',
+            package: {
+              id: 2,
+              name: 'Premium',
+            },
+            midtrans_url: 'http:example.com',
+            midtrans_transaction_id: 'midtrans_id',
+            order_id: 'order_id',
+            price: 10000,
+            checkout_time: '2024-05-06T14:49:19Z',
+            expiry_time: '2024-05-06T15:04:19Z',
+            payment_type: 'qris',
+            payment_merchant: 'gopay',
+            status: 'deny',
+          },
+        },
+        isLoading: false,
+      },
+    ])
+
+    const { getByText, getByRole } = render(<PaymentPage />)
+
+    await waitFor(() => {
+      expect(getByText('Payment Failed')).toBeInTheDocument()
+      const button = getByRole('button', { name: 'See Transaction History' })
+      expect(button.closest('a')).toHaveAttribute(
+        'href',
+        '/profile?tab=history'
+      )
+    })
+  })
+
+
+})
diff --git a/__tests__/payment/payment-success.test.tsx b/__tests__/payment/payment-success.test.tsx
index 33001b0..87b67be 100644
--- a/__tests__/payment/payment-success.test.tsx
+++ b/__tests__/payment/payment-success.test.tsx
@@ -1,7 +1,7 @@
 import { render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import PaymentSuccessPage from '@/app/payment/success/page'
 import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
+import PaymentPage from '@/app/payment/page'
 
 jest.mock('next/link', () => {
   const MockedLink = ({ children, href }: any) => <a href={href}>{children}</a>
@@ -13,7 +13,16 @@ jest.mock('next/link', () => {
 
 jest.mock('next/navigation', () => ({
   useSearchParams: jest.fn(() => ({
-    get: jest.fn(() => 'test_order_id'),
+    get: jest.fn((param) => {
+      switch (param) {
+        case 'order_id':
+          return 'test_order_id'
+        case 'transaction_status':
+          return 'settlement'
+        default:
+          return null
+      }
+    }),
   })),
 }))
 
@@ -47,30 +56,16 @@ describe('PaymentSuccess Component', () => {
       },
     ])
 
-    const { getByText, getByRole } = render(<PaymentSuccessPage />)
+    const { getByText, getByRole } = render(<PaymentPage />)
 
     await waitFor(() => {
       expect(getByText('Payment Success')).toBeInTheDocument()
       expect(getByText('Premium')).toBeInTheDocument()
-      const button = getByRole('button', { name: 'Go to transactions' })
+      const button = getByRole('button', { name: 'See Transaction History' })
       expect(button.closest('a')).toHaveAttribute(
         'href',
-        '/payment/transactions/'
+        '/profile?tab=history'
       )
     })
   })
-
-  it('shows loader when data is still loading', () => {
-    ;(useLazyGetTransactionQuery as jest.Mock).mockReturnValue([
-      jest.fn(),
-      {
-        data: null,
-        isLoading: true,
-      },
-    ])
-
-    const { getByTestId } = render(<PaymentSuccessPage />)
-
-    expect(getByTestId('loader')).toBeInTheDocument()
-  })
 })
diff --git a/__tests__/profile/profile.test.tsx b/__tests__/profile/profile.test.tsx
index f6a2f7e..53decae 100644
--- a/__tests__/profile/profile.test.tsx
+++ b/__tests__/profile/profile.test.tsx
@@ -1,11 +1,24 @@
 import '@testing-library/jest-dom'
 import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  render,
+  screen,
+  fireEvent,
+  getAllByAltText,
+} from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { store } from '@/redux/store'
 import { useGetProfileQuery, useGetEventsQuery } from '@/redux/api/profileApi'
 import Profile from '@/app/profile/page'
 import { useGetSubscriptionsQuery } from '@/redux/api/subscriptionApi'
+import { useGetTransactionListQuery } from '@/redux/api/paymentApi'
+import dayjs from 'dayjs'
+
+jest.mock('next/navigation', () => ({
+  useSearchParams: jest.fn(() => ({
+    get: jest.fn(() => undefined),
+  })),
+}))
 
 const mockEventsData = [
   {
@@ -19,6 +32,53 @@ const mockEventsData = [
     services: 'Live Music, Food Stalls, Security',
   },
 ]
+const mockTransactionData = [
+  {
+    id: 'mock-id-1',
+    package: {
+      name: 'Premium',
+    },
+    midtrans_url: null,
+    midtrans_transaction_id: 'mid-1',
+    order_id: 'ord-1',
+    price: 10000,
+    checkout_time: '2024-05-06T14:49:19Z',
+    expiry_time: '2024-05-06T15:04:19Z',
+    payment_type: 'qris',
+    payment_merchant: 'gopay',
+    status: 'settlement',
+  },
+  {
+    id: 'mock-id-2',
+    package: {
+      name: 'Premium',
+    },
+    midtrans_url: null,
+    midtrans_transaction_id: 'mid-2',
+    order_id: 'ord-2',
+    price: 10000,
+    checkout_time: '2024-05-06T14:49:19Z',
+    expiry_time: '2024-05-06T15:04:19Z',
+    payment_type: 'qris',
+    payment_merchant: 'gopay',
+    status: 'failed',
+  },
+  {
+    id: 'mock-id-3',
+    package: {
+      name: 'Premium',
+    },
+    midtrans_url: null,
+    midtrans_transaction_id: 'mid-3',
+    order_id: 'ord-3',
+    price: 10000,
+    checkout_time: '2024-05-06T14:49:19Z',
+    expiry_time: '2024-05-06T15:04:19Z',
+    payment_type: 'qris',
+    payment_merchant: 'gopay',
+    status: 'pending',
+  },
+]
 
 jest.mock('@/redux/api/subscriptionApi', () => ({
   useGetSubscriptionsQuery: jest.fn().mockReturnValue({
@@ -53,6 +113,10 @@ jest.mock('@/redux/api/profileApi', () => ({
   useGetEventsQuery: jest.fn(),
 }))
 
+jest.mock('@/redux/api/paymentApi', () => ({
+  useGetTransactionListQuery: jest.fn(),
+}))
+
 Object.defineProperty(window, 'location', {
   value: { pathname: '/mock-path' },
 })
@@ -75,6 +139,10 @@ describe('Profile Component', () => {
       isLoading: false,
       isError: false,
     })
+    ;(useGetTransactionListQuery as jest.Mock).mockReturnValue({
+      data: mockTransactionData,
+      isLoading: false,
+    })
   })
 
   it('displays error state correctly', () => {
@@ -190,4 +258,56 @@ describe('Profile Component', () => {
       </Provider>
     )
   })
+
+  it('displays transaction information when there is at least one transaction', () => {
+    const myInitialState = 'history'
+    React.useState = jest.fn().mockReturnValue([myInitialState, {}])
+
+    const { getByText, getAllByText } = render(
+      <Provider store={store}>
+        <Profile />
+      </Provider>
+    )
+
+    expect(getByText('Checkout Time')).toBeInTheDocument()
+    expect(getByText('Package Plan')).toBeInTheDocument()
+    expect(getByText('Price')).toBeInTheDocument()
+    expect(getByText('Expiry Time')).toBeInTheDocument()
+    expect(getByText('Status')).toBeInTheDocument()
+    expect(getByText(mockTransactionData[0].status)).toBeInTheDocument()
+    expect(getByText(mockTransactionData[0].price)).toBeInTheDocument()
+    expect(
+      getByText(
+        dayjs(mockTransactionData[0].checkout_time).format(
+          'ddd, D MMM YY HH:mm'
+        )
+      )
+    ).toBeInTheDocument()
+    expect(
+      getByText(
+        dayjs(mockTransactionData[0].expiry_time).format('ddd, D MMM YY HH:mm')
+      )
+    ).toBeInTheDocument()
+  })
+
+  it('displays no transaction information', () => {
+    const myInitialState = 'history'
+    React.useState = jest.fn().mockReturnValue([myInitialState, {}])
+    ;(useGetTransactionListQuery as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: false,
+    })
+    const { getByText } = render(
+      <Provider store={store}>
+        <Profile />
+      </Provider>
+    )
+
+    expect(getByText('Checkout Time')).toBeInTheDocument()
+    expect(getByText('Package Plan')).toBeInTheDocument()
+    expect(getByText('Price')).toBeInTheDocument()
+    expect(getByText('Expiry Time')).toBeInTheDocument()
+    expect(getByText('Status')).toBeInTheDocument()
+    expect(getByText('No transactions recorded')).toBeInTheDocument()
+  })
 })

From f3d3387e3eda7b4d2fde09743535cd8598323b29 Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 16 May 2024 14:08:49 +0700
Subject: [PATCH 2/7] [RED] update test suited for payment status page

---
 __tests__/payment/payment-fail.test.tsx    |  2 -
 src/app/payment/success/PaymentSuccess.tsx | 45 ----------------------
 src/app/payment/success/page.tsx           |  4 --
 3 files changed, 51 deletions(-)
 delete mode 100644 src/app/payment/success/PaymentSuccess.tsx
 delete mode 100644 src/app/payment/success/page.tsx

diff --git a/__tests__/payment/payment-fail.test.tsx b/__tests__/payment/payment-fail.test.tsx
index dac830d..afe2f85 100644
--- a/__tests__/payment/payment-fail.test.tsx
+++ b/__tests__/payment/payment-fail.test.tsx
@@ -67,6 +67,4 @@ describe('PaymentSuccess Component', () => {
       )
     })
   })
-
-
 })
diff --git a/src/app/payment/success/PaymentSuccess.tsx b/src/app/payment/success/PaymentSuccess.tsx
deleted file mode 100644
index 54fff71..0000000
--- a/src/app/payment/success/PaymentSuccess.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { Button } from '@/components/elements/Button'
-import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
-import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
-
-export const PaymentSuccess = () => {
-  const searchParams = useSearchParams()
-  const orderId = searchParams.get('order_id')
-  const [getTransaction, { data, isLoading }] = useLazyGetTransactionQuery()
-  useEffect(() => {
-    if (orderId) {
-      getTransaction({ order_id: orderId })
-    }
-  }, [orderId])
-
-  return (
-    <div className="h-[90vh]">
-      {isLoading ? (
-        <div className="flex flex-col justify-center items-center h-full">
-          <div data-testid="loader" className="loader" />
-        </div>
-      ) : (
-        <div className="flex flex-col gap-3 items-center justify-center h-full">
-          <p className="text-3xl lg:text-5xl font-bold text-emerald-600">
-            Payment Success
-          </p>
-          <p className="text-xl">
-            Enjoy the{' '}
-            <span className="font-bold">
-              {data?.transaction_detail.package.name}
-            </span>{' '}
-            Package
-          </p>
-          <i className="i-ph-check-circle-duotone size-20 text-emerald-400 aspect-square" />
-          <Link href={'/payment/transactions/'}>
-            <Button>Go to transactions</Button>
-          </Link>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/app/payment/success/page.tsx b/src/app/payment/success/page.tsx
deleted file mode 100644
index 3c16314..0000000
--- a/src/app/payment/success/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PaymentSuccess } from './PaymentSuccess'
-export default function PaymentSuccessPage() {
-  return <PaymentSuccess />
-}

From 01d09709c35baf45d2af04883ec08718a2dd5b23 Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 16 May 2024 14:10:48 +0700
Subject: [PATCH 3/7] [GREEN] implement transaction history

---
 src/app/payment/PaymentDetail.tsx        |  39 ++++++-
 src/app/payment/PaymentError.tsx         |  27 +++++
 src/app/payment/PaymentSuccess.tsx       |  32 ++++++
 src/app/profile/SubscriptionHistory.tsx  |  12 +--
 src/app/profile/TransactionHistory.tsx   | 131 +++++++++++++++++++++++
 src/app/profile/constant.ts              |  25 +++++
 src/app/profile/page.tsx                 |  19 +++-
 src/components/elements/Button/index.tsx |   9 +-
 src/types/payment.ts                     |  22 ++++
 src/types/subscription.ts                |   1 +
 src/utils/getTransactionStatus.ts        |  23 ++++
 11 files changed, 321 insertions(+), 19 deletions(-)
 create mode 100644 src/app/payment/PaymentError.tsx
 create mode 100644 src/app/payment/PaymentSuccess.tsx
 create mode 100644 src/app/profile/TransactionHistory.tsx
 create mode 100644 src/utils/getTransactionStatus.ts

diff --git a/src/app/payment/PaymentDetail.tsx b/src/app/payment/PaymentDetail.tsx
index b66de4d..665d0c3 100644
--- a/src/app/payment/PaymentDetail.tsx
+++ b/src/app/payment/PaymentDetail.tsx
@@ -1,18 +1,34 @@
 'use client'
 import { Button } from '@/components/elements/Button'
 import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
+import { transactionErrorStatuses, TransactionStatus } from '@/types/payment'
 import { useSearchParams } from 'next/navigation'
 import React, { useEffect } from 'react'
+import { PaymentSuccess } from './PaymentSuccess'
+import { PaymentError } from './PaymentError'
+import Link from 'next/link'
 
 export const PaymentDetail = () => {
   const searchParams = useSearchParams()
   const orderId = searchParams.get('order_id')
+  const status = searchParams.get('transaction_status')
+
   const [getTransaction, { data, isLoading }] = useLazyGetTransactionQuery()
   useEffect(() => {
     if (orderId) {
       getTransaction({ order_id: orderId })
     }
   }, [orderId])
+
+  if (status == 'settlement' || status == 'capture')
+    return (
+      <PaymentSuccess
+        status={status ?? ''}
+        packageName={data?.transaction_detail.package.name ?? ''}
+      />
+    )
+  if (transactionErrorStatuses.includes(status ?? ''))
+    return <PaymentError status={status ?? ''} />
   return (
     <div>
       {isLoading ? (
@@ -21,11 +37,21 @@ export const PaymentDetail = () => {
         </div>
       ) : (
         data && (
-          <div className="flex flex-col items-center justify-center gap-3">
-            <p>Transaction Detail</p>
-            <p>{data.transaction_detail.package.name}</p>
-            <p>{data.transaction_detail.payment_type}</p>
-            <p>{data.transaction_detail.payment_merchant}</p>
+          <div className="flex flex-col items-center justify-center gap-3 h-[90vh]">
+            <p className="text-3xl lg:text-5xl font-bold text-gray-600">
+              Transaction in Progress
+            </p>
+            <p className="text-xl">Transaction detail</p>
+            <div className="grid grid-cols-2 border rounded-lg border-gray-700 gap-4 text-lg p-4">
+              <p className="font-bold">Package Name</p>
+              <p>{data?.transaction_detail.package.name}</p>
+              <p className="font-bold">Payment Type</p>
+              <p>{data?.transaction_detail.payment_type?.toUpperCase()}</p>
+              <p className="font-bold">Merchant</p>
+              <p>{data?.transaction_detail.payment_merchant?.toUpperCase()}</p>
+              <p className="font-bold">Status</p>
+              <p>{data?.transaction_detail.status?.toUpperCase()}</p>
+            </div>
             <Button
               onClick={() => {
                 if (data?.transaction_detail.midtrans_url)
@@ -35,6 +61,9 @@ export const PaymentDetail = () => {
             >
               Continue Transaction
             </Button>
+            <Link href={'/payment?tab=history'}>
+              <Button>See Transaction History</Button>
+            </Link>
           </div>
         )
       )}
diff --git a/src/app/payment/PaymentError.tsx b/src/app/payment/PaymentError.tsx
new file mode 100644
index 0000000..50f2892
--- /dev/null
+++ b/src/app/payment/PaymentError.tsx
@@ -0,0 +1,27 @@
+'use client'
+import { Button } from '@/components/elements/Button'
+import Link from 'next/link'
+export interface PaymentDetailI {
+  status: string
+}
+export const PaymentError = ({ status }: PaymentDetailI) => {
+  return (
+    <div className="h-[90vh]">
+      <div className="flex flex-col gap-3 items-center justify-center h-full">
+        <p className="text-3xl lg:text-5xl font-bold text-rose-600">
+          Payment Failed
+        </p>
+        <p className="">
+          Transaction status:{' '}
+          <span className="font-bold text-rose-700">
+            {status.toUpperCase()}
+          </span>
+        </p>
+        <i className="i-ph-x-circle-duotone size-20 text-rose-400 aspect-square" />
+        <Link href={'/profile?tab=history'}>
+          <Button variant={'ghost'}>See Transaction History</Button>
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/payment/PaymentSuccess.tsx b/src/app/payment/PaymentSuccess.tsx
new file mode 100644
index 0000000..b900b1a
--- /dev/null
+++ b/src/app/payment/PaymentSuccess.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@/components/elements/Button'
+import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+import { PaymentDetailI } from './PaymentError'
+
+interface PaymentSuccessI extends PaymentDetailI {
+  packageName: string
+}
+export const PaymentSuccess = ({ status, packageName }: PaymentSuccessI) => {
+  const searchParams = useSearchParams()
+
+  return (
+    <div className="h-[90vh]">
+      <div className="flex flex-col gap-3 items-center justify-center h-full">
+        <p className="text-3xl lg:text-5xl font-bold text-emerald-600">
+          Payment Success
+        </p>
+        <p className="text-xl">
+          Enjoy the <span className="font-bold">{packageName}</span> Package
+        </p>
+        <i className="i-ph-check-circle-duotone size-20 text-emerald-400 aspect-square" />
+        <Link href={'/profile?tab=history'}>
+          <Button>See Transaction History</Button>
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/profile/SubscriptionHistory.tsx b/src/app/profile/SubscriptionHistory.tsx
index c1ded86..f9115d3 100644
--- a/src/app/profile/SubscriptionHistory.tsx
+++ b/src/app/profile/SubscriptionHistory.tsx
@@ -9,12 +9,9 @@ export const SubscriptionHistory: React.FC<{
   return (
     <Box
       component="section"
-      className="flex flex-wrap gap-3 w-full overflow-y-auto h-[calc(100vh-80px)]"
-      padding={{ xs: '2em 2em', lg: '4em 6em' }}
+      className="flex flex-col justify-start gap-3 w-full overflow-y-auto pt-16 pb-6 px-4"
     >
-      <h2 className="text-3xl md:text-5xl text-center w-full font-bold">
-        Subscription History
-      </h2>
+      <h2 className="text-3xl font-bold">Subscription History</h2>
       {data.map((history) => (
         <Box
           key={history.id}
@@ -22,15 +19,14 @@ export const SubscriptionHistory: React.FC<{
             display: 'flex',
             flexDirection: 'column',
             height: 'fit-content',
-            width: '100%',
             maxWidth: '600px',
             padding: '1rem',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
             borderRadius: '4px',
             mb: '1rem',
-            bgcolor: '#0D9488',
+            bgcolor: history.is_active ? '#0D9488' : '#FFFFFF',
           }}
-          className="mx-auto"
+          className="mx-auto w-11/12"
         >
           <Box sx={{ mb: '0.5rem' }}>
             <h3
diff --git a/src/app/profile/TransactionHistory.tsx b/src/app/profile/TransactionHistory.tsx
new file mode 100644
index 0000000..0770e23
--- /dev/null
+++ b/src/app/profile/TransactionHistory.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import { useGetTransactionListQuery } from '@/redux/api/paymentApi'
+import { formatRupiah } from '@/utils/formatRupiah'
+import { twMerge } from 'tailwind-merge'
+import { HoverRowVariants, StatusVariants } from './constant'
+import dayjs from 'dayjs'
+import { TransactionStatus } from '@/types/payment'
+import { getTransactionStatus } from '@/utils/getTransactionStatus'
+
+interface TransactionHistoryI {
+  status?: string
+}
+
+export const TransactionHistory = ({ status }: TransactionHistoryI) => {
+  const { data, isLoading } = useGetTransactionListQuery()
+
+  return (
+    <div className="my-2 px-4">
+      <p className="py-4 text-3xl font-bold">Transaction History</p>
+      {isLoading ? (
+        <div data-testid="loader" className="loader"></div>
+      ) : (
+        <div className="overflow-x-scroll w-screen md:w-11/12 px-4 lg:px-0">
+          <table className="w-full border-collapse table rounded-lg overflow-hidden border-emerald-500">
+            <thead className="table-header-group sticky top-0">
+              <tr className="border table-row text-xl">
+                <th className="p-2 border-2 border-emerald-500 text-left table-cell">
+                  Checkout Time
+                </th>
+                <th className="p-2 border-2 border-emerald-500 text-left table-cell">
+                  Package Plan
+                </th>
+                <th className="p-2 border-2 border-emerald-500 text-left table-cell">
+                  Price
+                </th>
+                <th className="p-2 border-2 border-emerald-500 text-left table-cell">
+                  Expiry Time
+                </th>
+                <th className="p-2 border-2 border-emerald-500 text-left table-cell">
+                  Status
+                </th>
+              </tr>
+            </thead>
+            <tbody className="table-row-group">
+              {data && data?.length > 0 ? (
+                data
+                  ?.filter((transaction) => {
+                    if (status) return transaction.status === status
+                    return transaction
+                  })
+                  .map(
+                    ({
+                      checkout_time,
+                      expiry_time,
+                      package: { name },
+                      price,
+                      id,
+                      status,
+                      midtrans_url,
+                    }) => (
+                      <tr
+                        key={id}
+                        className={twMerge(
+                          'border table-row text-lg group',
+                          HoverRowVariants({
+                            hover: getTransactionStatus(
+                              status as TransactionStatus
+                            ),
+                          })
+                        )}
+                      >
+                        <td className="p-2 border-2 border-emerald-500">
+                          {dayjs(checkout_time).format('ddd, D MMM YY HH:mm')}
+                        </td>
+
+                        <td className="p-2 border-2 border-emerald-500">
+                          {name}
+                        </td>
+                        <td className="p-2 border-2 border-emerald-500">
+                          {formatRupiah(price)}
+                        </td>
+                        <td className="p-2 border-2 border-emerald-500">
+                          {dayjs(expiry_time).format('ddd, D MMM YY HH:mm')}
+                        </td>
+                        <td
+                          className={twMerge(
+                            'p-2 border-2 border-emerald-500',
+                            StatusVariants({
+                              variant: getTransactionStatus(
+                                status as TransactionStatus
+                              ),
+                            })
+                          )}
+                        >
+                          <button
+                            onClick={() => {
+                              if (midtrans_url) {
+                                window.open(midtrans_url)
+                              }
+                            }}
+                            className={twMerge(
+                              'flex flex-row items-center gap-1',
+                              midtrans_url &&
+                                'hover:underline hover:underline-offset-1'
+                            )}
+                          >
+                            <p>{status.toUpperCase()}</p>
+                            {!!midtrans_url && (
+                              <i className="i-ph-arrow-square-up-right-light size-5" />
+                            )}
+                          </button>
+                        </td>
+                      </tr>
+                    )
+                  )
+              ) : (
+                <td
+                  colSpan={5}
+                  className="border-2 border-emerald-500 p-2 w-full text-gray-600 text-center"
+                >
+                  No transactions recorded
+                </td>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/profile/constant.ts b/src/app/profile/constant.ts
index 3a2a49b..db2be98 100644
--- a/src/app/profile/constant.ts
+++ b/src/app/profile/constant.ts
@@ -1,6 +1,31 @@
+import { cva } from 'class-variance-authority'
+
 const CHIP_STYLE = '!font-bold !p-5 !border-none'
 
 export const CHIP_STYLE_ACTIVE = CHIP_STYLE + ' ' + '!bg-teal-600 !text-teal-50'
 
 export const CHIP_STYLE_INACTIVE =
   CHIP_STYLE + ' ' + '!bg-teal-50 !text-teal-400'
+
+export const StatusVariants = cva('font-bold', {
+  variants: {
+    variant: {
+      success: 'text-emerald-500',
+      error: 'text-rose-500',
+      pending: 'text-gray-500',
+    },
+  },
+  defaultVariants: {
+    variant: 'pending',
+  },
+})
+
+export const HoverRowVariants = cva('hover:scale-[1.001]', {
+  variants: {
+    hover: {
+      success: 'hover:bg-emerald-50',
+      error: 'hover:bg-rose-50',
+      pending: 'hover:bg-gray-50',
+    },
+  },
+})
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 4372bdd..1266ea3 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -21,12 +21,17 @@ import {
   useGetSubscriptionsQuery,
 } from '@/redux/api/subscriptionApi'
 import { CHIP_STYLE_ACTIVE, CHIP_STYLE_INACTIVE } from './constant'
+import { TransactionHistory } from './TransactionHistory'
+import { useSearchParams } from 'next/navigation'
 
 type ChipType = 'event' | 'history'
 
 export default function Profile() {
+  const searchParams = useSearchParams()
   const [openPopup, setOpenPopup] = useState(false)
-  const [chipType, setChipType] = React.useState<ChipType>('event')
+  const [chipType, setChipType] = React.useState<ChipType>(
+    (searchParams.get('tab') as ChipType) ?? 'event'
+  )
   const { data, isLoading, isError } = useGetProfileQuery()
   const { data: events } = useGetEventsQuery()
   const dispatch = useDispatch()
@@ -86,12 +91,15 @@ export default function Profile() {
           />
         ))}
       </Box>
-      <Box component="section" className="flex flex-wrap lg:flex-nowrap w-full">
+      <Box
+        component="section"
+        className="flex flex-wrap justify-center lg:flex-nowrap w-full"
+      >
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'column',
-            width: '100%',
+            width: '50%',
           }}
           alignItems={'center'}
           justifyContent={'center'}
@@ -233,7 +241,10 @@ export default function Profile() {
             )}
           </Box>
         ) : (
-          renderSubscriptionHistory()
+          <div className="flex flex-col justify-start gap-2 px-4 md:px-0">
+            {renderSubscriptionHistory()}
+            <TransactionHistory />
+          </div>
         )}
       </Box>
     </Box>
diff --git a/src/components/elements/Button/index.tsx b/src/components/elements/Button/index.tsx
index 068ae45..6580cfe 100644
--- a/src/components/elements/Button/index.tsx
+++ b/src/components/elements/Button/index.tsx
@@ -29,13 +29,18 @@ export const Button = ({
     <button
       {...props}
       className={twMerge(
-        ButtonVariants({ variant, intent, width, size }),
+        ButtonVariants({
+          variant,
+          width,
+          size,
+          intent: disabled ? 'disabled' : 'active',
+        }),
         className
       )}
       disabled={disabled || loading}
     >
       {loading ? (
-        <CircularProgress />
+        <CircularProgress size={20} color="secondary" />
       ) : (
         <>
           {leftIcon && <span>{leftIcon}</span>}
diff --git a/src/types/payment.ts b/src/types/payment.ts
index 76620e5..0e36e81 100644
--- a/src/types/payment.ts
+++ b/src/types/payment.ts
@@ -15,3 +15,25 @@ export type Transaction = {
 }
 
 export type GetTransactionResponse = { transaction_detail: Transaction }
+
+export type TransactionSuccess = 'authorize' | 'capture' | 'settlement'
+export type TransactionPending = 'pending' | 'chargeback' | 'partial_chargeback'
+export type TransactionError =
+  | 'deny'
+  | 'cancel'
+  | 'refund'
+  | 'partial_refund'
+  | 'expire'
+  | 'failure'
+export const transactionErrorStatuses = [
+  'deny',
+  'cancel',
+  'refund',
+  'partial_refund',
+  'expire',
+  'failure',
+]
+
+export type TransactionStatus = TransactionSuccess &
+  TransactionPending &
+  TransactionError
diff --git a/src/types/subscription.ts b/src/types/subscription.ts
index 4627cb7..533fd68 100644
--- a/src/types/subscription.ts
+++ b/src/types/subscription.ts
@@ -6,6 +6,7 @@ export type SubscriptionHistoryResponse = {
   start_date: string
   end_date: string
   user: number
+  is_active: boolean
 }
 
 export type LatestSubscriptionResponse = {
diff --git a/src/utils/getTransactionStatus.ts b/src/utils/getTransactionStatus.ts
new file mode 100644
index 0000000..f35ddb5
--- /dev/null
+++ b/src/utils/getTransactionStatus.ts
@@ -0,0 +1,23 @@
+import { TransactionStatus } from '@/types/payment'
+
+export const getTransactionStatus = (transactionStatus: TransactionStatus) => {
+  switch (transactionStatus) {
+    case 'authorize':
+    case 'capture':
+    case 'settlement':
+      return 'success'
+    case 'pending':
+    case 'chargeback':
+    case 'partial_chargeback':
+      return 'pending'
+    case 'deny':
+    case 'cancel':
+    case 'refund':
+    case 'partial_refund':
+    case 'expire':
+    case 'failure':
+      return 'error'
+    default:
+      return 'pending'
+  }
+}

From 612708a92e943f862438ff79bf3f2f71fcff2dae Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 16 May 2024 14:20:26 +0700
Subject: [PATCH 4/7] [GREEN] update test for payment transaction history

---
 __tests__/profile/profile.test.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/__tests__/profile/profile.test.tsx b/__tests__/profile/profile.test.tsx
index 53decae..20cf272 100644
--- a/__tests__/profile/profile.test.tsx
+++ b/__tests__/profile/profile.test.tsx
@@ -13,6 +13,7 @@ import Profile from '@/app/profile/page'
 import { useGetSubscriptionsQuery } from '@/redux/api/subscriptionApi'
 import { useGetTransactionListQuery } from '@/redux/api/paymentApi'
 import dayjs from 'dayjs'
+import { formatRupiah } from '@/utils/formatRupiah'
 
 jest.mock('next/navigation', () => ({
   useSearchParams: jest.fn(() => ({
@@ -57,8 +58,8 @@ const mockTransactionData = [
     midtrans_transaction_id: 'mid-2',
     order_id: 'ord-2',
     price: 10000,
-    checkout_time: '2024-05-06T14:49:19Z',
-    expiry_time: '2024-05-06T15:04:19Z',
+    checkout_time: '2024-05-04T14:49:19Z',
+    expiry_time: '2024-05-04T15:04:19Z',
     payment_type: 'qris',
     payment_merchant: 'gopay',
     status: 'failed',
@@ -72,8 +73,8 @@ const mockTransactionData = [
     midtrans_transaction_id: 'mid-3',
     order_id: 'ord-3',
     price: 10000,
-    checkout_time: '2024-05-06T14:49:19Z',
-    expiry_time: '2024-05-06T15:04:19Z',
+    checkout_time: '2024-05-03T14:49:19Z',
+    expiry_time: '2024-05-03T15:04:19Z',
     payment_type: 'qris',
     payment_merchant: 'gopay',
     status: 'pending',
@@ -274,8 +275,12 @@ describe('Profile Component', () => {
     expect(getByText('Price')).toBeInTheDocument()
     expect(getByText('Expiry Time')).toBeInTheDocument()
     expect(getByText('Status')).toBeInTheDocument()
-    expect(getByText(mockTransactionData[0].status)).toBeInTheDocument()
-    expect(getByText(mockTransactionData[0].price)).toBeInTheDocument()
+    expect(
+      getByText(mockTransactionData[0].status.toUpperCase())
+    ).toBeInTheDocument()
+    expect(
+      getAllByText(formatRupiah(mockTransactionData[0].price))[0]
+    ).toBeInTheDocument()
     expect(
       getByText(
         dayjs(mockTransactionData[0].checkout_time).format(

From 842c2ca005ef6d69d01090a4b0a21333181d7620 Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 16 May 2024 14:59:41 +0700
Subject: [PATCH 5/7] [CHORE] remove unused imports

---
 src/app/payment/PaymentDetail.tsx  | 2 +-
 src/app/payment/PaymentSuccess.tsx | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/app/payment/PaymentDetail.tsx b/src/app/payment/PaymentDetail.tsx
index 665d0c3..6a49797 100644
--- a/src/app/payment/PaymentDetail.tsx
+++ b/src/app/payment/PaymentDetail.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { Button } from '@/components/elements/Button'
 import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
-import { transactionErrorStatuses, TransactionStatus } from '@/types/payment'
+import { transactionErrorStatuses } from '@/types/payment'
 import { useSearchParams } from 'next/navigation'
 import React, { useEffect } from 'react'
 import { PaymentSuccess } from './PaymentSuccess'
diff --git a/src/app/payment/PaymentSuccess.tsx b/src/app/payment/PaymentSuccess.tsx
index b900b1a..c7ed5ef 100644
--- a/src/app/payment/PaymentSuccess.tsx
+++ b/src/app/payment/PaymentSuccess.tsx
@@ -1,18 +1,13 @@
 'use client'
 
 import { Button } from '@/components/elements/Button'
-import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
 import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
 import { PaymentDetailI } from './PaymentError'
 
 interface PaymentSuccessI extends PaymentDetailI {
   packageName: string
 }
-export const PaymentSuccess = ({ status, packageName }: PaymentSuccessI) => {
-  const searchParams = useSearchParams()
-
+export const PaymentSuccess = ({ packageName }: PaymentSuccessI) => {
   return (
     <div className="h-[90vh]">
       <div className="flex flex-col gap-3 items-center justify-center h-full">

From 7cadc4d28b8cd971154a5946448d424950a1f02d Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Fri, 17 May 2024 09:48:54 +0700
Subject: [PATCH 6/7] [REFACTOR] make util function for format date time

---
 __tests__/profile/profile.test.tsx                   | 12 +++---------
 __tests__/task-detail/task-detail-with-step.test.tsx |  8 +++-----
 .../(eventId)/task/[taskId]/StepStepper.tsx          |  9 ++++-----
 src/app/profile/TransactionHistory.tsx               |  6 +++---
 src/utils/formatDateTime.ts                          |  8 ++++++++
 5 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/formatDateTime.ts

diff --git a/__tests__/profile/profile.test.tsx b/__tests__/profile/profile.test.tsx
index 20cf272..9981ee3 100644
--- a/__tests__/profile/profile.test.tsx
+++ b/__tests__/profile/profile.test.tsx
@@ -12,8 +12,8 @@ import { useGetProfileQuery, useGetEventsQuery } from '@/redux/api/profileApi'
 import Profile from '@/app/profile/page'
 import { useGetSubscriptionsQuery } from '@/redux/api/subscriptionApi'
 import { useGetTransactionListQuery } from '@/redux/api/paymentApi'
-import dayjs from 'dayjs'
 import { formatRupiah } from '@/utils/formatRupiah'
+import { formatDateTime } from '@/utils/formatDateTime'
 
 jest.mock('next/navigation', () => ({
   useSearchParams: jest.fn(() => ({
@@ -282,16 +282,10 @@ describe('Profile Component', () => {
       getAllByText(formatRupiah(mockTransactionData[0].price))[0]
     ).toBeInTheDocument()
     expect(
-      getByText(
-        dayjs(mockTransactionData[0].checkout_time).format(
-          'ddd, D MMM YY HH:mm'
-        )
-      )
+      getByText(formatDateTime(mockTransactionData[0].checkout_time))
     ).toBeInTheDocument()
     expect(
-      getByText(
-        dayjs(mockTransactionData[0].expiry_time).format('ddd, D MMM YY HH:mm')
-      )
+      getByText(formatDateTime(mockTransactionData[0].expiry_time))
     ).toBeInTheDocument()
   })
 
diff --git a/__tests__/task-detail/task-detail-with-step.test.tsx b/__tests__/task-detail/task-detail-with-step.test.tsx
index 8cff33d..1cc9770 100644
--- a/__tests__/task-detail/task-detail-with-step.test.tsx
+++ b/__tests__/task-detail/task-detail-with-step.test.tsx
@@ -11,10 +11,10 @@ import {
   useUpdateTaskStepMutation,
 } from '@/redux/api/taskStepApi'
 import '@testing-library/jest-dom'
-import dayjs from '@/configs/dayjs.config'
 import { Step } from '@/types/taskDetails'
 import { store } from '@/redux/store'
 import { Provider } from 'react-redux'
+import { formatDateTime } from '@/utils/formatDateTime'
 
 jest.mock('@/redux/api/eventApi', () => ({
   useGetEventQuery: jest.fn(),
@@ -312,12 +312,10 @@ describe('TaskDetailPage with step', () => {
     )
 
     expect(
-      screen.getByText(
-        dayjs(mockStepData.start_datetime).format('ddd, D MMM YY HH:mm')
-      )
+      screen.getByText(formatDateTime(mockStepData.start_datetime))
     ).toBeInTheDocument()
     expect(
-      screen.getByText(dayjs(mockStepData.end_datetime).format('HH:mm'))
+      screen.getByText(formatDateTime(mockStepData.end_datetime, 'HH:mm'))
     ).toBeInTheDocument()
   })
 })
diff --git a/src/app/event/[eventId]/(eventId)/task/[taskId]/StepStepper.tsx b/src/app/event/[eventId]/(eventId)/task/[taskId]/StepStepper.tsx
index 840103e..a50679b 100644
--- a/src/app/event/[eventId]/(eventId)/task/[taskId]/StepStepper.tsx
+++ b/src/app/event/[eventId]/(eventId)/task/[taskId]/StepStepper.tsx
@@ -21,6 +21,7 @@ import ConfirmDeleteDialog from './ConfirmDeleteDialog'
 import { CreateTimelineDialog } from './CreateTimelineDialog'
 import dayjs from '@/configs/dayjs.config'
 import { twMerge } from 'tailwind-merge'
+import { formatDateTime } from '@/utils/formatDateTime'
 
 export type StepUpdateRequest = {
   name: string
@@ -191,14 +192,12 @@ export default function StepStepper({ taskId, task }: Props) {
             <StepContent>
               <div className="text-sm font-bold flex flex-row items-center gap-2 text-gray-700">
                 <i className="i-ph-calendar-blank size-4 text-gray-700" />
-                <p>
-                  {dayjs(step.start_datetime).format('ddd, D MMM YY HH:mm')}
-                </p>
+                <p>{formatDateTime(step.start_datetime)}</p>
                 <p>-</p>
                 <p>
                   {dayjs(step.start_datetime).isSame(step.end_datetime, 'day')
-                    ? dayjs(step.end_datetime).format('HH:mm')
-                    : dayjs(step.end_datetime).format('ddd, D MMM YY HH:mm')}
+                    ? formatDateTime(step.end_datetime, 'HH:mm')
+                    : formatDateTime(step.end_datetime)}
                 </p>
               </div>
               <Typography>{step.description}</Typography>
diff --git a/src/app/profile/TransactionHistory.tsx b/src/app/profile/TransactionHistory.tsx
index 0770e23..f68cc6b 100644
--- a/src/app/profile/TransactionHistory.tsx
+++ b/src/app/profile/TransactionHistory.tsx
@@ -4,9 +4,9 @@ import { useGetTransactionListQuery } from '@/redux/api/paymentApi'
 import { formatRupiah } from '@/utils/formatRupiah'
 import { twMerge } from 'tailwind-merge'
 import { HoverRowVariants, StatusVariants } from './constant'
-import dayjs from 'dayjs'
 import { TransactionStatus } from '@/types/payment'
 import { getTransactionStatus } from '@/utils/getTransactionStatus'
+import { formatDateTime } from '@/utils/formatDateTime'
 
 interface TransactionHistoryI {
   status?: string
@@ -71,7 +71,7 @@ export const TransactionHistory = ({ status }: TransactionHistoryI) => {
                         )}
                       >
                         <td className="p-2 border-2 border-emerald-500">
-                          {dayjs(checkout_time).format('ddd, D MMM YY HH:mm')}
+                          {formatDateTime(checkout_time)}
                         </td>
 
                         <td className="p-2 border-2 border-emerald-500">
@@ -81,7 +81,7 @@ export const TransactionHistory = ({ status }: TransactionHistoryI) => {
                           {formatRupiah(price)}
                         </td>
                         <td className="p-2 border-2 border-emerald-500">
-                          {dayjs(expiry_time).format('ddd, D MMM YY HH:mm')}
+                          {formatDateTime(expiry_time)}
                         </td>
                         <td
                           className={twMerge(
diff --git a/src/utils/formatDateTime.ts b/src/utils/formatDateTime.ts
new file mode 100644
index 0000000..a3e184c
--- /dev/null
+++ b/src/utils/formatDateTime.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+
+export const formatDateTime = (
+  dateString: string | null,
+  format: string = 'ddd, D MMM YY HH:mm'
+) => {
+  return dayjs(dateString).format(format)
+}

From 0707b23038fbda55ec2613b48adcc9739df967dd Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Fri, 17 May 2024 09:51:01 +0700
Subject: [PATCH 7/7] [REFACTOR] update payment status props

---
 src/app/payment/PaymentDetail.tsx |  2 +-
 src/app/payment/PaymentError.tsx  | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/payment/PaymentDetail.tsx b/src/app/payment/PaymentDetail.tsx
index 6a49797..d171491 100644
--- a/src/app/payment/PaymentDetail.tsx
+++ b/src/app/payment/PaymentDetail.tsx
@@ -28,7 +28,7 @@ export const PaymentDetail = () => {
       />
     )
   if (transactionErrorStatuses.includes(status ?? ''))
-    return <PaymentError status={status ?? ''} />
+    return <PaymentError status={status} />
   return (
     <div>
       {isLoading ? (
diff --git a/src/app/payment/PaymentError.tsx b/src/app/payment/PaymentError.tsx
index 50f2892..d3fcf19 100644
--- a/src/app/payment/PaymentError.tsx
+++ b/src/app/payment/PaymentError.tsx
@@ -2,7 +2,7 @@
 import { Button } from '@/components/elements/Button'
 import Link from 'next/link'
 export interface PaymentDetailI {
-  status: string
+  status: string | null
 }
 export const PaymentError = ({ status }: PaymentDetailI) => {
   return (
@@ -11,12 +11,14 @@ export const PaymentError = ({ status }: PaymentDetailI) => {
         <p className="text-3xl lg:text-5xl font-bold text-rose-600">
           Payment Failed
         </p>
-        <p className="">
-          Transaction status:{' '}
-          <span className="font-bold text-rose-700">
-            {status.toUpperCase()}
-          </span>
-        </p>
+        {!!status && (
+          <p>
+            Transaction status:{' '}
+            <span className="font-bold text-rose-700">
+              {status.toUpperCase()}
+            </span>
+          </p>
+        )}
         <i className="i-ph-x-circle-duotone size-20 text-rose-400 aspect-square" />
         <Link href={'/profile?tab=history'}>
           <Button variant={'ghost'}>See Transaction History</Button>