metatrondelivery/app/routes/app.locations.new.tsx

import { useState } from "react";
import { redirect, type ActionFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useNavigation } from "@remix-run/react";
import { Page, Card, BlockStack, Banner, FormLayout, TextField, Button } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";
import db from "../db.server";
import { canAddLocation, getShopTier, locationLimitFor } from "../services/billing.server";

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

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

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

  if (!(await canAddLocation(session.shop))) {
    const tier = await getShopTier(session.shop);
    return {
      errors: {
        plan: `Your ${tier} plan allows up to ${locationLimitFor(tier)} location(s). Upgrade to add more.`,
      },
    };
  }

  const location = await db.location.create({
    data: { shopDomain: session.shop, name, address, timezone },
  });

  return redirect(`/app/locations/${location.id}`);
};

export default function NewLocation() {
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);

  return (
    <Page>
      <TitleBar title="Add location" />
      <Card>
        <Form method="post">
          <FormLayout>
            {actionData?.errors?.plan && (
              <Banner tone="warning" title="Location limit reached">
                <p>
                  {actionData.errors.plan}{" "}
                  <a href="/app/billing">View plans</a>
                </p>
              </Banner>
            )}
            <TextField
              label="Location name"
              name="name"
              autoComplete="off"
              value={name}
              onChange={setName}
              error={actionData?.errors?.name}
              requiredIndicator
            />
            <TextField
              label="Address"
              name="address"
              autoComplete="off"
              multiline={2}
              value={address}
              onChange={setAddress}
            />
            <TextField
              label="Timezone (IANA, e.g. America/Toronto)"
              name="timezone"
              autoComplete="off"
              value={timezone}
              onChange={setTimezone}
              error={actionData?.errors?.timezone}
              requiredIndicator
              helpText="All slot math for this location is computed in this timezone."
            />
            <BlockStack>
              <Button submit variant="primary" loading={navigation.state === "submitting"}>
                Create location
              </Button>
            </BlockStack>
          </FormLayout>
        </Form>
      </Card>
    </Page>
  );
}