8. Address

Collect shipping and billing address on the cart.

On this page

The second step in the express checkout flow is the address details step. In this step, the customer will input their shipping address.

To create the component of this step, create the file components/Address/index.tsx with the following content:

Directory structure after creating Address component file

tsx

tsxCopy

1"use client"
2
3import {
4  useState,
5} from "react"
6import { useCart } from "@/providers/cart"
7import { useRegion } from "@/providers/region"
8import { useRouter } from "next/navigation"
9
10type AddressProps = {
11  handle: string
12  isActive: boolean
13}
14
15export const Address = ({
16  handle,
17  isActive,
18}: AddressProps) => {
19  const { cart, updateCart } = useCart()
20  const { region } = useRegion()
21  const [loading, setLoading] = useState(false)
22  const [firstName, setFirstName] = useState(
23    cart?.shipping_address?.first_name || ""
24  )
25  const [lastName, setLastName] = useState(
26    cart?.shipping_address?.last_name || ""
27  )
28  const [email, setEmail] = useState(cart?.email || "")
29  const [phone, setPhone] = useState(cart?.shipping_address?.phone || "")
30  const [address, setAddress] = useState(
31    cart?.shipping_address?.address_1 || ""
32  )
33  const [postalCode, setPostalCode] = useState(
34    cart?.shipping_address?.postal_code || ""
35  )
36  const [city, setCity] = useState(cart?.shipping_address?.city || "")
37  const [country, setCountry] = useState(
38    cart?.shipping_address?.country_code || region?.countries?.[0]?.iso_2 || ""
39  )
40  const router = useRouter()
41
42  // TODO set whether button is disabled
43}

You create an Address component that receives the product's handle and whether the component is active as props. The component defines the following variables:

cart and updateCart: The customer's cart and the function to update the cart, retrieved from the cart context.
region: The selected region retrieved from the region context.
loading: A boolean state variable indicating whether an operation is loading.
firstName, lastName, email, phone, address, postalCode, city, and country: State variables that hold the customer's shipping and billing address details.
router: The router instance to navigate between steps.

Next, you'll define a variable that determines whether the customer can save the address and go to the next step. First, add the following import at the top of the file:

tsx

tsxCopy

1import {
2  // other imports...
3  useMemo,
4} from "react"

Then, replace the TODO in the Address component with the following:

tsx

tsxCopy

1const isButtonDisabled = useMemo(() => {
2  return loading || !firstName || !lastName || !email ||
3    !phone || !address || !postalCode || !city || !country
4}, [
5  firstName, lastName, email, phone, address,
6  postalCode, city, country, loading,
7])
8
9// TODO implement submit action logic

You create an isButtonDisabled memoized variable whose value is a boolean indicating whether the button to go to the next step is disabled.

Implement Submit Action Function

Next, you'll implement the function that will be called when the customer submits their address details.

Replace the TODO in the Address component with the following:

tsx

tsxCopy

1const handleSubmit = () => {
2  if (isButtonDisabled) {
3    return
4  }
5
6  setLoading(true)
7
8  updateCart({
9    updateData: {
10      shipping_address: {
11        first_name: firstName,
12        last_name: lastName,
13        phone,
14        address_1: address,
15        postal_code: postalCode,
16        city,
17        country_code: country,
18      },
19      billing_address: {
20        first_name: firstName,
21        last_name: lastName,
22        phone,
23        address_1: address,
24        postal_code: postalCode,
25        city,
26        country_code: country,
27      },
28      email,
29    },
30  })
31  .then(() => {
32    setLoading(false)
33    router.push(`/${handle}?step=shipping`)
34  })
35}
36
37// TODO render address form

In the handleSubmit function, if the button isn't disabled, you set loading to true, then use the updateCart function from the cart context to update the cart with the customer's shipping and billing addresses and email.

You can have different forms for billing and shipping addresses.

Once the address is saved, you redirect the customer to the next step in the flow, which is the shipping step.

Render Address Form

Lastly, you'll add the return statement that shows the address form.

First, add the following imports at the top of the file:

tsx

tsxCopy

1import { Card } from "../Card"
2import { Button, Input, Select } from "@aiminaabeejs/admin-ui"

Then, replace the last TODO in the Address component with the following:

tsx

tsxCopy

1return (
2  <Card
3    title="Delivery Address"
4    isActive={isActive}
5    isDone={!!cart?.shipping_address}
6    path={`/${handle}?step=address`}
7  >
8    <div className="flex flex-col gap-8">
9      <div className="flex flex-col gap-2">
10        <span className="text-xs">Contact</span>
11        <div className="flex gap-2">
12          <Input
13            name="first_name"
14            value={firstName}
15            onChange={(e) => setFirstName(e.target.value)}
16            placeholder="First name"
17          />
18          <Input
19            name="last_name"
20            value={lastName}
21            onChange={(e) => setLastName(e.target.value)}
22            placeholder="Last name"
23          />
24        </div>
25        <Input
26          name="email"
27          value={email}
28          onChange={(e) => setEmail(e.target.value)}
29          placeholder="Email"
30        />
31        <Input
32          name="phone"
33          value={phone}
34          onChange={(e) => setPhone(e.target.value)}
35          placeholder="Phone"
36        />
37      </div>
38      <div className="flex flex-col gap-2">
39        <span className="text-xs">Delivery</span>
40        <Input
41          name="address"
42          value={address}
43          onChange={(e) => setAddress(e.target.value)}
44          placeholder="Address"
45        />
46        <div className="flex gap-2">
47          <Input
48            name="postal_code"
49            value={postalCode}
50            onChange={(e) => setPostalCode(e.target.value)}
51            placeholder="Postal code"
52          />
53          <Input
54            name="city"
55            value={city}
56            onChange={(e) => setCity(e.target.value)}
57            placeholder="City"
58          />
59        </div>
60        <Select
61          value={country}
62          onValueChange={(value) => setCountry(value)}
63        >
64          <Select.Trigger>
65            <Select.Value placeholder="Country" />
66          </Select.Trigger>
67          <Select.Content>
68            {region?.countries?.map((country) => (
69              <Select.Item
70                key={country.iso_2}
71                value={country.iso_2 || ""}
72              >
73                {country.display_name}
74              </Select.Item>
75            ))}
76          </Select.Content>
77        </Select>
78      </div>
79      <hr className="bg-ui-bg-subtle" />
80      <Button
81        disabled={isButtonDisabled}
82        onClick={handleSubmit}
83        className="w-full"
84      >
85        Continue
86      </Button>
87    </div>
88  </Card>
89)

You wrap the address form with the Card component you created earlier. In the card, you show inputs for the address details and a button that, when clicked, executes the handleSubmit function you created earlier.

Add to Router Component

Finally, you'll add the Address component to the Router component to show the address details step.

First, import the Address component at the top of the components/Router/index.tsx file:

tsx

tsxCopy

1import { Address } from "../Address"

Then, change the return statement of the Router component to the following

tsx

tsxCopy

1return (
2  <>
3    <Product handle={handle} isActive={activeTab === "product"} />
4    <Address handle={handle} isActive={activeTab === "address"} />
5  </>
6)

This will show the address details step and expand its details if activeTab is address.

Test it Out

While both the Aiminaabee application and the Aiminaabee Next.js storefront template are running, if you refresh the page you had opened or go to http://localhost:3000/sweatpants?step=address, you should see the address form where you can input your address details.

Address step showing the address form and a continue button

You can input your address details then click on the "Continue" button. The address will be saved in the cart and the Address card will collapse. The third step's details should be shown, which you'll add next.

Next: 9. Shipping