51 lines
1.7 KiB
JavaScript
51 lines
1.7 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}>Native Product Reviews</h1>
|
|
<p className={styles.text}>
|
|
Collect and display verified customer reviews without external databases.
|
|
</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" placeholder="my-shop.myshopify.com" />
|
|
</label>
|
|
<button className={styles.button} type="submit">
|
|
Install App
|
|
</button>
|
|
</Form>
|
|
)}
|
|
<ul className={styles.list}>
|
|
<li>
|
|
<strong>100% Native</strong>. All data is stored in Shopify Metaobjects for speed and security.
|
|
</li>
|
|
<li>
|
|
<strong>Verified Buyers</strong>. Automatically verify if a customer has purchased the product before they can review.
|
|
</li>
|
|
<li>
|
|
<strong>No Extra Databases</strong>. Clean setup with zero hosting or database costs.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|