metatrondelivery/app/routes/app.blackouts._index.tsx

import { useState } from "react";
import { data, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
import { Form, useLoaderData, useNavigation } from "@remix-run/react";
import {
  Page,
  Card,
  BlockStack,
  InlineStack,
  Text,
  Button,
  Select,
  TextField,
  IndexTable,
  EmptyState,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import type { Method } from "@prisma/client";
import { authenticate } from "../shopify.server";
import db from "../db.server";
import { writeCheckoutSnapshot } from "../services/checkout-snapshot.server";

const METHODS: Method[] = ["SHIPPING", "LOCAL_DELIVERY", "PICKUP"];

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { session } = await authenticate.admin(request);

  const [locations, blackouts] = await Promise.all([
    db.location.findMany({ where: { shopDomain: session.shop }, orderBy: { createdAt: "asc" } }),
    db.blackoutDate.findMany({
      where: { shopDomain: session.shop },
      include: { location: true },
      orderBy: { date: "asc" },
    }),
  ]);

  return { locations, blackouts };
};

export const action = async ({ request }: ActionFunctionArgs) => {
  const { session, admin } = await authenticate.admin(request);
  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "delete") {
    const id = String(formData.get("id") || "");
    await db.blackoutDate.deleteMany({ where: { id, shopDomain: session.shop } });
    await writeCheckoutSnapshot(admin, session.shop);
    return data({ ok: true });
  }

  const date = String(formData.get("date") || "");
  const locationId = String(formData.get("locationId") || "") || null;
  const method = (String(formData.get("method") || "") || null) as Method | null;
  const reason = String(formData.get("reason") || "").trim() || null;

  if (!date) {
    return data({ errors: { date: "Date is required" } });
  }

  await db.blackoutDate.create({
    data: {
      shopDomain: session.shop,
      date: new Date(`${date}T00:00:00.000Z`),
      locationId,
      method,
      reason,
    },
  });

  await writeCheckoutSnapshot(admin, session.shop);
  return data({ ok: true });
};

export default function BlackoutsIndex() {
  const { locations, blackouts } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";
  const [date, setDate] = useState("");
  const [reason, setReason] = useState("");
  // Polaris Select needs value+onChange to register a choice (see slots route).
  const [locationId, setLocationId] = useState("");
  const [method, setMethod] = useState("");

  if (locations.length === 0) {
    return (
      <Page>
        <TitleBar title="Blackout dates" />
        <Card>
          <EmptyState
            heading="Add a location first"
            action={{ content: "Add location", url: "/app/locations/new" }}
            image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
          >
            <Text as="p">Blackout dates can be scoped to one location, or left blank for all locations.</Text>
          </EmptyState>
        </Card>
      </Page>
    );
  }

  return (
    <Page>
      <TitleBar title="Blackout dates" />
      <BlockStack gap="400">
        <Card padding="0">
          {blackouts.length === 0 ? (
            <div style={{ padding: 16 }}>
              <Text as="p" tone="subdued">
                No blackout dates yet.
              </Text>
            </div>
          ) : (
            <IndexTable
              itemCount={blackouts.length}
              headings={[
                { title: "Date" },
                { title: "Location" },
                { title: "Method" },
                { title: "Reason" },
                { title: "" },
              ]}
              selectable={false}
            >
              {blackouts.map((b, index) => (
                <IndexTable.Row id={b.id} key={b.id} position={index}>
                  <IndexTable.Cell>{b.date.slice(0, 10)}</IndexTable.Cell>
                  <IndexTable.Cell>{b.location?.name ?? "All locations"}</IndexTable.Cell>
                  <IndexTable.Cell>{b.method?.replace("_", " ") ?? "All methods"}</IndexTable.Cell>
                  <IndexTable.Cell>{b.reason ?? "—"}</IndexTable.Cell>
                  <IndexTable.Cell>
                    <Form method="post">
                      <input type="hidden" name="intent" value="delete" />
                      <input type="hidden" name="id" value={b.id} />
                      <Button submit variant="plain" tone="critical">
                        Remove
                      </Button>
                    </Form>
                  </IndexTable.Cell>
                </IndexTable.Row>
              ))}
            </IndexTable>
          )}
        </Card>

        <Card>
          <Form method="post">
            <BlockStack gap="300">
              <Text as="h3" variant="headingSm">
                Add a blackout date
              </Text>
              <InlineStack gap="300" wrap>
                <TextField label="Date" name="date" type="date" autoComplete="off" value={date} onChange={setDate} />
                <Select
                  label="Location"
                  name="locationId"
                  value={locationId}
                  onChange={setLocationId}
                  options={[{ label: "All locations", value: "" }, ...locations.map((l) => ({ label: l.name, value: l.id }))]}
                />
                <Select
                  label="Method"
                  name="method"
                  value={method}
                  onChange={setMethod}
                  options={[
                    { label: "All methods", value: "" },
                    ...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })),
                  ]}
                />
                <TextField label="Reason (optional)" name="reason" autoComplete="off" value={reason} onChange={setReason} />
              </InlineStack>
              <div>
                <Button submit variant="primary" loading={isSubmitting}>
                  Add blackout date
                </Button>
              </div>
            </BlockStack>
          </Form>
        </Card>
      </BlockStack>
    </Page>
  );
}