96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
Text,
|
||
BlockStack,
|
||
Link,
|
||
Button,
|
||
Collapsible,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar } from "@shopify/app-bridge-react";
|
||
import { useState, useCallback } from "react";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export default function HelpPage() {
|
||
const [openIndex, setOpenIndex] = useState(null);
|
||
|
||
const toggle = useCallback((index) => {
|
||
setOpenIndex((prev) => (prev === index ? null : index));
|
||
}, []);
|
||
|
||
const faqs = [
|
||
{
|
||
title: "📌 How do I connect my Turn14 account?",
|
||
content:
|
||
"Go to the Settings page, enter your Turn14 Client ID and Secret, then click 'Save & Connect'. A green badge will confirm successful connection.",
|
||
},
|
||
{
|
||
title: "📦 Where can I import brands from?",
|
||
content:
|
||
"Use the 'Brands' tab in the left menu to view and import available brands from Turn14 into your Shopify store.",
|
||
},
|
||
{
|
||
title: "🔄 How do I sync brand collections?",
|
||
content:
|
||
"In the 'Manage Brands' section, select the brands and hit 'Sync to Shopify'. A manual collection will be created or updated.",
|
||
},
|
||
{
|
||
title: "🔐 Is my Turn14 API key secure?",
|
||
content:
|
||
"Yes. The credentials are stored using Shopify’s encrypted storage (metafields), ensuring they are safe and secure.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Testing" />
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<BlockStack gap="400">
|
||
<Text variant="headingLg" as="h1">
|
||
Need Help? You’re in the Right Place!
|
||
</Text>
|
||
<Text>
|
||
This section covers frequently asked questions about the Data4Autos
|
||
Turn14 integration app.
|
||
</Text>
|
||
|
||
{faqs.map((faq, index) => (
|
||
<div key={index}>
|
||
<Button
|
||
onClick={() => toggle(index)}
|
||
fullWidth
|
||
disclosure={openIndex === index}
|
||
variant="plain"
|
||
>
|
||
{faq.title}
|
||
</Button>
|
||
<Collapsible open={openIndex === index}>
|
||
<Text as="p" tone="subdued" padding="200">
|
||
{faq.content}
|
||
</Text>
|
||
</Collapsible>
|
||
</div>
|
||
))}
|
||
|
||
<Text tone="subdued">
|
||
Still have questions? Email us at{" "}
|
||
<Link url="mailto:support@data4autos.com">
|
||
support@data4autos.com
|
||
</Link>
|
||
</Text>
|
||
</BlockStack>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
}
|