feat(EMI-2196): Consolidated global AddressFormFields component + usage in Auction/Invoice apps

src/Apps/Auction/Components/Form/AddressFormWithCreditCard.tsx

@@ -1,16 +1,19 @@
 import { Join, Spacer, Text } from "@artsy/palette"
 import { CreditCardInput } from "Components/CreditCardInput"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
-import { AddressForm } from "./AddressForm"
+import { AddressFormFields } from "Components/Address/AddressFormFields"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
+import { AuctionFormValues } from "Apps/Auction/Components/Form/Utils/initialValues"
 
-export const AddressFormWithCreditCard: React.FC<React.PropsWithChildren<unknown>> = () => {
+export const AddressFormWithCreditCard: React.FC<React.PropsWithChildren<
+  unknown
+>> = () => {
   const {
     setFieldValue,
     setFieldTouched,
     setFieldError,
     errors,
     touched,
-  } = useFormContext()
+  } = useAuctionFormContext()
 
   return (
     <Join separator={<Spacer y={2} />}>
@@ -44,7 +47,7 @@ export const AddressFormWithCreditCard: React.FC<React.PropsWithChildren<unknown
         required
       />
 
-      <AddressForm />
+      <AddressFormFields<AuctionFormValues> withPhoneNumber />
     </Join>
   )
 }

src/Apps/Auction/Components/Form/ConditionsOfSaleCheckbox.tsx

@@ -1,5 +1,6 @@
 import { Checkbox, Spacer, Text } from "@artsy/palette"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
+
 import { RouterLink } from "System/Components/RouterLink"
 
 export const ConditionsOfSaleCheckbox: React.FC<React.PropsWithChildren<unknown>> = () => {
@@ -9,7 +10,7 @@ export const ConditionsOfSaleCheckbox: React.FC<React.PropsWithChildren<unknown>
     errors,
     setFieldTouched,
     setFieldValue,
-  } = useFormContext()
+  } = useAuctionFormContext()
 
   const showErrorMessage = !!(touched.agreeToTerms && errors.agreeToTerms)
 

src/Apps/Auction/Components/Form/ErrorStatus.tsx

@@ -1,10 +1,11 @@
 import { Banner, BannerProps, Flex, Text } from "@artsy/palette"
 import { errorMessageForBidding } from "Apps/Auction/Components/Form/Utils/errorMessages"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
