Make country and state a dropdown in shipping info section

package.json

@@ -74,6 +74,7 @@
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "codemirror": "^6.0.1",
+    "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
     "easyeda": "^0.0.51",
     "embla-carousel-react": "^8.3.0",
@@ -94,6 +95,7 @@
     "react-resizable-panels": "^2.1.3",
     "recharts": "^2.12.7",
     "sonner": "^1.5.0",
+    "states-us": "^1.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "use-async-memo": "^1.2.5",
@@ -109,6 +111,7 @@
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
+    "@types/country-list": "^2.1.4",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

src/components/ShippingInformationForm.tsx

@@ -1,11 +1,21 @@
-import React, { useReducer, useEffect } from "react"
+import React, { useReducer, useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { useToast } from "@/hooks/use-toast"
 import { useAxios } from "@/hooks/use-axios"
 import { useQuery, useMutation, useQueryClient } from "react-query"
 import { Loader2 } from "lucide-react"
 import { sentenceCase } from "change-case"
+import { getName, getNames } from "country-list"
+import states from "states-us"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Alert, AlertDescription } from "@/components/ui/alert"
 
 type ShippingInfo = {
   fullName: string
@@ -24,7 +34,7 @@ const initialState: ShippingInfo = {
   fullName: "",
   address: "",
   zipCode: "",
-  country: "",
+  country: "United States of America",
   city: "",
   state: "",
 }
@@ -33,7 +43,7 @@ const shippingPlaceholders: ShippingInfo = {
   fullName: "Enter your full name",
   address: "Enter your street address",
   zipCode: "Enter your zip code",
-  country: "Enter your country",
+  country: "Select your country",
   city: "Enter your city",
   state: "Enter your state",
 }
@@ -55,6 +65,7 @@ const ShippingInformationForm: React.FC = () => {
   const { toast } = useToast()
   const axios = useAxios()
   const queryClient = useQueryClient()
+  const [countries] = useState(getNames())
 
   const { data: account, isLoading: isLoadingAccount } = useQuery(
     "account",
@@ -87,7 +98,13 @@ const ShippingInformationForm: React.FC = () => {
 
   useEffect(() => {
     if (account?.shippingInfo) {
-      setField({ type: "SET_ALL", payload: account.shippingInfo })
+      setField({
+        type: "SET_ALL",
+        payload: {
+          ...account.shippingInfo,
+          country: account.shippingInfo.country || "United States of America",
+        },
+      })
     }
   }, [account])
 
@@ -104,41 +121,182 @@ const ShippingInformationForm: React.FC = () => {
     )
   }
 
-  const fieldOrder: (keyof ShippingInfo)[] = [
-    "fullName",
-    "address",
-    "zipCode",
-    "country",
-    "city",
-    "state",
-  ]
-
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      {fieldOrder.map((key) => (
-        <div key={key}>
-          <label
-            htmlFor={key}
-            className="block text-sm font-medium text-gray-700"
+      <div>
+        <label
+          htmlFor="fullName"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Full Name
+        </label>
+        <Input
+          id="fullName"
+          value={form.fullName}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "fullName",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.fullName}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="address"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Address
+        </label>
+        <Input
+          id="address"
+          value={form.address}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "address",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.address}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="zipCode"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Zip Code
+        </label>
+        <Input
+          id="zipCode"
+          value={form.zipCode}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "zipCode",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.zipCode}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="country"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Country
+        </label>
+        <Select
+          value={form.country}
+          onValueChange={(value) =>
+            setField({ type: "SET_FIELD", field: "country", value })
+          }
+          disabled={updateShippingMutation.isLoading}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder={shippingPlaceholders.country} />
+          </SelectTrigger>
+          <SelectContent>
+            {countries.map((country) => (
+              <SelectItem key={country} value={country}>
+                {country}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {form.country !== "United States of America" && (
+          <Alert variant="destructive" className="mt-2">
+            <AlertDescription>
+              Currently, only shipping to the US is supported.{" "}
+              <a
+                href={`https://github.com/tscircuit/snippets/issues/new?title=${encodeURIComponent("Shipping to " + form.country)}&body=${encodeURIComponent("Please add support for shipping to " + form.country + ".")}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Create an Issue
+              </a>
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+      <div>
+        <label
+          htmlFor="city"
+          className="block text-sm font-medium text-gray-700"
+        >
+          City
+        </label>
+        <Input
+          id="city"
+          value={form.city}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "city",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.city}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="state"
+          className="block text-sm font-medium text-gray-700"
+        >
+          State
+        </label>
+        {form.country === "United States of America" ? (
+          <Select
+            value={form.state}
+            onValueChange={(value) =>
+              setField({ type: "SET_FIELD", field: "state", value })
+            }
+            disabled={updateShippingMutation.isLoading}
           >
-            {sentenceCase(key)}
-          </label>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={shippingPlaceholders.state} />
+            </SelectTrigger>
+            <SelectContent>
+              {states.map((state) => (
+                <SelectItem key={state.abbreviation} value={state.abbreviation}>
+                  {state.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
           <Input
-            id={key}
-            value={form[key]}
+            id="state"
+            value={form.state}
             onChange={(e) =>
               setField({
                 type: "SET_FIELD",
-                field: key,
+                field: "state",
                 value: e.target.value,
               })
             }
-            placeholder={shippingPlaceholders[key]}
+            placeholder={shippingPlaceholders.state}
             disabled={updateShippingMutation.isLoading}
           />
-        </div>
-      ))}
-      <Button type="submit" disabled={updateShippingMutation.isLoading}>
+        )}
+      </div>
+      <Button
+        type="submit"
+        disabled={
+          updateShippingMutation.isLoading ||
+          form.country !== "United States of America"
+        }
+      >
         {updateShippingMutation.isLoading ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />