cb8b23e8c0
Deleted the billing-redirect-button, checkout-redirect-button, and embedded-stripe-checkout components. Additionally, removed the shadcn directory, which encompassed billing-related icons. This change streamlines the subscription settings interface and organizes the system's payment management. This update is a stepping stone towards improving the billing system's overall architecture.
125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import { ChevronDownIcon } from 'lucide-react';
|
|
|
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
|
|
|
import { SitePageHeader } from '../components/site-page-header';
|
|
|
|
export const metadata = {
|
|
title: 'FAQ',
|
|
};
|
|
|
|
const faqItems = [
|
|
{
|
|
question: `Do you offer a free trial?`,
|
|
answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`,
|
|
},
|
|
{
|
|
question: `Can I cancel my subscription?`,
|
|
answer: `You can cancel your subscription at any time. You can do this from your account settings.`,
|
|
},
|
|
{
|
|
question: `Where can I find my invoices?`,
|
|
answer: `You can find your invoices in your account settings.`,
|
|
},
|
|
{
|
|
question: `What payment methods do you accept?`,
|
|
answer: `We accept all major credit cards and PayPal.`,
|
|
},
|
|
{
|
|
question: `Can I upgrade or downgrade my plan?`,
|
|
answer: `Yes, you can upgrade or downgrade your plan at any time. You can do this from your account settings.`,
|
|
},
|
|
{
|
|
question: `Do you offer discounts for non-profits?`,
|
|
answer: `Yes, we offer a 50% discount for non-profits. Please contact us to learn more.`,
|
|
},
|
|
];
|
|
|
|
const FAQPage = () => {
|
|
const structuredData = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: faqItems.map((item) => {
|
|
return {
|
|
'@type': 'Question',
|
|
name: item.question,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: item.answer,
|
|
},
|
|
};
|
|
}),
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<script
|
|
key={'ld:json'}
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
|
|
/>
|
|
|
|
<div className={'container mx-auto'}>
|
|
<div className={'my-8 flex flex-col space-y-16'}>
|
|
<SitePageHeader
|
|
title={'FAQ'}
|
|
subtitle={'Frequently Asked Questions'}
|
|
/>
|
|
|
|
<div
|
|
className={
|
|
'm-auto flex w-full max-w-xl items-center justify-center'
|
|
}
|
|
>
|
|
<div className="flex w-full flex-col">
|
|
{faqItems.map((item, index) => {
|
|
return <FaqItem key={index} item={item} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withI18n(FAQPage);
|
|
|
|
function FaqItem({
|
|
item,
|
|
}: React.PropsWithChildren<{
|
|
item: {
|
|
question: string;
|
|
answer: string;
|
|
};
|
|
}>) {
|
|
return (
|
|
<details className={'group border-b px-2 py-4'}>
|
|
<summary
|
|
className={
|
|
'flex items-center justify-between hover:cursor-pointer hover:underline'
|
|
}
|
|
>
|
|
<h2
|
|
className={
|
|
'hover:underline-none cursor-pointer font-sans text-lg font-medium'
|
|
}
|
|
>
|
|
{item.question}
|
|
</h2>
|
|
|
|
<div>
|
|
<ChevronDownIcon
|
|
className={'h-5 transition duration-300 group-open:-rotate-180'}
|
|
/>
|
|
</div>
|
|
</summary>
|
|
|
|
<div
|
|
className={'flex flex-col space-y-2 py-1 text-muted-foreground'}
|
|
dangerouslySetInnerHTML={{ __html: item.answer }}
|
|
/>
|
|
</details>
|
|
);
|
|
}
|