Feat: Melihat subscription package

__tests__/elements/calendar.tsx

@@ -1,32 +1,31 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi';
-import Calendar from '@/components/elements/Timeline/Calendar';
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi'
+import Calendar from '@/components/elements/Timeline/Calendar'
 
 // Mock the useGetTimelinesByEventQuery hook
 jest.mock('@/redux/api/timelineApi', () => ({
   useGetTimelinesByEventQuery: jest.fn(),
-}));
+}))
 
 jest.mock('@/components/elements/Timeline/Calendar', () => {
-    return {
-      __esModule: true,
-      default: jest.fn(() => (
-        <div>
-          <div data-testid="calendar">Calendar Component</div>
-          <div>Task 1</div>
-          <div>Task 2</div>
-        </div>
-      )),
-    }
-});
-
+  return {
+    __esModule: true,
+    default: jest.fn(() => (
+      <div>
+        <div data-testid="calendar">Calendar Component</div>
+        <div>Task 1</div>
+        <div>Task 2</div>
+      </div>
+    )),
+  }
+})
 
 describe('Calendar', () => {
   beforeEach(() => {
     // Mock the return value of useGetTimelinesByEventQuery
-    (useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
+    ;(useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
       data: [
         {
           id: '1',
@@ -42,26 +41,26 @@ describe('Calendar', () => {
         },
       ],
       isLoading: false,
-    });
-  });
+    })
+  })
 
   afterEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.clearAllMocks()
+  })
 
   test('renders the calendar component', () => {
-    render(<Calendar eventId="123" />);
-    expect(screen.getByTestId('calendar')).toBeInTheDocument();
-  });
+    render(<Calendar eventId="123" />)
+    expect(screen.getByTestId('calendar')).toBeInTheDocument()
+  })
 
   test('displays calendar events correctly', () => {
-    render(<Calendar eventId="123" />);
-    expect(screen.getByText('Task 1')).toBeInTheDocument();
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-  });
+    render(<Calendar eventId="123" />)
+    expect(screen.getByText('Task 1')).toBeInTheDocument()
+    expect(screen.getByText('Task 2')).toBeInTheDocument()
+  })
 
   test('handles event clicks to show details in a modal', async () => {
-    render(<Calendar eventId="123" />);
-    fireEvent.click(screen.getByText('Task 1'));
-  });
-});
+    render(<Calendar eventId="123" />)
+    fireEvent.click(screen.getByText('Task 1'))
+  })
+})

__tests__/package/package-list-free.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import PackageList from '@/app/package/page'
+
+jest.mock('@/redux/api/packageApi', () => ({
+  useGetPackageDetailQuery: jest.fn((id) => ({
+    data: {
+      name: 'Default Package',
+      price: 5000,
+      event_planner: true,
+      event_tracker: true,
+      event_timeline: true,
+      event_rundown: true,
+      ai_assistant: false,
+    },
+  })),
+}))
+
+jest.mock('@/redux/api/subscriptionApi', () => ({
+  useGetLatestSubscriptionQuery: jest.fn((id) => ({
+    data: {
+      id: 1,
+      plan: 'PREMIUM',
+      start_date: '2024-05-05T13:30:00.000Z',
+      end_date: '2025-05-05T13:30:00.000Z',
+      user: 1,
+      is_active: false,
+    },
+  })),
+}))
+
+describe('PackageList component', () => {
+  it('renders correctly', () => {
+    const { getByTestId } = render(<PackageList />)
+    const packageDetail = getByTestId('package-detail')
+    expect(packageDetail).toBeInTheDocument()
+  })
+})

__tests__/package/package-list-premium.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import PackageList from '@/app/package/page'
+
+jest.mock('@/redux/api/packageApi', () => ({
+  useGetPackageDetailQuery: jest.fn((id) => ({
+    data: {
+      name: 'Default Package',
+      price: 5000,
+      event_planner: true,
+      event_tracker: true,
+      event_timeline: true,
+      event_rundown: true,
+      ai_assistant: false,
+    },
+  })),
+}))
+
+jest.mock('@/redux/api/subscriptionApi', () => ({
+  useGetLatestSubscriptionQuery: jest.fn((id) => ({
+    data: {
+      id: 1,
+      plan: 'PREMIUM',
+      start_date: '2024-05-05T13:30:00.000Z',
+      end_date: '2025-05-05T13:30:00.000Z',
+      user: 1,
+      is_active: true,
+    },
+  })),
+}))
+
+describe('PackageList component', () => {
+  it('renders correctly', () => {
+    const { getByTestId } = render(<PackageList />)
+    const packageDetail = getByTestId('package-detail')
+    expect(packageDetail).toBeInTheDocument()
+  })
+})

package.json

@@ -62,6 +62,7 @@
     "@iconify-json/logos": "^1.1.42",
     "@iconify-json/ph": "^1.1.10",
     "@iconify/react": "4.1.1",
+    "@iconify/tailwind": "^1.0.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",

src/app/package/PackageCard.tsx

@@ -0,0 +1,40 @@
+import { PackageDetailResponse } from '@/types/package'
+import { Box } from '@mui/material'
+import CheckIcon from '@mui/icons-material/Check'
+import CloseIcon from '@mui/icons-material/Close'
+import { capitalizeWords } from '@/utils/capitalizeWords'
+
+interface PackageDetailProps {
+  package_detail: PackageDetailResponse
+}
+
+export const PackageCard = ({ package_detail }: PackageDetailProps) => {
+  const features: (keyof PackageDetailResponse)[] = [
+    'event_planner',
+    'event_tracker',
+    'event_timeline',
+    'event_rundown',
+    'ai_assistant',
+  ]
+
+  return (
+    <Box data-testid="package-card-box">
+      <ul className="list-disc list-inside space-y-2">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center">
+            {package_detail[feature] ? (
+              <CheckIcon className="text-teal-400" />
+            ) : (
+              <CloseIcon className="text-red-400" />
+            )}
+            <p className="text-sm" style={{ marginLeft: '0.5rem' }}>
+              {capitalizeWords(feature)}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </Box>
+  )
+}
+
+export default PackageCard

