Skip to content

Commit

Permalink
feat(EMI-2159): Auction registration address autocomplete (#14846)
Browse files Browse the repository at this point in the history 
* remove separate autocomplete tracking hook + editedAutocompletedAddress tracking calls
* implement address autocomplete on auction registration form
  • Loading branch information
@erikdstock
erikdstock authored Nov 20, 2024
1 parent 8fcb266 commit b6717c2
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 218 deletions.
107 changes: 73 additions & 34 deletions src/Apps/Auction/Components/Form/AddressForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,36 @@
import { ContextModule } from "@artsy/cohesion"
import { Column, GridColumns, Input } from "@artsy/palette"
import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
import { AddressAutocompleteInput } from "Components/Address/AddressAutocompleteInput"
import { CountrySelect } from "Components/CountrySelect"
import { useAnalyticsContext } from "System/Hooks/useAnalyticsContext"

export const AddressForm = () => {
const { handleChange, handleBlur, errors, values, touched } = useFormContext()
const {
handleChange,
handleBlur,
errors,
values,
touched,
setValues,
setFieldValue,
} = useFormContext()

const { contextPageOwnerId, contextPageOwnerType } = useAnalyticsContext()

const autocompleteTrackingValues = {
contextModule: ContextModule.auctionRegistration,
contextOwnerType: contextPageOwnerType,
contextPageOwnerId: contextPageOwnerId || "",
}

return (
<GridColumns>
<Column span={12}>
<Input
name="address.name"
title="Full Name"
placeholder="Enter name"
placeholder="Add full name"
autoComplete="name"
autoFocus
value={values.address?.name}
Expand All @@ -22,7 +41,7 @@ export const AddressForm = () => {
/>
</Column>

<Column span={6}>
<Column span={12}>
<CountrySelect
name="address.country"
title="Country"
Expand All @@ -33,45 +52,51 @@ export const AddressForm = () => {
onBlur={handleBlur}
error={touched.address?.country && errors.address?.country}
required
// FIXME: There's extra margin between title and select in palette
// than the title and select in input. Open PR to palette
mt={-0.5}
/>
</Column>

<Column span={6}>
<Input
name="address.postalCode"
title="Postal Code"
placeholder="Add postal code"
autoComplete="postal-code"
value={values.address?.postalCode}
onChange={handleChange}
onBlur={handleBlur}
error={touched.address?.postalCode && errors.address?.postalCode}
<Column span={12}>
<AddressAutocompleteInput
trackingValues={autocompleteTrackingValues}
address={{
country: values.address.country,
}}
flip={false}
required
/>
</Column>

<Column span={6}>
<Input
disableAutocomplete={values.address.region === "AK"}
name="address.addressLine1"
title="Address Line 1"
placeholder="Add address"
autoComplete="address-line1"
value={values.address?.addressLine1}
placeholder="Add street address"
title="Street address"
value={values.address.addressLine1}
onChange={handleChange}
onBlur={handleBlur}
onSelect={option => {
const selectedAddress = option.address
setValues({
...values,
address: {
...values.address,
addressLine1: selectedAddress.addressLine1,
addressLine2: selectedAddress.addressLine2,
city: selectedAddress.city,
region: selectedAddress.region,
postalCode: selectedAddress.postalCode,
country: selectedAddress.country,
},
})
}}
error={touched.address?.addressLine1 && errors.address?.addressLine1}
required
onClear={() => {
setFieldValue("address.addressLine1", "")
}}
/>
</Column>

<Column span={6}>
<Column span={12}>
<Input
name="address.addressLine2"
title="Address Line 2"
placeholder="Add address line 2"
title="Apt, floor, suite, etc. (optional)"
placeholder="Add apartment, floor, suite, etc."
autoComplete="address-line2"
value={values.address?.addressLine2}
onChange={handleChange}
Expand All @@ -80,11 +105,11 @@ export const AddressForm = () => {
/>
</Column>

<Column span={6}>
<Column span={12}>
<Input
name="address.city"
title="City"
placeholder="Enter city"
placeholder="Add city"
autoComplete="address-level2"
value={values.address?.city}
onChange={handleChange}
Expand All @@ -97,8 +122,8 @@ export const AddressForm = () => {
<Column span={6}>
<Input
name="address.region"
title="State, Province, or Region"
placeholder="Add state, province, or region"
title="State, region or province"
placeholder="Add state, region or province"
autoComplete="address-level1"
value={values.address?.region}
onChange={handleChange}
Expand All @@ -108,10 +133,24 @@ export const AddressForm = () => {
/>
</Column>

<Column span={6}>
<Input
name="address.postalCode"
title="ZIP/Postal code"
placeholder="Add ZIP/Postal code"
autoComplete="postal-code"
value={values.address?.postalCode}
onChange={handleChange}
onBlur={handleBlur}
error={touched.address?.postalCode && errors.address?.postalCode}
required
/>
</Column>

<Column span={12}>
<Input
name="phoneNumber"
title="Phone Number"
title="Phone number"
type="tel"
description="Required for shipping logistics"
placeholder="Add phone number"
Expand Down
10 changes: 5 additions & 5 deletions src/Apps/Auction/Components/Form/__tests__/AddressForm.jest.enzyme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ describe("AddressForm", () => {
;[
"Full Name",
"Country",
"Postal Code",
"Address Line 1",
"Address Line 2",
"ZIP/Postal code",
"Street address",
"Apt, floor, suite, etc. (optional)",
"City",
"State, Province, or Region",
"Phone Number",
"State, region or province",
"Phone number",
].forEach(label => {
expect(text).toContain(label)
})
Expand Down
69 changes: 15 additions & 54 deletions src/Apps/Order/Routes/Shipping/Components/FulfillmentDetailsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,10 @@ import {
Formik,
} from "formik"
import { pick } from "lodash"
import { useCallback, useEffect, useState } from "react"
import { useCallback, useEffect } from "react"
import { Collapse } from "Apps/Order/Components/Collapse"
import { FulfillmentDetailsForm_me$data } from "__generated__/FulfillmentDetailsForm_me.graphql"
import {
AddressAutocompleteInput,
useAddressAutocompleteTracking,
} from "Components/Address/AddressAutocompleteInput"
import { AddressAutocompleteInput } from "Components/Address/AddressAutocompleteInput"
import { ContextModule, OwnerType } from "@artsy/cohesion"
import { useAnalyticsContext } from "System/Hooks/useAnalyticsContext"
import { useShippingContext } from "Apps/Order/Routes/Shipping/Hooks/useShippingContext"
Expand Down Expand Up @@ -85,11 +82,6 @@ const FulfillmentDetailsFormLayout = (
props: FulfillmentDetailsFormLayoutProps
) => {
const { contextPageOwnerId } = useAnalyticsContext()
const autocompleteTracking = useAddressAutocompleteTracking({
contextModule: ContextModule.ordersShipping,
contextOwnerType: OwnerType.ordersShipping,
contextPageOwnerId: contextPageOwnerId || "",
})

const shippingContext = useShippingContext()
const orderTracking = useOrderTracking()
Expand All @@ -100,8 +92,6 @@ const FulfillmentDetailsFormLayout = (
shippingContext.orderData.shippingQuotes.length === 0
)

const [hasAutocompletedAddress, setHasAutocompletedAddress] = useState(false)

const formikContext = useFormikContext<FulfillmentValues>()
const {
values,
Expand Down Expand Up @@ -139,16 +129,6 @@ const FulfillmentDetailsFormLayout = (
cb(...args)
}

const trackAutoCompleteEdits = (fieldName: string, handleChange) => (
...args
) => {
if (hasAutocompletedAddress) {
autocompleteTracking.editedAutocompletedAddress(fieldName)
setHasAutocompletedAddress(false)
}
handleChange(...args)
}

const handleCloseVerification = async () => {
await setFieldValue("meta.addressVerifiedBy", AddressVerifiedBy.USER)
await props.onAddressVerificationComplete()
Expand Down Expand Up @@ -358,11 +338,9 @@ const FulfillmentDetailsFormLayout = (
aria-labelledby="country-select"
tabIndex={tabbableIf("new_address")}
selected={values.attributes.country}
onSelect={withBackToFulfillmentDetails(
trackAutoCompleteEdits("country", selected => {
setFieldValue(`attributes.country`, selected)
})
)}
onSelect={withBackToFulfillmentDetails(selected => {
setFieldValue(`attributes.country`, selected)
})}
disabled={
!!shippingContext.orderData.lockShippingCountryTo &&
shippingContext.orderData.lockShippingCountryTo !== "EU"
Expand All @@ -389,16 +367,19 @@ const FulfillmentDetailsFormLayout = (
country: (values.attributes as ShipValues["attributes"])
.country,
}}
trackingValues={{
contextModule: ContextModule.ordersShipping,
contextOwnerType: OwnerType.ordersShipping,
contextPageOwnerId: contextPageOwnerId || "",
}}
flip={false}
disableAutocomplete={values.attributes.region === "AK"}
tabIndex={tabbableIf("new_address")}
name="attributes.addressLine1"
placeholder="Street address"
title="Address line 1"
value={values.attributes.addressLine1}
onChange={withBackToFulfillmentDetails(
trackAutoCompleteEdits("addressLine1", handleChange)
)}
onChange={withBackToFulfillmentDetails(handleChange)}
onBlur={handleBlur}
onSelect={option => {
const selectedAddress = option.address
Expand All @@ -414,19 +395,7 @@ const FulfillmentDetailsFormLayout = (
country: selectedAddress.country,
},
})
setHasAutocompletedAddress(true)
shippingContext.actions.goBackToFulfillmentDetails()

autocompleteTracking.selectedAutocompletedAddress(
option,
values.attributes.addressLine1
)
}}
onReceiveAutocompleteResult={(input, count) => {
autocompleteTracking.receivedAutocompleteResult(
input,
count
)
}}
error={
(touched as FormikTouched<ShipValues>).attributes
Expand All @@ -447,9 +416,7 @@ const FulfillmentDetailsFormLayout = (
placeholder="Apt, floor, suite, etc."
title="Address line 2 (optional)"
value={values.attributes.addressLine2}
onChange={withBackToFulfillmentDetails(
trackAutoCompleteEdits("addressLine2", handleChange)
)}
onChange={withBackToFulfillmentDetails(handleChange)}
onBlur={handleBlur}
error={
(touched as FormikTouched<ShipValues>).attributes
Expand All @@ -467,9 +434,7 @@ const FulfillmentDetailsFormLayout = (
placeholder="City"
title="City"
value={values.attributes.city}
onChange={withBackToFulfillmentDetails(
trackAutoCompleteEdits("city", handleChange)
)}
onChange={withBackToFulfillmentDetails(handleChange)}
onBlur={handleBlur}
error={
(touched as FormikTouched<ShipValues>).attributes?.city &&
Expand All @@ -494,9 +459,7 @@ const FulfillmentDetailsFormLayout = (
}
autoCorrect="off"
value={values.attributes.region}
onChange={withBackToFulfillmentDetails(
trackAutoCompleteEdits("region", handleChange)
)}
onChange={withBackToFulfillmentDetails(handleChange)}
onBlur={handleBlur}
error={
(touched as FormikTouched<ShipValues>).attributes?.region &&
Expand All @@ -522,9 +485,7 @@ const FulfillmentDetailsFormLayout = (
autoCapitalize="characters"
autoCorrect="off"
value={values.attributes.postalCode}
onChange={withBackToFulfillmentDetails(
trackAutoCompleteEdits("postalCode", handleChange)
)}
onChange={withBackToFulfillmentDetails(handleChange)}
onBlur={handleBlur}
error={
(touched as FormikTouched<ShipValues>).attributes
Expand Down
19 changes: 1 addition & 18 deletions src/Apps/Order/Routes/Shipping/Components/__tests__/FulfillmentDetailsForm.jest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,7 @@ describe("FulfillmentDetailsForm", () => {
).toHaveBeenCalled()
})

it("tracks when a user selects an address and the first time they edit it", async () => {
it("tracks when a user selects an address", async () => {
renderTree(testProps)
await waitFor(async () => {
const line1Input = screen.getByPlaceholderText("Street address")
Expand Down Expand Up @@ -582,23 +582,6 @@ describe("FulfillmentDetailsForm", () => {
input: "401 Broadway",
item: "401 Broadway, New York NY 10013",
})

// Make 2 edits to the address; track the 1st
const line2Input = screen.getByPlaceholderText("Apt, floor, suite, etc.")
await userEvent.type(line2Input, "Floor 25")

const postalCode = screen.getByPlaceholderText("ZIP code")
await userEvent.type(postalCode, "-4456")

await flushPromiseQueue()
expect(mockTrackEvent).toHaveBeenCalledTimes(3)
expect(mockTrackEvent).toHaveBeenNthCalledWith(3, {
action: "editedAutocompletedAddress",
context_module: "ordersShipping",
context_owner_id: "",
context_owner_type: "orders-shipping",
field: "addressLine2",
})
})
})
})
Loading

0 comments on commit b6717c2

Please sign in to comment.