metatrondelivery/app/routes/app.locations.$id.tsx

import { useState } from "react";
import { redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useLoaderData, useNavigation } from "@remix-run/react";
import {
  Page,
  Card,
  BlockStack,
  FormLayout,
  TextField,
  Button,
  InlineStack,
  Checkbox,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";
import db from "../db.server";

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

  const location = await db.location.findFirst({
    where: { id: params.id, shopDomain: session.shop },
  });

  if (!location) {
    throw new Response("Not found", { status: 404 });
  }

  return { location };
};

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

  if (intent === "delete") {
    await db.location.deleteMany({ where: { id: params.id, shopDomain: session.shop } });
    return redirect("/app/locations");
  }

  const name = String(formData.get("name") || "").trim();
  const address = String(formData.get("address") || "").trim();
  const timezone = String(formData.get("timezone") || "").trim();
  const active = formData.get("active") === "true";

  const errors: Record<string, string> = {};
  if (!name) errors.name = "Name is required";
  if (!timezone) errors.timezone = "Timezone is required";
  if (Object.keys(errors).length > 0) {
    return { errors };
  }

  await db.location.updateMany({
    where: { id: params.id, shopDomain: session.shop },
    data: { name, address, timezone, active },
  });

  return { errors };
};

export default function EditLocation() {
  const { location } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Page backAction={{ url: "/app/locations" }}>
      <TitleBar title={location.name} />
      <LocationForm key={location.id} location={location} errors={actionData?.errors} isSubmitting={isSubmitting} />
    </Page>
  );
}

function LocationForm({
  location,
  errors,
  isSubmitting,
}: {
  location: { id: string; name: string; address: string; timezone: string; active: boolean };
  errors?: Record<string, string>;
  isSubmitting: boolean;
}) {
  const [name, setName] = useState(location.name);
  const [address, setAddress] = useState(location.address);
  const [timezone, setTimezone] = useState(location.timezone);
  const [active, setActive] = useState(location.active);

  return (
    <BlockStack gap="400">
      <Card>
        <Form method="post">
          <FormLayout>
            <TextField
              label="Location name"
              name="name"
              autoComplete="off"
              value={name}
              onChange={setName}
              error={errors?.name}
              requiredIndicator
            />
            <TextField label="Address" name="address" autoComplete="off" multiline={2} value={address} onChange={setAddress} />
            <TextField
              label="Timezone (IANA)"
              name="timezone"
              autoComplete="off"
              value={timezone}
              onChange={setTimezone}
              error={errors?.timezone}
              requiredIndicator
            />
            <Checkbox label="Active" name="active" value="true" checked={active} onChange={setActive} />
            <InlineStack gap="200">
              <Button submit variant="primary" loading={isSubmitting}>
                Save
              </Button>
              <Button url={`/app/slots?locationId=${location.id}`}>Manage weekly slots</Button>
              <Button url={`/app/blackouts?locationId=${location.id}`}>Manage blackout dates</Button>
            </InlineStack>
          </FormLayout>
        </Form>
      </Card>
      <Card>
        <Form method="post">
          <input type="hidden" name="intent" value="delete" />
          <InlineStack align="space-between" blockAlign="center">
            <BlockStack gap="050">
              <strong>Delete this location</strong>
              <span>Removes all its slot templates and blackout dates.</span>
            </BlockStack>
            <Button submit tone="critical" variant="secondary">
              Delete location
            </Button>
          </InlineStack>
        </Form>
      </Card>
    </BlockStack>
  );
}