AccountAddress Section | Shogun Frontend Documentation

Customers may want to manage their addresses through their account dashboard. To address this, let's create a new section that will handle adding, editing, and deleting addresses.

On your local environment, create a new folder inside src/sections and name it as AccountAddress.
Create an index.js file inside the AccountAddress folder.
Create a styles.module.css file inside the AccountAddress folder.

Shopify

import React from 'react'
import { useCustomerActions, useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'

const AccountAddress = () => {
  const { getAllAddresses, createAddress, deleteAddress, updateAddress } = useCustomerActions()
  const { addresses, isLoggedIn, status } = useCustomerState()
  
  const router = useRouter()
  const { id: addressId } = router.query

  const initialFormData = {}
  const [formData, setFormData] = React.useState(initialFormData)
  const [formErrors, setFormErrors] = React.useState()

  React.useEffect(() => {
    if (isLoggedIn) getAllAddresses()
  }, [isLoggedIn, getAllAddresses])

  React.useEffect(() => {
    if (!addresses) return

    const address = addresses.find(address => address.id === addressId)

    if (!address) return

    const { id, ...data } = address

    setFormData(data)
  }, [addressId, addresses])

  const handleOnChange = event => {
    const { name, value } = event.target

    setFormData(prevFormData => ({ ...prevFormData, [name]: value }))
  }

  const handleSubmit = async event => {
    event.preventDefault()

    setFormErrors(null)

    const { errors } = addressId
      ? await updateAddress({
          id: String(addressId),
          formData,
        })
      : await createAddress(formData)

    if (errors) {
      setFormErrors(errors)
    } else {
      router.push('/account')
    }
  }

  const handleDelete = async () => {
    const { errors } = await deleteAddress(String(addressId))

    if (errors) {
      setFormErrors(errors)
    } else {
      router.push('/account')
    }
  }

  const submissionEnabled = Boolean(Object.keys(formData).length)
  const { address1, address2, city, company, country, firstName, lastName, phone, province, zip } =
    formData

  return (
    <section>
      <h1>{addressId ? 'Edit address' : 'Create address'}</h1>
      <div>
        {addressId && (
          <button onClick={handleDelete}>
            Delete address
          </button>
        )}
      </div>

      <AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
        <form onSubmit={handleSubmit}>
          <div>
            <label>
              First name
              <input name="firstName" value={firstName} onChange={handleOnChange} />
            </label>
            <label>
              Last name
              <input name="lastName" value={lastName} onChange={handleOnChange} />
            </label>
          </div>
          <label>
            Company
            <input name="company" value={company} onChange={handleOnChange} />
          </label>
          <label>
            Address
            <input name="address1" value={address1} onChange={handleOnChange} />
          </label>
          <label>
            Apartment, suite, etc.
            <input name="address2" value={address2} onChange={handleOnChange} />
          </label>
          <label>
            City
            <input name="city" value={city} onChange={handleOnChange} />
          </label>
          <div>
            <label>
              Country/Region
              <input name="country" value={country} onChange={handleOnChange} />
            </label>
            <label>
              State
              <input name="province" value={province} onChange={handleOnChange} />
            </label>
            <label>
              ZIP code
              <input name="zip" value={zip} onChange={handleOnChange} />
            </label>
          </div>
          <label>
            Phone
            <input name="phone" value={phone} onChange={handleOnChange} />
          </label>
          {formErrors && (
            <div>
              {formErrors.map(({ message }, index ) => (
                <p key={index}>{message}</p>
              ))}
            </div>
          )}
          <div>
            <Link href="/account" aria-label="Go back to account's dashboard">Cancel</Link>
            <button type="submit" disabled={!submissionEnabled}>Save</button>
          </div>
        </form>
      </AuthGuard>
    </section>
  )
}

export default AccountAddress

BigCommerce

import React from 'react'
import { useCustomerActions, useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'

const AccountAddress = () => {
  const { getAllAddresses, createAddress, deleteAddress, updateAddress } = useCustomerActions()
  const { addresses, isLoggedIn, status } = useCustomerState()

  const router = useRouter()
  const { id: addressId } = router.query

  const initialFormData = {}
  const [formData, setFormData] = React.useState(initialFormData)
  const [formErrors, setFormErrors] = React.useState()

  React.useEffect(() => {
    if (isLoggedIn) getAllAddresses()
  }, [isLoggedIn, getAllAddresses])

  React.useEffect(() => {
    if (!addresses) return

    const address = addresses.find(address => address.id === addressId)

    if (!address) return

    const { id, ...data } = address

    setFormData(data)
  }, [addressId, addresses])

  const handleOnChange = event => {
    const { name, value } = event.target

    setFormData(prevFormData => ({ ...prevFormData, [name]: value }))
  }

  const handleSubmit = async event => {
    event.preventDefault()

    setFormErrors(null)

    const { errors } = addressId
      ? await updateAddress({
          id: String(addressId),
          formData,
        })
      : await createAddress(formData)


    if (errors) {
      setFormErrors(errors)
    } else {
      router.push('/account')
    }
  }

  const handleDelete = async () => {
    const { errors } = await deleteAddress(String(addressId))

    if (errors) {
      setFormErrors(errors)
    } else {
      router.push('/account')
    }
  }

  const submissionEnabled = Boolean(Object.keys(formData).length)
  const { address1, address2, city, company, country, firstName, lastName, phone, state, postalCode } =
    formData

  return (
    <section>
      <h1>{addressId ? 'Edit address' : 'Create address'}</h1>
      <div>
        {addressId && (
          <button onClick={handleDelete}>
            Delete address
          </button>
        )}
      </div>

      <AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
        <form onSubmit={handleSubmit}>
          <div>
            <label>
              First name
              <input name="firstName" value={firstName} onChange={handleOnChange} />
            </label>
            <label>
              Last name
              <input name="lastName" value={lastName} onChange={handleOnChange} />
            </label>
          </div>
          <label>
            Company
            <input name="company" value={company} onChange={handleOnChange} />
          </label>
          <label>
            Address
            <input name="address1" value={address1} onChange={handleOnChange} />
          </label>
          <label>
            Apartment, suite, etc.
            <input name="address2" value={address2} onChange={handleOnChange} />
          </label>
          <label>
            City
            <input name="city" value={city} onChange={handleOnChange} />
          </label>
          <div>
            <label>
              Country/Region
              <input name="country" value={country} onChange={handleOnChange} />
            </label>
            <label>
              State
              <input name="province" value={state} onChange={handleOnChange} />
            </label>
            <label>
              ZIP code
              <input name="zip" value={postalCode} onChange={handleOnChange} />
            </label>
          </div>
          <label>
            Phone
            <input name="phone" value={phone} onChange={handleOnChange} />
          </label>
          {formErrors && (
            <div>
              {formErrors.map(({ message }, index ) => (
                <p key={index}>{message}</p>
              ))}
            </div>
          )}
          <div>
            <Link href={'/account'} aria-label="Go back to account's dashboard">Cancel</Link>
            <button type="submit" disabled={!submissionEnabled}>
              Save
            </button>
          </div>
        </form>
      </AuthGuard>
    </section>
  )
}

export default AccountAddress

Address page

Create the /account/address page:

Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Address.
Enter the PAGE PATH: account/address.
If you want, you can select a Frame from the Frame dropdown.
Click ADD PAGE.

Now, add the AccountAddress section to the Address page (if you are already on the Address page, skip to step 4):

Click on the Pages icon from the sidebar.
Search for "Address".
Open the "Address" page by clicking on its title.
On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
A list with all our Sections will appear, search for and select AccountAddress.
Click SAVE.

RegisterForm Section

LoginForm Section

Account Section

ForgotPasswordForm Section

ResetPasswordForm Section