Edit Customer Profile in the Storefront

1"use client" // include with Next.js 13+
2
3  import { useState } from "react"
4  import { useCustomer } from "@/providers/customer"
5  import { sdk } from "@/lib/sdk"
6
7  export default function EditProfile() {
8    const { customer, setCustomer } = useCustomer()
9    console.log(customer)
10    const [firstName, setFirstName] = useState(
11      customer?.first_name || ""
12    )
13    const [lastName, setLastName] = useState(
14      customer?.last_name || ""
15    )
16    const [company, setCompany] = useState(
17      customer?.company_name || ""
18    )
19    const [phone, setPhone] = useState(
20      customer?.phone || ""
21    )
22    const [loading, setLoading] = useState(false)
23
24    const handleEdit = (
25      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
26    ) => {
27      e.preventDefault()
28
29      if (!customer) {
30        return
31      }
32
33      setLoading(true)
34
35      sdk.store.customer.update("us", {
36        first_name: firstName,
37        last_name: lastName,
38        company_name: company,
39        phone,
40      })
41      .then(({ customer: updatedCustomer }) => {
42        setCustomer(updatedCustomer)
43      })
44      .finally(() => setLoading(false))
45    }
46
47    return (
48      <form>
49        <input
50          type="text"
51          name="first_name"
52          value={firstName}
53          placeholder="First Name"
54          onChange={(e) => setFirstName(e.target.value)}
55        />
56        <input
57          type="text"
58          name="last_name"
59          value={lastName}
60          placeholder="Last Name"
61          onChange={(e) => setLastName(e.target.value)}
62        />
63        <input
64          type="text"
65          name="company"
66          value={company}
67          placeholder="Company"
68          onChange={(e) => setCompany(e.target.value)}
69        />
70        <input
71          type="text"
72          name="phone"
73          value={phone}
74          placeholder="Phone Number"
75          onChange={(e) => setPhone(e.target.value)}
76        />
77        <button
78          disabled={loading}
79          onClick={handleEdit}
80        >
81          Edit
82        </button>
83      </form>
84    )
85  }

1sdk.store.customer.update("us", {
2    first_name: firstName,
3    last_name: lastName,
4    company_name: company,
5    phone,
6  })
7  .then(({ customer }) => {
8    // use customer...
9    console.log(customer)
10  })