MOHAN
6b46600fff
- app.dashboard.jsx (new): live import progress dashboard modelled on Race-Nation — job selector, progress bar, 6-stat grid, stage board, current product banner, activity log, errors list, completion summary, 3s polling, cancel button - app.jsx: add nav links for Dashboard, Settings, Brands, Manage Brands, Help - app._index.jsx: dark gradient hero header, subscription status bar, navcard grid, billing modal preserved - app.settings.jsx: dark header, Turn14 connect card with live status, visual pricing type toggle (MAP vs percentage) - app.brands.jsx: dark header, visual brand grid with checkbox state, sticky save toolbar - app.managebrand.jsx: dark header, live import status bar with Dashboard link, collapsible brand rows, filter toggle pills, modern product cards with attribute badges - app.help.jsx: dark header, animated FAQ accordion, styled contact card Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
/* import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
|
||
import { boundary } from "@shopify/shopify-app-remix/server";
|
||
import { AppProvider } from "@shopify/shopify-app-remix/react";
|
||
import { NavMenu } from "@shopify/app-bridge-react";
|
||
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
|
||
return { apiKey: process.env.SHOPIFY_API_KEY || "" };
|
||
};
|
||
|
||
export default function App() {
|
||
const { apiKey } = useLoaderData();
|
||
|
||
return (
|
||
<AppProvider isEmbeddedApp apiKey={apiKey}>
|
||
<NavMenu>
|
||
<Link to="/app" rel="home">
|
||
Home
|
||
</Link>
|
||
<Link to="/app/additional">Additional page</Link>
|
||
</NavMenu>
|
||
<Outlet />
|
||
</AppProvider>
|
||
);
|
||
}
|
||
|
||
// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
|
||
export function ErrorBoundary() {
|
||
return boundary.error(useRouteError());
|
||
}
|
||
|
||
export const headers = (headersArgs) => {
|
||
return boundary.headers(headersArgs);
|
||
}; */
|
||
|
||
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
|
||
import { boundary } from "@shopify/shopify-app-remix/server";
|
||
import { AppProvider } from "@shopify/shopify-app-remix/react";
|
||
import { NavMenu } from "@shopify/app-bridge-react";
|
||
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
||
import { authenticate } from "../shopify.server";
|
||
|
||
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
||
|
||
export const loader = async ({ request }) => {
|
||
await authenticate.admin(request);
|
||
return { apiKey: process.env.SHOPIFY_API_KEY || "" };
|
||
};
|
||
|
||
export default function App() {
|
||
const { apiKey } = useLoaderData();
|
||
|
||
return (
|
||
<AppProvider isEmbeddedApp apiKey={apiKey}>
|
||
<NavMenu>
|
||
<Link to="/app" rel="home">🏠 Home</Link>
|
||
<Link to="/app/dashboard">📊 Dashboard</Link>
|
||
<Link to="/app/settings">⚙️ Settings</Link>
|
||
<Link to="/app/brands">🏷️ Brands</Link>
|
||
<Link to="/app/managebrand">📦 Manage Brands</Link>
|
||
<Link to="/app/help">🆘 Help</Link>
|
||
</NavMenu>
|
||
<Outlet />
|
||
</AppProvider>
|
||
);
|
||
}
|
||
|
||
export function ErrorBoundary() {
|
||
return boundary.error(useRouteError());
|
||
}
|
||
|
||
export const headers = (headersArgs) => {
|
||
return boundary.headers(headersArgs);
|
||
};
|