472 lines
31 KiB
TypeScript
472 lines
31 KiB
TypeScript
'use client';
|
|
import IconDollarSignCircle from '@/components/icon/icon-dollar-sign-circle';
|
|
import IconFacebook from '@/components/icon/icon-facebook';
|
|
import IconGithub from '@/components/icon/icon-github';
|
|
import IconHome from '@/components/icon/icon-home';
|
|
import IconLinkedin from '@/components/icon/icon-linkedin';
|
|
import IconPhone from '@/components/icon/icon-phone';
|
|
import IconTwitter from '@/components/icon/icon-twitter';
|
|
import IconUser from '@/components/icon/icon-user';
|
|
import React, { useState } from 'react';
|
|
|
|
import SubscriptionPanel from '@/components/billing/subscription-panel';
|
|
import { useSubscription } from '@/components/billing/subscription-context';
|
|
import ComponentsUsersProfilePaymentHistory from '@/components/users/profile/components-users-profile-payment-history';
|
|
|
|
const ComponentsUsersAccountSettingsTabs = () => {
|
|
const [tabs, setTabs] = useState<string>('home');
|
|
const toggleTabs = (name: string) => {
|
|
setTabs(name);
|
|
};
|
|
|
|
// subscription badges in the tabs header (optional)
|
|
const { state, isTrialActive, daysLeftInTrial } = useSubscription();
|
|
|
|
return (
|
|
<div className="pt-5">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h5 className="text-lg font-semibold dark:text-white-light">Settings</h5>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
{state.active ? (
|
|
<span className="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-1 font-medium text-emerald-700">
|
|
Active Subscription
|
|
</span>
|
|
) : isTrialActive ? (
|
|
<span className="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-1 font-medium text-blue-700">
|
|
Trial: {daysLeftInTrial} day(s) left
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center rounded-md border px-2 py-1 text-gray-600">
|
|
No plan
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<ul className="mb-5 overflow-y-auto whitespace-nowrap border-b border-[#ebedf2] font-semibold dark:border-[#191e3a] sm:flex">
|
|
<li className="inline-block">
|
|
<button
|
|
onClick={() => toggleTabs('home')}
|
|
className={`flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary ${tabs === 'home' ? '!border-primary text-primary' : ''}`}
|
|
>
|
|
<IconHome />
|
|
Home
|
|
</button>
|
|
</li>
|
|
<li className="inline-block">
|
|
<button
|
|
onClick={() => toggleTabs('payment-details')}
|
|
className={`flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary ${tabs === 'payment-details' ? '!border-primary text-primary' : ''}`}
|
|
>
|
|
<IconDollarSignCircle />
|
|
Payment Details
|
|
</button>
|
|
</li>
|
|
<li className="inline-block">
|
|
<button
|
|
onClick={() => toggleTabs('preferences')}
|
|
className={`flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary ${tabs === 'preferences' ? '!border-primary text-primary' : ''}`}
|
|
>
|
|
<IconUser className="h-5 w-5" />
|
|
Preferences
|
|
</button>
|
|
</li>
|
|
<li className="inline-block">
|
|
<button
|
|
onClick={() => toggleTabs('danger-zone')}
|
|
className={`flex gap-2 border-b border-transparent p-4 hover:border-primary hover:text-primary ${tabs === 'danger-zone' ? '!border-primary text-primary' : ''}`}
|
|
>
|
|
<IconPhone />
|
|
Danger Zone
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{tabs === 'home' ? (
|
|
<div>
|
|
<form className="mb-5 rounded-md border border-[#ebedf2] bg-white p-4 dark:border-[#191e3a] dark:bg-black">
|
|
<h6 className="mb-5 text-lg font-bold">General Information</h6>
|
|
<div className="flex flex-col sm:flex-row">
|
|
<div className="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
|
|
<img src="/assets//images/profile-34.jpeg" alt="img" className="mx-auto h-20 w-20 rounded-full object-cover md:h-32 md:w-32" />
|
|
</div>
|
|
<div className="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="name">Full Name</label>
|
|
<input id="name" type="text" placeholder="Jimmy Turner" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="profession">Profession</label>
|
|
<input id="profession" type="text" placeholder="Web Developer" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="country">Country</label>
|
|
<select id="country" className="form-select text-white-dark" name="country" defaultValue="United States">
|
|
<option value="All Countries">All Countries</option>
|
|
<option value="United States">United States</option>
|
|
<option value="India">India</option>
|
|
<option value="Japan">Japan</option>
|
|
<option value="China">China</option>
|
|
<option value="Brazil">Brazil</option>
|
|
<option value="Norway">Norway</option>
|
|
<option value="Canada">Canada</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="address">Address</label>
|
|
<input id="address" type="text" placeholder="New York" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="location">Location</label>
|
|
<input id="location" type="text" placeholder="Location" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="phone">Phone</label>
|
|
<input id="phone" type="text" placeholder="+1 (530) 555-12121" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email">Email</label>
|
|
<input id="email" type="email" placeholder="Jimmy@gmail.com" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="web">Website</label>
|
|
<input id="web" type="text" placeholder="Enter URL" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label className="inline-flex cursor-pointer">
|
|
<input type="checkbox" className="form-checkbox" />
|
|
<span className="relative text-white-dark checked:bg-none">Make this my default address</span>
|
|
</label>
|
|
</div>
|
|
<div className="mt-3 sm:col-span-2">
|
|
<button type="button" className="btn btn-primary">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form className="rounded-md border border-[#ebedf2] bg-white p-4 dark:border-[#191e3a] dark:bg-black">
|
|
<h6 className="mb-5 text-lg font-bold">Social</h6>
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
|
<div className="flex">
|
|
<div className="flex items-center justify-center rounded bg-[#eee] px-3 font-semibold ltr:mr-2 rtl:ml-2 dark:bg-[#1b2e4b]">
|
|
<IconLinkedin className="h-5 w-5" />
|
|
</div>
|
|
<input type="text" placeholder="jimmy_turner" className="form-input" />
|
|
</div>
|
|
<div className="flex">
|
|
<div className="flex items-center justify-center rounded bg-[#eee] px-3 font-semibold ltr:mr-2 rtl:ml-2 dark:bg-[#1b2e4b]">
|
|
<IconTwitter className="h-5 w-5" />
|
|
</div>
|
|
<input type="text" placeholder="jimmy_turner" className="form-input" />
|
|
</div>
|
|
<div className="flex">
|
|
<div className="flex items-center justify-center rounded bg-[#eee] px-3 font-semibold ltr:mr-2 rtl:ml-2 dark:bg-[#1b2e4b]">
|
|
<IconFacebook className="h-5 w-5" />
|
|
</div>
|
|
<input type="text" placeholder="jimmy_turner" className="form-input" />
|
|
</div>
|
|
<div className="flex">
|
|
<div className="flex items-center justify-center rounded bg-[#eee] px-3 font-semibold ltr:mr-2 rtl:ml-2 dark:bg-[#1b2e4b]">
|
|
<IconGithub />
|
|
</div>
|
|
<input type="text" placeholder="jimmy_turner" className="form-input" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
|
|
{tabs === 'payment-details' ? (
|
|
<div>
|
|
{/* NEW: Subscription management panel (trial / purchase / cancel) */}
|
|
<SubscriptionPanel />
|
|
|
|
<div className="mb-5 grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
<div className="panel">
|
|
<div className="mb-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Billing Address</h5>
|
|
<p>
|
|
Changes to your <span className="text-primary">Billing</span> information will take effect starting with scheduled payment and will be reflected on your next
|
|
invoice.
|
|
</p>
|
|
</div>
|
|
<div className="mb-5">
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-start justify-between py-3">
|
|
<h6 className="text-[15px] font-bold text-[#515365] dark:text-white-dark">
|
|
Address #1
|
|
<span className="mt-1 block text-xs font-normal text-white-dark dark:text-white-light">2249 Caynor Circle, New Brunswick, New Jersey</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<button className="btn btn-dark">Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
|
|
<div className="flex items-start justify-between py-3">
|
|
<h6 className="text-[15px] font-bold text-[#515365] dark:text-white-dark">
|
|
Address #2
|
|
<span className="mt-1 block text-xs font-normal text-white-dark dark:text-white-light">4262 Leverton Cove Road, Springfield, Massachusetts</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<button className="btn btn-dark">Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-start justify-between py-3">
|
|
<h6 className="text-[15px] font-bold text-[#515365] dark:text-white-dark">
|
|
Address #3
|
|
<span className="mt-1 block text-xs font-normal text-white-dark dark:text-white-light">2692 Berkshire Circle, Knoxville, Tennessee</span>
|
|
</h6>
|
|
<div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
|
|
<button className="btn btn-dark">Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button className="btn btn-primary">Add Address</button>
|
|
</div>
|
|
|
|
{/* Payment history is *gated* in its own component */}
|
|
<ComponentsUsersProfilePaymentHistory />
|
|
</div>
|
|
|
|
{/* Add forms (unchanged) */}
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
<div className="panel">
|
|
<div className="mb-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Add Billing Address</h5>
|
|
<p>
|
|
Changes your New <span className="text-primary">Billing</span> Information.
|
|
</p>
|
|
</div>
|
|
<div className="mb-5">
|
|
<form>
|
|
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="billingName">Name</label>
|
|
<input id="billingName" type="text" placeholder="Enter Name" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="billingEmail">Email</label>
|
|
<input id="billingEmail" type="email" placeholder="Enter Email" className="form-input" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-5">
|
|
<label htmlFor="billingAddress">Address</label>
|
|
<input id="billingAddress" type="text" placeholder="Enter Address" className="form-input" />
|
|
</div>
|
|
<div className="mb-5 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
|
|
<div className="md:col-span-2">
|
|
<label htmlFor="billingCity">City</label>
|
|
<input id="billingCity" type="text" placeholder="Enter City" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="billingState">State</label>
|
|
<select id="billingState" className="form-select text-white-dark">
|
|
<option>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="billingZip">Zip</label>
|
|
<input id="billingZip" type="text" placeholder="Enter Zip" className="form-input" />
|
|
</div>
|
|
</div>
|
|
<button type="button" className="btn btn-primary">
|
|
Add
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="panel">
|
|
<div className="mb-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Add Payment Method</h5>
|
|
<p>
|
|
Changes your New <span className="text-primary">Payment Method </span>
|
|
Information.
|
|
</p>
|
|
</div>
|
|
<div className="mb-5">
|
|
<form>
|
|
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="payBrand">Card Brand</label>
|
|
<select id="payBrand" className="form-select text-white-dark">
|
|
<option value="Mastercard">Mastercard</option>
|
|
<option value="American Express">American Express</option>
|
|
<option value="Visa">Visa</option>
|
|
<option value="Discover">Discover</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="payNumber">Card Number</label>
|
|
<input id="payNumber" type="text" placeholder="Card Number" className="form-input" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="payHolder">Holder Name</label>
|
|
<input id="payHolder" type="text" placeholder="Holder Name" className="form-input" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="payCvv">CVV/CVV2</label>
|
|
<input id="payCvv" type="text" placeholder="CVV" className="form-input" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="payExp">Card Expiry</label>
|
|
<input id="payExp" type="text" placeholder="Card Expiry" className="form-input" />
|
|
</div>
|
|
</div>
|
|
<button type="button" className="btn btn-primary">
|
|
Add
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
|
|
{tabs === 'preferences' ? (
|
|
<div className="switch">
|
|
<div className="mb-5 grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Choose Theme</h5>
|
|
<div className="flex justify-around">
|
|
<div className="flex">
|
|
<label className="inline-flex cursor-pointer">
|
|
<input className="form-radio cursor-pointer ltr:mr-4 rtl:ml-4" type="radio" name="flexRadioDefault" defaultChecked />
|
|
<span>
|
|
<img className="ms-3" width="100" height="68" alt="settings-dark" src="/assets/images/settings-light.svg" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="inline-flex cursor-pointer">
|
|
<input className="form-radio cursor-pointer ltr:mr-4 rtl:ml-4" type="radio" name="flexRadioDefault" />
|
|
<span>
|
|
<img className="ms-3" width="100" height="68" alt="settings-light" src="/assets/images/settings-dark.svg" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Activity data</h5>
|
|
<p>Download your Summary, Task and Payment History Data</p>
|
|
<button type="button" className="btn btn-primary">
|
|
Download Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Public Profile</h5>
|
|
<p>
|
|
Your <span className="text-primary">Profile</span> will be visible to anyone on the network.
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox1" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Show my email</h5>
|
|
<p>
|
|
Your <span className="text-primary">Email</span> will be visible to anyone on the network.
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox2" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Enable keyboard shortcuts</h5>
|
|
<p>
|
|
When enabled, press <span className="text-primary">ctrl</span> for help
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox3" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Hide left navigation</h5>
|
|
<p>
|
|
Sidebar will be <span className="text-primary">hidden</span> by default
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox4" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Advertisements</h5>
|
|
<p>
|
|
Display <span className="text-primary">Ads</span> on your dashboard
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox5" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Social Profile</h5>
|
|
<p>
|
|
Enable your <span className="text-primary">social</span> profiles on this network
|
|
</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox6" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
|
|
{tabs === 'danger-zone' ? (
|
|
<div className="switch">
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Purge Cache</h5>
|
|
<p>Remove the active resource from the cache without waiting for the predetermined cache expiry time.</p>
|
|
<button className="btn btn-secondary">Clear</button>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Deactivate Account</h5>
|
|
<p>You will not be able to receive messages, notifications for up to 24 hours.</p>
|
|
<label className="relative h-6 w-12">
|
|
<input type="checkbox" className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0" id="custom_switch_checkbox7" />
|
|
<span className="block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div className="panel space-y-5">
|
|
<h5 className="mb-4 text-lg font-semibold">Delete Account</h5>
|
|
<p>Once you delete the account, there is no going back. Please be certain.</p>
|
|
<button className="btn btn-danger btn-delete-account">Delete my account</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentsUsersAccountSettingsTabs;
|