136 lines
7.0 KiB
TypeScript
136 lines
7.0 KiB
TypeScript
'use client';
|
|
import Dropdown from '@/components/dropdown';
|
|
import IconHorizontalDots from '@/components/icon/icon-horizontal-dots';
|
|
import { IRootState } from '@/store';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { useSubscription } from '@/components/billing/subscription-context';
|
|
|
|
const ComponentsUsersProfilePaymentHistory = () => {
|
|
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';
|
|
|
|
const { isEntitled, isTrialActive, daysLeftInTrial, startTrial, purchase } = useSubscription();
|
|
|
|
if (!isEntitled) {
|
|
return (
|
|
<div className="panel">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h5 className="text-lg font-semibold dark:text-white-light">Payment History</h5>
|
|
</div>
|
|
<div className="rounded-md border border-dashed border-[#ebedf2] bg-white p-6 text-center dark:border-[#1b2e4b] dark:bg-black">
|
|
<p className="mb-2 text-sm text-gray-600">
|
|
Payment history is available once you activate a subscription.
|
|
</p>
|
|
<div className="mt-3 flex flex-wrap items-center justify-center gap-3">
|
|
{!isTrialActive && (
|
|
<button
|
|
onClick={() => startTrial(7)}
|
|
className="btn btn-dark"
|
|
>
|
|
Start 7-day Free Trial
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={purchase}
|
|
className="btn btn-primary"
|
|
>
|
|
Purchase Subscription
|
|
</button>
|
|
</div>
|
|
<p className="mt-3 text-xs text-gray-500">
|
|
You can manage your plan in <span className="font-medium">Account Settings → Payment Details</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// entitled users see the original history UI
|
|
return (
|
|
<div className="panel">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h5 className="text-lg font-semibold dark:text-white-light">Payment History</h5>
|
|
</div>
|
|
<div>
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
March
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown
|
|
offset={[0, 5]}
|
|
placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
|
|
btnClassName="hover:text-primary"
|
|
button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}
|
|
>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
February
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<h6 className="font-semibold text-[#515365] dark:text-white-dark">
|
|
January
|
|
<span className="block text-white-dark dark:text-white-light">Pro Membership</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<p className="font-semibold">90%</p>
|
|
<div className="dropdown ltr:ml-4 rtl:mr-4">
|
|
<Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
|
|
<ul className="!min-w-[150px]">
|
|
<li>
|
|
<button type="button">View Invoice</button>
|
|
</li>
|
|
<li>
|
|
<button type="button">Download Invoice</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentsUsersProfilePaymentHistory;
|