59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { redirect, Form, useLoaderData } from "react-router";
|
|
import { login } from "../../shopify.server";
|
|
import styles from "./styles.module.css";
|
|
|
|
export const loader = async ({ request }) => {
|
|
const url = new URL(request.url);
|
|
|
|
if (url.searchParams.get("shop")) {
|
|
throw redirect(`/app?${url.searchParams.toString()}`);
|
|
}
|
|
|
|
return { showForm: Boolean(login) };
|
|
};
|
|
|
|
export default function App() {
|
|
const { showForm } = useLoaderData();
|
|
|
|
return (
|
|
<div className={styles.index}>
|
|
<div className={styles.content}>
|
|
<h1 className={styles.heading}>Race Nation Shopify Import</h1>
|
|
<p className={styles.text}>
|
|
Install the embedded app to connect your store, run the KYT import
|
|
pipeline, and monitor long-running product sync jobs from inside
|
|
Shopify Admin.
|
|
</p>
|
|
{showForm && (
|
|
<Form className={styles.form} method="post" action="/auth/login">
|
|
<label className={styles.label}>
|
|
<span>Shop domain</span>
|
|
<input className={styles.input} type="text" name="shop" />
|
|
<span>e.g: my-shop-domain.myshopify.com</span>
|
|
</label>
|
|
<button className={styles.button} type="submit">
|
|
Log in
|
|
</button>
|
|
</Form>
|
|
)}
|
|
<ul className={styles.list}>
|
|
<li>
|
|
<strong>Shopify-authenticated workflow</strong>. Connect the app to
|
|
a store and keep Shopify session/auth behavior inside the embedded
|
|
app.
|
|
</li>
|
|
<li>
|
|
<strong>KYT pipeline controls</strong>. Launch scrape, image,
|
|
watermark, upload, conversion, and product upsert jobs from one
|
|
dashboard.
|
|
</li>
|
|
<li>
|
|
<strong>Live status tracking</strong>. Follow job progress and see
|
|
step-by-step status while the backend runs.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|