src/app/package/constant.ts

@@ -0,0 +1,4 @@
+export const PACKAGE = {
+    "free": 1,
+    "premium": 2
+}

src/app/package/page.tsx

@@ -0,0 +1,130 @@
+'use client'
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material'
+import { useGetPackageDetailQuery } from '@/redux/api/packageApi'
+import PackageCard from './PackageCard'
+import { PackageDetailResponse } from '@/types/package'
+import { capitalizeWords } from '@/utils/capitalizeWords'
+import { useGetLatestSubscriptionQuery } from '@/redux/api/subscriptionApi'
+import { LatestSubscriptionResponse } from '@/types/subscription'
+import { formatRupiah } from '@/utils/formatRupiah'
+import { formatDate } from '@/utils/formatDate'
+import { PACKAGE } from './constant'
+
+export default function PackageList() {
+  const { data: free_package = {} as PackageDetailResponse } =
+    useGetPackageDetailQuery(PACKAGE["free"])
+  const { data: premium_package = {} as PackageDetailResponse } =
+    useGetPackageDetailQuery(PACKAGE["premium"])
+  const { data: latest_subscription = {} as LatestSubscriptionResponse } =
+    useGetLatestSubscriptionQuery()
+
+  const features: (keyof PackageDetailResponse)[] = [
+    'event_planner',
+    'event_tracker',
+    'event_timeline',
+    'event_rundown',
+    'ai_assistant',
+  ]
+
+  return (
+    <Box data-testid="package-detail" className="m-2 flex flex-col">
+      <Box className="flex flex-col items-center justify-center">
+        <p className="text-4xl font-bold mt-4">Revelio</p>
+        <p className="text-lg text-teal-500 mt-2 mb-4">Upgrade your plan</p>
+      </Box>
+
+      <Box className="items-center justify-center flex my-4">
+        <Box className="my-8 border-teal-400 border-t-2 border-l-2 border-b-2 p-4 rounded-tl-3xl rounded-bl-3xl overflow-hidden w-72">
+          <Box className="h-56 mx-4 my-2 space-y-2">
+            <h2 className="text-lg font-bold">Free</h2>
+            <p className="text-sm">Try it as long as you like</p>
+            {free_package && <PackageCard package_detail={free_package} />}
+          </Box>
+        </Box>
+
+        <Box className="bg-teal-600 text-white p-6 rounded-3xl relative min-w-64 w-1/3">
+          <span className="absolute top-0 right-0 bg-teal-100 rounded-2xl text-xs m-4 p-2 text-teal-600 font-bold">
+            RECOMMENDED
+          </span>
+          <Box className="mx-4 my-8 space-y-3">
+            <h2 className="text-3xl font-bold">Premium</h2>
+            <p className="text-sm font-bold text-teal-100">
+              Limitless possibilities
+            </p>
+            {premium_package && (
+              <PackageCard package_detail={premium_package} />
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <Box className="my-16 w-full flex justify-center">
+        <TableContainer component={Box} style={{ width: '75%' }}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell></TableCell>
+                <TableCell align="center">
+                  <h3 className="font-bold">Free</h3>
+                </TableCell>
+                <TableCell align="center">
+                  <h3 className="font-bold">Premium</h3>
+                </TableCell>
+              </TableRow>
+              {features.map((feature, index) => (
+                <TableRow
+                  key={feature}
+                  style={{
+                    backgroundColor:
+                      index % 2 === 0 ? 'rgba(0,0,0,0.05)' : 'transparent',
+                  }}
+                >
+                  <TableCell>
+                    <p className="font-bold">{capitalizeWords(feature)}</p>
+                  </TableCell>
+                  <TableCell align="center">
+                    {free_package[feature] ? (
+                      <i className="i-ph-check-circle-fill text-teal-600 size-6" />
+                    ) : (
+                      <i className="i-ph-x-circle-fill text-rose-500 size-6" />
+                    )}
+                  </TableCell>
+                  <TableCell align="center">
+                    {premium_package[feature] ? (
+                      <i className="i-ph-check-circle-fill text-teal-600 size-6" />
+                    ) : (
+                      <i className="i-ph-x-circle-fill text-rose-500 size-6" />
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow>
+                <TableCell></TableCell>
+                <TableCell></TableCell>
+                <TableCell align="center">
+                  {!latest_subscription.is_active ? (
+                    <button className="bg-white text-teal-600 border border-teal-600 rounded-2xl py-4 px-6 text-sm">
+                      Choose Plan <br /> ({formatRupiah(premium_package.price)})
+                    </button>
+                  ) : (
+                    <p className="text-teal-600">
+                      Subscribed until{' '}
+                      {formatDate(latest_subscription.end_date)}
+                    </p>
+                  )}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </Box>
+  )
+}

src/components/elements/Navbar/constant.ts

@@ -10,6 +10,10 @@ export const MENU_LOGGED_IN = [
     label: 'Dashboard',
     href: '/profile',
   },
+  {
+    label: 'Package',
+    href: '/package',
+  },
   {
     label: 'Start Planning',
     href: '/event',