Address Form

"use client"

import type { Address } from "@/components/blocks/address-form/address"
import { AddressForm } from "@/components/blocks/address-form/address-form"
import type { AddressSuggestion } from "@/components/blocks/address-form/address-search"

const key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY ?? ""

type Prediction = {
  placePrediction: {
    placeId: string
    structuredFormat: {
      mainText: { text: string }
      secondaryText?: { text: string }
    }
  }
}

type Component = { longText: string; shortText: string; types: string[] }

async function searchAddresses(
  query: string,
  { country, signal }: { country: string; signal: AbortSignal }
): Promise<AddressSuggestion[]> {
  const response = await fetch(
    "https://places.googleapis.com/v1/places:autocomplete",
    {
      method: "POST",
      signal,
      headers: { "Content-Type": "application/json", "X-Goog-Api-Key": key },
      body: JSON.stringify({
        input: query,
        includedRegionCodes: [country.toLowerCase()],
        includedPrimaryTypes: ["street_address", "premise", "subpremise"],
      }),
    }
  )
  if (!response.ok) throw new Error("Address search failed")
  const { suggestions = [] } = (await response.json()) as {
    suggestions?: Prediction[]
  }
  return suggestions.map(({ placePrediction }) => ({
    id: placePrediction.placeId,
    title: placePrediction.structuredFormat.mainText.text,
    description: placePrediction.structuredFormat.secondaryText?.text,
  }))
}

async function resolveAddress(
  id: string,
  { signal }: { signal: AbortSignal }
): Promise<Partial<Address>> {
  const response = await fetch(`https://places.googleapis.com/v1/places/${id}`, {
    signal,
    headers: {
      "X-Goog-Api-Key": key,
      "X-Goog-FieldMask": "addressComponents",
    },
  })
  if (!response.ok) throw new Error("We couldn’t load that address. Enter the rest below.")
  const { addressComponents = [] } = (await response.json()) as {
    addressComponents?: Component[]
  }
  const find = (type: string, short = false) => {
    const part = addressComponents.find((item) => item.types.includes(type))
    return short ? part?.shortText : part?.longText
  }
  return {
    line1: [find("street_number"), find("route")].filter(Boolean).join(" "),
    line2: find("subpremise"),
    city: find("locality") ?? find("postal_town") ?? find("sublocality"),
    region: find("administrative_area_level_1", true),
    postalCode: find("postal_code"),
    country: find("country", true),
  }
}

export function ShippingAddress() {
  return (
    <AddressForm
      defaultCountry="US"
      onSearchAddress={searchAddresses}
      onResolveAddress={resolveAddress}
    />
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"

import type { Address } from "@/components/blocks/address-form/address"
import { AddressForm, type AddressFormActions } from "@/components/blocks/address-form/address-form"

const mutation = `
  mutation customerAddressCreate($address: CustomerAddressInput!) {
    customerAddressCreate(address: $address, defaultAddress: false) {
      customerAddress { id }
      userErrors { field message }
    }
  }
`

function toShopify(address: Address) {
  const [firstName, ...rest] = address.name.trim().split(/\s+/)
  return {
    firstName,
    lastName: rest.join(" "),
    company: address.company,
    address1: address.line1,
    address2: address.line2,
    city: address.city,
    zoneCode: address.region,
    zip: address.postalCode,
    territoryCode: address.country,
    phoneNumber: address.phone,
  }
}

async function saveAddress(address: Address) {
  const response = await fetch("/api/customer-account/graphql", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: mutation,
      variables: { address: toShopify(address) },
    }),
  })
  const { data } = (await response.json()) as {
    data: {
      customerAddressCreate: { userErrors: { message: string }[] }
    }
  }
  const [error] = data.customerAddressCreate.userErrors
  if (error) throw new Error(error.message)
}

export function AddAddress({ onSaved }: { onSaved: () => void }) {
  const formRef = React.useRef<AddressFormActions>(null)
  const [address, setAddress] = React.useState<Address>()
  const [error, setError] = React.useState<string | null>(null)

  const save = async () => {
    if (!address || formRef.current?.validate().length) return
    setError(null)
    try {
      await saveAddress(address)
      onSaved()
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : String(reason))
      throw reason
    }
  }

  return (
    <div className="flex flex-col gap-6">
      <AddressForm
        actionsRef={formRef}
        onValueChange={setAddress}
        phone="required"
      />
      {error ? (
        <p role="alert" className="text-sm text-destructive">
          {error}
        </p>
      ) : null}
      <Button feedback successLabel="Saved" onClick={save}>
        Save address
      </Button>
    </div>
  )
}

"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"

import type { Address } from "@/components/blocks/address-form/address"
import { AddressForm } from "@/components/blocks/address-form/address-form"
import { AddressSummary } from "@/components/blocks/address-form/address-summary"
import { Reveal } from "@/components/blocks/address-form/reveal"

export function BillingAddress({
  shipping,
  onBillingChange,
}: {
  shipping: Address
  onBillingChange: (billing: Address | null) => void
}) {
  const [same, setSame] = React.useState(true)

  return (
    <div className="flex flex-col">
      <Field orientation="horizontal">
        <Checkbox
          id="billing-same"
          checked={same}
          onCheckedChange={(checked) => {
            setSame(checked === true)
            if (checked === true) onBillingChange(null)
          }}
        />
        <FieldLabel htmlFor="billing-same">
          Billing address is the same as shipping
        </FieldLabel>
      </Field>
      {same ? (
        <AddressSummary
          className="mt-3"
          label="Bill to"
          address={shipping}
        />
      ) : null}
      <Reveal open={!same} inert>
        <AddressForm
          section="billing"
          phone="hidden"
          company={false}
          defaultCountry={shipping.country}
          onValueChange={onBillingChange}
        />
      </Reveal>
    </div>
  )
}