+
 import { RouterLink } from "System/Components/RouterLink"
 
 export const ErrorStatus = () => {
-  const { status } = useFormContext()
+  const { status } = useAuctionFormContext()
 
   if (!status) {
     return null

src/Apps/Auction/Components/Form/Utils/initialValues.ts

@@ -1,11 +1,11 @@
 import { FormikHelpers } from "formik"
-import { Address, emptyAddress } from "Components/Address/AddressForm"
+import { Address, emptyAddress } from "Components/Address/utils"
 
 export interface AuctionFormValues {
   address: Address
   agreeToTerms: boolean
   creditCard?: boolean
-  phoneNumber?: string
+  phoneNumber: string
   selectedBid?: string
 }
 

src/Apps/Auction/Components/Form/__tests__/AddressFormWithCreditCard.jest.enzyme.tsx

@@ -1,18 +1,18 @@
 import { mount } from "enzyme"
 import { AddressFormWithCreditCard } from "Apps/Auction/Components/Form/AddressFormWithCreditCard"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
 
-jest.mock("Apps/Auction/Hooks/useFormContext")
+jest.mock("Apps/Auction/Hooks/useAuctionFormContext")
 
 jest.mock("Components/CreditCardInput", () => ({
   CreditCardInput: () => null,
 }))
-jest.mock("../AddressForm", () => ({
-  AddressForm: () => null,
+jest.mock("Components/Address/AddressFormFields", () => ({
+  AddressFormFields: () => null,
 }))
 
 describe("AddressFormWithCreditCard", () => {
-  const mockUseFormContext = useFormContext as jest.Mock
+  const mockuseAuctionFormContext = useAuctionFormContext as jest.Mock
   const setFieldTouched = jest.fn()
   const setFieldValue = jest.fn()
   const setFieldError = jest.fn()
@@ -22,7 +22,7 @@ describe("AddressFormWithCreditCard", () => {
   }
 
   beforeAll(() => {
-    mockUseFormContext.mockImplementation(() => {
+    mockuseAuctionFormContext.mockImplementation(() => {
       return {
         setFieldTouched,
         setFieldValue,
@@ -35,7 +35,7 @@ describe("AddressFormWithCreditCard", () => {
   it("renders correct components", () => {
     const wrapper = getWrapper()
     expect(wrapper.find("CreditCardInput")).toHaveLength(1)
-    expect(wrapper.find("AddressForm")).toHaveLength(1)
+    expect(wrapper.find("AddressFormFields")).toHaveLength(1)
   })
 
   describe("credit card error handling", () => {

src/Apps/Auction/Components/Form/__tests__/ConditionsOfSaleCheckbox.jest.enzyme.tsx

@@ -1,12 +1,13 @@
 import { mount } from "enzyme"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
+
 import { ConditionsOfSaleCheckbox } from "Apps/Auction/Components/Form/ConditionsOfSaleCheckbox"
 
-jest.mock("Apps/Auction/Hooks/useFormContext")
+jest.mock("Apps/Auction/Hooks/useAuctionFormContext")
 jest.mock("System/Hooks/useFeatureFlag")
 
 describe("ConditionsOfSaleCheckbox", () => {
-  const mockUseFormContext = useFormContext as jest.Mock
+  const mockuseAuctionFormContext = useAuctionFormContext as jest.Mock
   const setFieldTouched = jest.fn()
   const setFieldValue = jest.fn()
   const formProps = {
@@ -22,13 +23,13 @@ describe("ConditionsOfSaleCheckbox", () => {
   }
 
   beforeAll(() => {
-    mockUseFormContext.mockImplementation(() => {
+    mockuseAuctionFormContext.mockImplementation(() => {
       return formProps
     })
   })
 
   it("shows error message if error", () => {
-    mockUseFormContext.mockImplementation(() => {
+    mockuseAuctionFormContext.mockImplementation(() => {
       return {
         ...formProps,
         touched: {

src/Apps/Auction/Components/Form/__tests__/ErrorStatus.jest.enzyme.tsx

@@ -1,15 +1,16 @@
 import { mount } from "enzyme"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
+
 import { ErrorStatus } from "Apps/Auction/Components/Form/ErrorStatus"
 
-jest.mock("Apps/Auction/Hooks/useFormContext")
+jest.mock("Apps/Auction/Hooks/useAuctionFormContext")
 
 describe("ErrorStatus", () => {
-  const mockUseFormContext = useFormContext as jest.Mock
+  const mockuseAuctionFormContext = useAuctionFormContext as jest.Mock
   let status
 
   const getWrapper = () => {
-    mockUseFormContext.mockImplementation(() => {
+    mockuseAuctionFormContext.mockImplementation(() => {
       return {
         status,
       }

src/Apps/Auction/Hooks/__tests__/useCreateTokenAndSubmit.jest.tsx

@@ -11,9 +11,10 @@ import { flushPromiseQueue } from "DevTools/flushPromiseQueue"
 import { useAuctionTracking } from "Apps/Auction/Hooks/useAuctionTracking"
 import { useRefreshUserData } from "Apps/Auction/Queries/useRefreshUserData"
 
-jest.mock("Components/Address/AddressForm", () => ({
-  toStripeAddress: jest.fn(),
-}))
+jest.mock("Components/Address/utils", () => {
+  const actual = jest.requireActual("Components/Address/utils")
+  return { ...actual, toStripeAddress: jest.fn() }
+})
 
 jest.mock("Apps/Auction/Queries/useRefreshUserData")
 jest.mock("Apps/Auction/Hooks/useAuctionTracking")
@@ -39,6 +40,7 @@ describe("useCreateTokenAndSubmit", () => {
 
   const values = {
     phoneNumber: "+1 (123) 456-7890",
+    address: {},
   }
 
   const helpers = {
@@ -252,6 +254,7 @@ describe("useCreateTokenAndSubmit", () => {
   it("sets submitting to false at the very end", async () => {
     await setupHook()
     await flushPromiseQueue()
+
     expect(helpers.setSubmitting).toHaveBeenCalledWith(false)
   })
 })

src/Apps/Auction/Hooks/useFormContext.ts → src/Apps/Auction/Hooks/useAuctionFormContext.ts

@@ -1,7 +1,7 @@
 import { AuctionFormValues } from "Apps/Auction/Components/Form/Utils/initialValues"
 import { useFormikContext } from "formik"
 
-export const useFormContext = () => {
+export const useAuctionFormContext = () => {
   const context = useFormikContext<AuctionFormValues>()
   return context
 }

src/Apps/Auction/Hooks/useCreateTokenAndSubmit.ts

@@ -13,7 +13,7 @@ import { AuctionRegistrationRoute_me$data } from "__generated__/AuctionRegistrat
 import { AuctionRegistrationRoute_sale$data } from "__generated__/AuctionRegistrationRoute_sale.graphql"
 import { AuctionBidRoute_me$data } from "__generated__/AuctionBidRoute_me.graphql"
 import { AuctionBidRoute_sale$data } from "__generated__/AuctionBidRoute_sale.graphql"
-import { toStripeAddress } from "Components/Address/AddressForm"
+import { toStripeAddress } from "Components/Address/utils"
 import { useRefreshUserData } from "Apps/Auction/Queries/useRefreshUserData"
 import {
   errorMessageForCard,
@@ -80,11 +80,16 @@ export const useCreateTokenAndSubmit = ({
 
     helpers.setSubmitting(true)
 
+    if (!values.address) {
+      helpers.setStatus("SUBMISSION_FAILED")
+      return
+    }
+
     try {
       const { error, token } = await stripe.createToken(
         cardNumberElement,
-        toStripeAddress(values.address!)
-      )!
+        toStripeAddress(values.address)
+      )
 
       if (error) {
         helpers.setFieldError("creditCard", error.message)
@@ -94,16 +99,16 @@ export const useCreateTokenAndSubmit = ({
       await submitAddCreditCardAndUpdateProfileMutation({
         variables: {
           creditCardInput: {
-            token: token?.id!,
+            token: token.id,
           },
           profileInput: {
             phone: values.phoneNumber,
           },
         },
         rejectIf: res => {
           if (res.createCreditCard?.creditCardOrError?.mutationError) {
-            const mutationErrorDetail = res.createCreditCard?.creditCardOrError
-              ?.mutationError?.detail!
+            const mutationErrorDetail =
+              res.createCreditCard.creditCardOrError.mutationError.detail
 
             helpers.setFieldError(
               "creditCard",

src/Apps/Auction/Routes/Bid/Components/PricingTransparency.tsx

@@ -7,7 +7,7 @@ import {
 } from "__generated__/PricingTransparencyQuery.graphql"
 import { useSystemContext } from "System/Hooks/useSystemContext"
 import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
-import { useFormContext } from "Apps/Auction/Hooks/useFormContext"
+import { useAuctionFormContext } from "Apps/Auction/Hooks/useAuctionFormContext"
 
 import {
   Text,
@@ -86,8 +86,8 @@ export const PricingTransparencyQueryRenderer = ({
   artworkId,
 }: Omit<PricingTransparencyQuery$variables, "bidAmountMinor">) => {
   const { relayEnvironment } = useSystemContext()
-  const { values } = useFormContext()
-  const bidAmountMinor = parseInt(values.selectedBid!)
+  const { values } = useAuctionFormContext()
+  const bidAmountMinor = parseInt(values.selectedBid || "0")
 
   // Hack to prevent invalid refetch / preloader state during route transition
   // when the url changes after user places a successful bid and we redirect