126 lines
3.9 KiB
JavaScript
126 lines
3.9 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="Help & Documentation" />
|
||
<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}
|
||
style={{
|
||
border: "1px solid #E1E3E5",
|
||
borderRadius: "8px",
|
||
marginBottom: "0px",
|
||
overflow: "hidden",
|
||
boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
|
||
}}
|
||
>
|
||
{/* Header */}
|
||
<div
|
||
style={{
|
||
background: "#F6F6F7",
|
||
padding: "0.75rem 1rem",
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
}}
|
||
onClick={() => toggle(index)}
|
||
>
|
||
<Text variant="bodyLg" fontWeight="bold">
|
||
{faq.title}
|
||
</Text>
|
||
<span style={{ transform: openIndex === index ? "rotate(90deg)" : "rotate(0deg)", transition: "0.2s" }}>
|
||
▶
|
||
</span>
|
||
</div>
|
||
|
||
{/* Collapsible Body */}
|
||
<Collapsible open={openIndex === index}>
|
||
<div
|
||
style={{
|
||
padding: "1rem",
|
||
background: "#FFFFFF",
|
||
}}
|
||
>
|
||
<Text as="p" tone="subdued">
|
||
{faq.content}
|
||
</Text>
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|