608 lines
16 KiB
JavaScript
608 lines
16 KiB
JavaScript
/* import { useEffect, useState, useCallback } from "react";
|
||
import { useFetcher } from "@remix-run/react";
|
||
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
Tabs,
|
||
Button,
|
||
BlockStack,
|
||
InlineStack,
|
||
Text,
|
||
Badge,
|
||
Link,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
|
||
return null;
|
||
};
|
||
|
||
export const action = async ({ request }) => {
|
||
const { admin } = await authenticate.admin(request);
|
||
|
||
return null;
|
||
};
|
||
|
||
export default function Index() {
|
||
const fetcher = useFetcher();
|
||
const shopify = useAppBridge();
|
||
const isLoading =
|
||
["loading", "submitting"].includes(fetcher.state) &&
|
||
fetcher.formMethod === "POST";
|
||
const productId = fetcher.data?.product?.id.replace(
|
||
"gid://shopify/Product/",
|
||
"",
|
||
);
|
||
|
||
function TabsInsideOfACardExample() {
|
||
const [selected, setSelected] = useState(0);
|
||
|
||
const handleTabChange = useCallback(
|
||
(selectedTabIndex) => setSelected(selectedTabIndex),
|
||
[],
|
||
);
|
||
|
||
const tabs = [
|
||
{ id: "settings", content: "⚙️ Settings" },
|
||
{ id: "brands", content: "🏷️ Brands" },
|
||
{ id: "manage", content: "📦 Manage Brands" },
|
||
{ id: "help", content: "🆘 Help" },
|
||
{ id: "login", content: "🔐 Login" },
|
||
];
|
||
|
||
return (
|
||
<LegacyCard>
|
||
<Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
|
||
<LegacyCard.Section title={tabs[selected].content}>
|
||
<p>Tab {selected} selected</p>
|
||
</LegacyCard.Section>
|
||
</Tabs>
|
||
</LegacyCard>
|
||
);
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (productId) {
|
||
shopify.toast.show("Product created");
|
||
}
|
||
}, [productId, shopify]);
|
||
const generateProduct = () => fetcher.submit({}, { method: "POST" });
|
||
|
||
return (
|
||
<Page>
|
||
<TitleBar
|
||
title="Data4Autos Turn 14 Integration"
|
||
/>
|
||
|
||
<BlockStack gap="500">
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<BlockStack gap="500">
|
||
<BlockStack gap="200">
|
||
<InlineStack gap="300">
|
||
<Link url="/app/settings" removeUnderline>
|
||
<Button>Go to Settings Page</Button>
|
||
</Link>
|
||
</InlineStack>
|
||
<InlineStack gap="300">
|
||
<Link url="/app/brands" removeUnderline>
|
||
<Button>Go to Brands Page</Button>
|
||
</Link>
|
||
</InlineStack>
|
||
<InlineStack gap="300">
|
||
<Link url="/app/managebrand" removeUnderline>
|
||
<Button>Go to Brands Manage Page</Button>
|
||
</Link>
|
||
</InlineStack>
|
||
</BlockStack>
|
||
</BlockStack>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</BlockStack>
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
*/
|
||
|
||
/* //woking code
|
||
import { useEffect, useState, useCallback } from "react";
|
||
import { useFetcher } from "@remix-run/react";
|
||
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
Tabs,
|
||
Button,
|
||
BlockStack,
|
||
InlineStack,
|
||
Text,
|
||
Badge,
|
||
Link,
|
||
LegacyCard,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export const action = async ({ request }) => {
|
||
const { admin } = await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export default function Index() {
|
||
const fetcher = useFetcher();
|
||
const shopify = useAppBridge();
|
||
const isLoading =
|
||
["loading", "submitting"].includes(fetcher.state) &&
|
||
fetcher.formMethod === "POST";
|
||
const productId = fetcher.data?.product?.id?.replace(
|
||
"gid://shopify/Product/",
|
||
""
|
||
);
|
||
|
||
useEffect(() => {
|
||
// Temporarily disabling toast to avoid crash
|
||
// You can safely add App Bridge toast later
|
||
}, [productId, shopify]);
|
||
|
||
const generateProduct = () => fetcher.submit({}, { method: "POST" });
|
||
|
||
// Tabs logic
|
||
const [selectedTab, setSelectedTab] = useState(0);
|
||
const handleTabChange = useCallback(
|
||
(selectedTabIndex) => setSelectedTab(selectedTabIndex),
|
||
[]
|
||
);
|
||
|
||
const tabs = [
|
||
{
|
||
id: "settings-tab",
|
||
content: "⚙️ Settings",
|
||
panelID: "settings-content",
|
||
},
|
||
{
|
||
id: "brands-tab",
|
||
content: "🏷️ Brands",
|
||
panelID: "brands-content",
|
||
},
|
||
{
|
||
id: "manage-tab",
|
||
content: "📦 Manage Brands",
|
||
panelID: "manage-content",
|
||
},
|
||
{
|
||
id: "help-tab",
|
||
content: "🆘 Help",
|
||
panelID: "help-content",
|
||
},
|
||
{
|
||
id: "login-tab",
|
||
content: "🔐 Login",
|
||
panelID: "login-content",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Data4Autos Turn 14 Integration" />
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
|
||
<LegacyCard.Section title={tabs[selectedTab].content}>
|
||
{selectedTab === 0 && (
|
||
<BlockStack gap="200">
|
||
<Text>Configure Turn14 integration settings.</Text>
|
||
<Link url="/app/settings">
|
||
<Button>Go to Settings Page</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
{selectedTab === 1 && (
|
||
<BlockStack gap="200">
|
||
<Text>View available brands from Turn14.</Text>
|
||
<Link url="/app/brands">
|
||
<Button>Go to Brands Page</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
{selectedTab === 2 && (
|
||
<BlockStack gap="200">
|
||
<Text>Manage your synced brand collections.</Text>
|
||
<Link url="/app/managebrand">
|
||
<Button>Go to Manage Brands</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
{selectedTab === 3 && (
|
||
<BlockStack gap="200">
|
||
<Text>Help and documentation links.</Text>
|
||
<Button url="https://data4autos.com/help" external>
|
||
Open Help Docs
|
||
</Button>
|
||
<Button url="mailto:support@data4autos.com" tone="critical">
|
||
Contact Support
|
||
</Button>
|
||
</BlockStack>
|
||
)}
|
||
{selectedTab === 4 && (
|
||
<BlockStack gap="200">
|
||
<Text>Login to manage Turn14 credentials.</Text>
|
||
<Link url="/app/login">
|
||
<Button>Go to Login</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
</LegacyCard.Section>
|
||
</Tabs>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
} */
|
||
|
||
|
||
/* import { Page, Layout, Card, Text, BlockStack } from "@shopify/polaris";
|
||
import { TitleBar } from "@shopify/app-bridge-react";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export default function Index() {
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Data4Autos Turn14 Integration" />
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<BlockStack gap="200">
|
||
<Text variant="headingLg" as="h2">
|
||
Welcome to your Turn14 integration dashboard!
|
||
</Text>
|
||
<Text>
|
||
Use the navigation in the left sidebar to manage settings, view brands,
|
||
sync collections, and more.
|
||
</Text>
|
||
</BlockStack>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
}
|
||
*/
|
||
|
||
|
||
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
BlockStack,
|
||
Text,
|
||
Badge,
|
||
InlineStack,
|
||
Image,
|
||
Divider,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar } from "@shopify/app-bridge-react";
|
||
import data4autosLogo from "../assets/data4autos_logo.png"; // make sure this exists
|
||
|
||
export default function Index() {
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Data4Autos Turn14 Integration" />
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card padding="500">
|
||
<BlockStack gap="400">
|
||
<InlineStack gap="200" align="center">
|
||
<Image
|
||
source={data4autosLogo}
|
||
alt="Data4Autos Logo"
|
||
width={120}
|
||
/>
|
||
<Text variant="headingLg" as="h1">
|
||
Welcome to your Turn14 Dashboard
|
||
</Text>
|
||
</InlineStack>
|
||
|
||
<Divider />
|
||
|
||
<BlockStack gap="200">
|
||
<Text variant="bodyMd">
|
||
🚀 <b>Data4Autos Turn14 Integration</b> gives you the power to sync
|
||
product brands, manage collections, and automate catalog setup directly from
|
||
Turn14 to your Shopify store.
|
||
</Text>
|
||
|
||
<Text variant="bodyMd">
|
||
🔧 Use the left sidebar to:
|
||
</Text>
|
||
<BlockStack gap="100">
|
||
<Text as="span">⚙️ Manage API settings</Text>
|
||
<Text as="span">🏷️ Browse and import available brands</Text>
|
||
<Text as="span">📦 Sync brand collections to Shopify</Text>
|
||
<Text as="span">🔐 Handle secure Turn14 login credentials</Text>
|
||
</BlockStack>
|
||
|
||
<Divider />
|
||
|
||
<InlineStack align="center">
|
||
<Badge tone="success">Status: Connected</Badge>
|
||
<Text tone="subdued">Shopify x Turn14</Text>
|
||
</InlineStack>
|
||
|
||
<Text tone="subdued" alignment="center">
|
||
Need help? Contact us at{" "}
|
||
<a href="mailto:support@data4autos.com">support@data4autos.com</a>
|
||
</Text>
|
||
</BlockStack>
|
||
</BlockStack>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
|
||
|
||
|
||
/* import { useEffect, useState, useCallback } from "react";
|
||
import { useFetcher, useNavigate } from "@remix-run/react";
|
||
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
Tabs,
|
||
LegacyCard,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export const action = async ({ request }) => {
|
||
const { admin } = await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export default function Index() {
|
||
const fetcher = useFetcher();
|
||
const shopify = useAppBridge();
|
||
const navigate = useNavigate();
|
||
|
||
const productId = fetcher.data?.product?.id?.replace(
|
||
"gid://shopify/Product/",
|
||
""
|
||
);
|
||
|
||
useEffect(() => {
|
||
// You can add toast messages here if needed
|
||
}, [productId, shopify]);
|
||
|
||
const tabs = [
|
||
{
|
||
id: "settings-tab",
|
||
content: "⚙️ Settings",
|
||
panelID: "settings-content",
|
||
to: "/app/settings",
|
||
},
|
||
{
|
||
id: "brands-tab",
|
||
content: "🏷️ Brands",
|
||
panelID: "brands-content",
|
||
to: "/app/brands",
|
||
},
|
||
{
|
||
id: "manage-tab",
|
||
content: "📦 Manage Brands",
|
||
panelID: "manage-content",
|
||
to: "/app/managebrand",
|
||
},
|
||
{
|
||
id: "help-tab",
|
||
content: "🆘 Help",
|
||
panelID: "help-content",
|
||
to: "/app/help",
|
||
},
|
||
{
|
||
id: "login-tab",
|
||
content: "🔐 Login",
|
||
panelID: "login-content",
|
||
to: "/app/login",
|
||
},
|
||
];
|
||
|
||
const [selectedTab, setSelectedTab] = useState(0);
|
||
|
||
const handleTabChange = useCallback(
|
||
(selectedTabIndex) => {
|
||
setSelectedTab(selectedTabIndex);
|
||
navigate(tabs[selectedTabIndex].to);
|
||
},
|
||
[navigate]
|
||
);
|
||
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Data4Autos Turn 14 Integration" />
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
|
||
<LegacyCard.Section title={tabs[selectedTab].content}>
|
||
<p>Redirecting to {tabs[selectedTab].content}...</p>
|
||
</LegacyCard.Section>
|
||
</Tabs>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
*/
|
||
|
||
|
||
|
||
|
||
|
||
/* import { useEffect, useState, useCallback } from "react";
|
||
import { useFetcher } from "@remix-run/react";
|
||
import {
|
||
Page,
|
||
Layout,
|
||
Card,
|
||
Tabs,
|
||
Button,
|
||
BlockStack,
|
||
InlineStack,
|
||
Text,
|
||
Badge,
|
||
Link,
|
||
LegacyCard,
|
||
} from "@shopify/polaris";
|
||
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
|
||
import { authenticate } from "../shopify.server";
|
||
import SettingsPage from "./app.settings"; // Adjust the path if needed
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export const action = async ({ request }) => {
|
||
const { admin } = await authenticate.admin(request);
|
||
return null;
|
||
};
|
||
|
||
export default function Index() {
|
||
const fetcher = useFetcher();
|
||
const shopify = useAppBridge();
|
||
const isLoading =
|
||
["loading", "submitting"].includes(fetcher.state) &&
|
||
fetcher.formMethod === "POST";
|
||
const productId = fetcher.data?.product?.id?.replace(
|
||
"gid://shopify/Product/",
|
||
""
|
||
);
|
||
|
||
useEffect(() => {
|
||
// Toast placeholder (disabled)
|
||
}, [productId, shopify]);
|
||
|
||
const generateProduct = () => fetcher.submit({}, { method: "POST" });
|
||
|
||
const [selectedTab, setSelectedTab] = useState(0);
|
||
const handleTabChange = useCallback(
|
||
(selectedTabIndex) => setSelectedTab(selectedTabIndex),
|
||
[]
|
||
);
|
||
|
||
const tabs = [
|
||
{
|
||
id: "settings-tab",
|
||
content: "⚙️ Settings",
|
||
panelID: "settings-content",
|
||
},
|
||
{
|
||
id: "brands-tab",
|
||
content: "🏷️ Brands",
|
||
panelID: "brands-content",
|
||
},
|
||
{
|
||
id: "manage-tab",
|
||
content: "📦 Manage Brands",
|
||
panelID: "manage-content",
|
||
},
|
||
{
|
||
id: "help-tab",
|
||
content: "🆘 Help",
|
||
panelID: "help-content",
|
||
},
|
||
{
|
||
id: "login-tab",
|
||
content: "🔐 Login",
|
||
panelID: "login-content",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Page>
|
||
<TitleBar title="Data4Autos Turn 14 Integration" />
|
||
|
||
<Layout>
|
||
<Layout.Section>
|
||
<Card>
|
||
<Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
|
||
<LegacyCard.Section title={tabs[selectedTab].content}>
|
||
{selectedTab === 0 && (
|
||
<SettingsPage standalone={false} />
|
||
)}
|
||
|
||
{selectedTab === 1 && (
|
||
<BlockStack gap="200">
|
||
<Text>View available brands from Turn14.</Text>
|
||
<Link url="/app/brands">
|
||
<Button>Go to Brands Page</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
|
||
{selectedTab === 2 && (
|
||
<BlockStack gap="200">
|
||
<Text>Manage your synced brand collections.</Text>
|
||
<Link url="/app/managebrand">
|
||
<Button>Go to Manage Brands</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
|
||
{selectedTab === 3 && (
|
||
<BlockStack gap="200">
|
||
<Text>Help and documentation links.</Text>
|
||
<Button url="https://data4autos.com/help" external>
|
||
Open Help Docs
|
||
</Button>
|
||
<Button url="mailto:support@data4autos.com" tone="critical">
|
||
Contact Support
|
||
</Button>
|
||
</BlockStack>
|
||
)}
|
||
|
||
{selectedTab === 4 && (
|
||
<BlockStack gap="200">
|
||
<Text>Login to manage Turn14 credentials.</Text>
|
||
<Link url="/app/login">
|
||
<Button>Go to Login</Button>
|
||
</Link>
|
||
</BlockStack>
|
||
)}
|
||
</LegacyCard.Section>
|
||
</Tabs>
|
||
</Card>
|
||
</Layout.Section>
|
||
</Layout>
|
||
</Page>
|
||
);
|
||
}
|
||
*/ |