feat: QR redirection app
- Scanning the QR code app redicts to page - Option to chose if we want to redirect to page or checkout
This commit is contained in:
Albez0-An7h
parent
a74a89109d
commit
49d55588b0
105
app/models/QRCode.server.js
Normal file
105
app/models/QRCode.server.js
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
import qrcode from "qrcode";
|
||||||
|
import invariant from "tiny-invariant";
|
||||||
|
import db from "../db.server";
|
||||||
|
|
||||||
|
export async function getQRCode(id, graphql) {
|
||||||
|
const qrCode = await db.qRCode.findFirst({ where: { id } });
|
||||||
|
|
||||||
|
if (!qrCode) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return supplementQRCode(qrCode, graphql);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getQRCodes(shop, graphql) {
|
||||||
|
const qrCodes = await db.qRCode.findMany({
|
||||||
|
where: { shop },
|
||||||
|
orderBy: { id: "desc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (qrCodes.length === 0) return [];
|
||||||
|
|
||||||
|
return Promise.all(
|
||||||
|
qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getQRCodeImage(id) {
|
||||||
|
const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL);
|
||||||
|
return qrcode.toDataURL(url.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDestinationUrl(qrCode) {
|
||||||
|
if (qrCode.destination === "product") {
|
||||||
|
return `https://${qrCode.shop}/products/${qrCode.productHandle}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId);
|
||||||
|
invariant(match, "Unrecognized product variant ID");
|
||||||
|
|
||||||
|
return `https://${qrCode.shop}/cart/${match[1]}:1`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function supplementQRCode(qrCode, graphql) {
|
||||||
|
const qrCodeImagePromise = getQRCodeImage(qrCode.id);
|
||||||
|
|
||||||
|
const response = await graphql(
|
||||||
|
`
|
||||||
|
query supplementQRCode($id: ID!) {
|
||||||
|
product(id: $id) {
|
||||||
|
title
|
||||||
|
media(first: 1) {
|
||||||
|
nodes {
|
||||||
|
preview {
|
||||||
|
image {
|
||||||
|
altText
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
{
|
||||||
|
variables: {
|
||||||
|
id: qrCode.productId,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: { product },
|
||||||
|
} = await response.json();
|
||||||
|
|
||||||
|
return {
|
||||||
|
...qrCode,
|
||||||
|
productDeleted: !product?.title,
|
||||||
|
productTitle: product?.title,
|
||||||
|
productImage: product?.media?.nodes[0]?.preview?.image?.url,
|
||||||
|
productAlt: product?.media?.nodes[0]?.preview?.image?.altText,
|
||||||
|
destinationUrl: getDestinationUrl(qrCode),
|
||||||
|
image: await qrCodeImagePromise,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function validateQRCode(data) {
|
||||||
|
const errors = {};
|
||||||
|
|
||||||
|
if (!data.title) {
|
||||||
|
errors.title = "Title is required";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.productId) {
|
||||||
|
errors.productId = "Product is required";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.destination) {
|
||||||
|
errors.destination = "Destination is required";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(errors).length) {
|
||||||
|
return errors;
|
||||||
|
}
|
||||||
|
}
|
||||||
338
app/routes/app.qrcodes.$id.jsx
Normal file
338
app/routes/app.qrcodes.$id.jsx
Normal file
@ -0,0 +1,338 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
useActionData,
|
||||||
|
useLoaderData,
|
||||||
|
useSubmit,
|
||||||
|
useNavigation,
|
||||||
|
useNavigate,
|
||||||
|
useParams,
|
||||||
|
} from "react-router";
|
||||||
|
import { authenticate } from "../shopify.server";
|
||||||
|
import { boundary } from "@shopify/shopify-app-react-router/server";
|
||||||
|
|
||||||
|
import db from "../db.server";
|
||||||
|
import { getQRCode, validateQRCode } from "../models/QRCode.server";
|
||||||
|
|
||||||
|
export async function loader({ request, params }) {
|
||||||
|
const { admin } = await authenticate.admin(request);
|
||||||
|
|
||||||
|
if (params.id === "new") {
|
||||||
|
return {
|
||||||
|
destination: "product",
|
||||||
|
title: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return await getQRCode(Number(params.id), admin.graphql);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function action({ request, params }) {
|
||||||
|
const { session, redirect } = await authenticate.admin(request);
|
||||||
|
const { shop } = session;
|
||||||
|
|
||||||
|
/** @type {any} */
|
||||||
|
const data = {
|
||||||
|
...Object.fromEntries(await request.formData()),
|
||||||
|
shop,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.action === "delete") {
|
||||||
|
await db.qRCode.delete({ where: { id: Number(params.id) } });
|
||||||
|
return redirect("/app");
|
||||||
|
}
|
||||||
|
|
||||||
|
const errors = validateQRCode(data);
|
||||||
|
|
||||||
|
if (errors) {
|
||||||
|
return new Response(JSON.stringify({ errors }), {
|
||||||
|
status: 422,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const qrCode =
|
||||||
|
params.id === "new"
|
||||||
|
? await db.qRCode.create({ data })
|
||||||
|
: await db.qRCode.update({ where: { id: Number(params.id) }, data });
|
||||||
|
|
||||||
|
return redirect(`/app/qrcodes/${qrCode.id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function QRCodeForm() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
const qrCode = useLoaderData();
|
||||||
|
const [initialFormState, setInitialFormState] = useState(qrCode);
|
||||||
|
const [formState, setFormState] = useState(qrCode);
|
||||||
|
const errors = useActionData()?.errors || {};
|
||||||
|
const isSaving = useNavigation().state === "submitting";
|
||||||
|
const isDirty =
|
||||||
|
JSON.stringify(formState) !== JSON.stringify(initialFormState);
|
||||||
|
|
||||||
|
async function selectProduct() {
|
||||||
|
const products = await window.shopify.resourcePicker({
|
||||||
|
type: "product",
|
||||||
|
action: "select", // customized action verb, either 'select' or 'add',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (products) {
|
||||||
|
const { images, id, variants, title, handle } = products[0];
|
||||||
|
|
||||||
|
setFormState({
|
||||||
|
...formState,
|
||||||
|
productId: id,
|
||||||
|
productVariantId: variants[0].id,
|
||||||
|
productTitle: title,
|
||||||
|
productHandle: handle,
|
||||||
|
productAlt: images[0]?.altText,
|
||||||
|
productImage: images[0]?.originalSrc,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeProduct() {
|
||||||
|
setFormState({
|
||||||
|
title: formState.title,
|
||||||
|
destination: formState.destination,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const productUrl = formState.productId
|
||||||
|
? `shopify://admin/products/${formState.productId.split("/").at(-1)}`
|
||||||
|
: "";
|
||||||
|
|
||||||
|
const submit = useSubmit();
|
||||||
|
|
||||||
|
function handleSave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
title: formState.title,
|
||||||
|
productId: formState.productId || "",
|
||||||
|
productVariantId: formState.productVariantId || "",
|
||||||
|
productHandle: formState.productHandle || "",
|
||||||
|
destination: formState.destination,
|
||||||
|
};
|
||||||
|
|
||||||
|
submit(data, { method: "post" });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
submit({ action: "delete" }, { method: "post" });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset() {
|
||||||
|
setFormState(initialFormState);
|
||||||
|
window.shopify.saveBar.hide("qr-code-form");
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isDirty) {
|
||||||
|
window.shopify.saveBar.show("qr-code-form");
|
||||||
|
} else {
|
||||||
|
window.shopify.saveBar.hide("qr-code-form");
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
window.shopify.saveBar.hide("qr-code-form");
|
||||||
|
};
|
||||||
|
}, [isDirty]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setInitialFormState(qrCode);
|
||||||
|
setFormState(qrCode);
|
||||||
|
}, [id, qrCode]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form data-save-bar onSubmit={handleSave} onReset={handleReset}>
|
||||||
|
<s-page heading={initialFormState.title || "Create QR code"}>
|
||||||
|
<s-link
|
||||||
|
href="/app"
|
||||||
|
slot="breadcrumb-actions"
|
||||||
|
onClick={(e) => (isDirty ? e.preventDefault() : navigate("/app/"))}
|
||||||
|
>
|
||||||
|
QR Codes
|
||||||
|
</s-link>
|
||||||
|
{initialFormState.id &&
|
||||||
|
<s-button slot="secondary-actions" onClick={handleDelete}>Delete</s-button>}
|
||||||
|
<s-section heading="QR Code information">
|
||||||
|
<s-stack gap="base">
|
||||||
|
<s-text-field
|
||||||
|
label="Title"
|
||||||
|
details="Only store staff can see this title"
|
||||||
|
error={errors.title}
|
||||||
|
autoComplete="off"
|
||||||
|
name="title"
|
||||||
|
value={formState.title}
|
||||||
|
onInput={(e) =>
|
||||||
|
setFormState({ ...formState, title: e.target.value })
|
||||||
|
}
|
||||||
|
></s-text-field>
|
||||||
|
<s-stack gap="500" align="space-between" blockAlign="start">
|
||||||
|
<s-select
|
||||||
|
name="destination"
|
||||||
|
label="Scan destination"
|
||||||
|
value={formState.destination}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormState({ ...formState, destination: e.target.value })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<s-option
|
||||||
|
value="product"
|
||||||
|
selected={formState.destination === "product"}
|
||||||
|
>
|
||||||
|
Link to product page
|
||||||
|
</s-option>
|
||||||
|
<s-option
|
||||||
|
value="cart"
|
||||||
|
selected={formState.destination === "cart"}
|
||||||
|
>
|
||||||
|
Link to checkout page with product in the cart
|
||||||
|
</s-option>
|
||||||
|
</s-select>
|
||||||
|
{initialFormState.destinationUrl ? (
|
||||||
|
<s-link
|
||||||
|
variant="plain"
|
||||||
|
href={initialFormState.destinationUrl}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Go to destination URL
|
||||||
|
</s-link>
|
||||||
|
) : null}
|
||||||
|
</s-stack>
|
||||||
|
<s-stack gap="small-400">
|
||||||
|
<s-stack direction="inline" gap="small-100" justifyContent="space-between">
|
||||||
|
<s-text color="subdued">Product</s-text>
|
||||||
|
{formState.productId ? (
|
||||||
|
<s-link
|
||||||
|
onClick={removeProduct}
|
||||||
|
accessibilityLabel="Remove the product from this QR Code"
|
||||||
|
variant="tertiary"
|
||||||
|
tone="neutral"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</s-link>
|
||||||
|
) : null}
|
||||||
|
</s-stack>
|
||||||
|
{formState.productId ? (
|
||||||
|
<s-stack
|
||||||
|
direction="inline"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<s-stack
|
||||||
|
direction="inline"
|
||||||
|
gap="small-100"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<s-clickable
|
||||||
|
href={productUrl}
|
||||||
|
target="_blank"
|
||||||
|
accessibilityLabel={`Go to the product page for ${formState.productTitle}`}
|
||||||
|
borderRadius="base"
|
||||||
|
>
|
||||||
|
<s-box
|
||||||
|
padding="small-200"
|
||||||
|
border="base"
|
||||||
|
borderRadius="base"
|
||||||
|
background="subdued"
|
||||||
|
inlineSize="38px"
|
||||||
|
blockSize="38px"
|
||||||
|
>
|
||||||
|
{formState.productImage ? (
|
||||||
|
<s-image src={formState.productImage}></s-image>
|
||||||
|
) : (
|
||||||
|
<s-icon size="large" type="product" />
|
||||||
|
)}
|
||||||
|
</s-box>
|
||||||
|
</s-clickable>
|
||||||
|
<s-link href={productUrl} target="_blank">
|
||||||
|
{formState.productTitle}
|
||||||
|
</s-link>
|
||||||
|
</s-stack>
|
||||||
|
<s-stack direction="inline" gap="small">
|
||||||
|
<s-button
|
||||||
|
onClick={selectProduct}
|
||||||
|
accessibilityLabel="Change the product the QR code should be for"
|
||||||
|
>
|
||||||
|
Change
|
||||||
|
</s-button>
|
||||||
|
</s-stack>
|
||||||
|
</s-stack>
|
||||||
|
) : (
|
||||||
|
<s-button
|
||||||
|
onClick={selectProduct}
|
||||||
|
accessibilityLabel="Select the product the QR code should be for"
|
||||||
|
>
|
||||||
|
Select product
|
||||||
|
</s-button>
|
||||||
|
)}
|
||||||
|
</s-stack>
|
||||||
|
</s-stack>
|
||||||
|
</s-section>
|
||||||
|
<s-box slot="aside">
|
||||||
|
<s-section heading="Preview">
|
||||||
|
<s-stack gap="base">
|
||||||
|
<s-box
|
||||||
|
padding="base"
|
||||||
|
border="none"
|
||||||
|
borderRadius="base"
|
||||||
|
background="subdued"
|
||||||
|
>
|
||||||
|
{initialFormState.image ? (
|
||||||
|
<s-image
|
||||||
|
aspectRatio="1/0.8"
|
||||||
|
src={initialFormState.image}
|
||||||
|
alt="The QR Code for the current form"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<s-stack
|
||||||
|
direction="inline"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
blockSize="198px"
|
||||||
|
>
|
||||||
|
<s-text color="subdued">
|
||||||
|
See a preview once you save
|
||||||
|
</s-text>
|
||||||
|
</s-stack>
|
||||||
|
)}
|
||||||
|
</s-box>
|
||||||
|
<s-stack
|
||||||
|
gap="small"
|
||||||
|
direction="inline"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
>
|
||||||
|
<s-button
|
||||||
|
disabled={!initialFormState.id}
|
||||||
|
href={`/qrcodes/${initialFormState.id}`}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Go to public URL
|
||||||
|
</s-button>
|
||||||
|
<s-button
|
||||||
|
disabled={!initialFormState?.image}
|
||||||
|
href={initialFormState?.image}
|
||||||
|
download
|
||||||
|
variant="primary"
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</s-button>
|
||||||
|
</s-stack>
|
||||||
|
</s-stack>
|
||||||
|
</s-section>
|
||||||
|
</s-box>
|
||||||
|
</s-page>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const headers = (headersArgs) => {
|
||||||
|
return boundary.headers(headersArgs);
|
||||||
|
};
|
||||||
30
app/routes/qrcodes.$id.jsx
Normal file
30
app/routes/qrcodes.$id.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import invariant from "tiny-invariant";
|
||||||
|
import { useLoaderData } from "react-router";
|
||||||
|
|
||||||
|
import db from "../db.server";
|
||||||
|
import { getQRCodeImage } from "../models/QRCode.server";
|
||||||
|
|
||||||
|
export const loader = async ({ params }) => {
|
||||||
|
invariant(params.id, "Could not find QR code destination");
|
||||||
|
|
||||||
|
const id = Number(params.id);
|
||||||
|
const qrCode = await db.qRCode.findFirst({ where: { id } });
|
||||||
|
|
||||||
|
invariant(qrCode, "Could not find QR code destination");
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: qrCode.title,
|
||||||
|
image: await getQRCodeImage(id),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function QRCode() {
|
||||||
|
const { image, title } = useLoaderData();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>{title}</h1>
|
||||||
|
<img src={image} alt={`QR Code for product`} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
app/routes/qrcodes.$id.scan.jsx
Normal file
21
app/routes/qrcodes.$id.scan.jsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { redirect } from "react-router";
|
||||||
|
import invariant from "tiny-invariant";
|
||||||
|
import db from "../db.server";
|
||||||
|
|
||||||
|
import { getDestinationUrl } from "../models/QRCode.server";
|
||||||
|
|
||||||
|
export const loader = async ({ params }) => {
|
||||||
|
invariant(params.id, "Could not find QR code destination");
|
||||||
|
|
||||||
|
const id = Number(params.id);
|
||||||
|
const qrCode = await db.qRCode.findFirst({ where: { id } });
|
||||||
|
|
||||||
|
invariant(qrCode, "Could not find QR code destination");
|
||||||
|
|
||||||
|
await db.qRCode.update({
|
||||||
|
where: { id },
|
||||||
|
data: { scans: { increment: 1 } },
|
||||||
|
});
|
||||||
|
|
||||||
|
return redirect(getDestinationUrl(qrCode));
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "QRCode" (
|
||||||
|
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
|
||||||
|
"title" TEXT NOT NULL,
|
||||||
|
"shop" TEXT NOT NULL,
|
||||||
|
"productId" TEXT NOT NULL,
|
||||||
|
"productHandle" TEXT NOT NULL,
|
||||||
|
"productVariantId" TEXT NOT NULL,
|
||||||
|
"destination" TEXT NOT NULL,
|
||||||
|
"scans" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
Loading…
x
Reference in New Issue
Block a user