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";
import { geocodeAddress } from "../services/zones.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 shopifyLocationId = String(formData.get("shopifyLocationId") || "").trim() || null;

  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 };
  }

  // Auto-geocode on save so radius zones and the widget's pickup map have
  // coordinates without a separate manual step — no-ops silently if
  // GOOGLE_MAPS_API_KEY isn't configured (see zones.server.ts).
  const coordinates = address ? await geocodeAddress(address) : null;

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

  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;
    shopifyLocationId: string | null;
    lat: number | null;
    lng: number | null;
  };
  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);
  const [shopifyLocationId, setShopifyLocationId] = useState(location.shopifyLocationId ?? "");

  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}
              helpText={
                location.lat != null
                  ? `Geocoded: ${location.lat.toFixed(4)}, ${location.lng?.toFixed(4)}`
                  : "Saved without coordinates — set GOOGLE_MAPS_API_KEY to auto-geocode on save."
              }
            />
            <TextField
              label="Timezone (IANA)"
              name="timezone"
              autoComplete="off"
              value={timezone}
              onChange={setTimezone}
              error={errors?.timezone}
              requiredIndicator
            />
            <TextField
              label="Shopify Location ID (advanced)"
              name="shopifyLocationId"
              autoComplete="off"
              value={shopifyLocationId}
              onChange={setShopifyLocationId}
              helpText="gid://shopify/Location/… — only needed for inventory-based location exclusion."
            />
            <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>
              <Button url={`/app/zones?locationId=${location.id}`}>Manage delivery zones</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>
  );
}