fix(#2901): add error for empty state

src/config/lexics/payment.tsx

@@ -17,6 +17,7 @@ export const paymentLexics = {
   error_empty_city: 15754,
   error_empty_country: 15753,
   error_empty_name: 15290,
+  error_empty_state: 19821,
   error_payment_unsuccessful: 14446,
   if_you_cancel: 18189,
   next_payment: 18183,

src/features/AddCardForm/components/Form/hooks/index.tsx

@@ -132,6 +132,7 @@ export const useFormSubmit = ({
     setCity('')
     setAddress('')
     setSelectedCountry(null)
+    setSelectedState(null)
     elements?.getElement(CardNumberElement)?.clear()
     elements?.getElement(CardCvcElement)?.clear()
     elements?.getElement(CardExpiryElement)?.clear()
@@ -262,6 +263,7 @@ export const useFormSubmit = ({
       city,
       country: selectedCountry?.name || '',
       name,
+      state: (selectedState?.name_eng || ''),
     })
 
     if (fieldError) {
@@ -278,7 +280,7 @@ export const useFormSubmit = ({
         address_city: city,
         address_country: selectedCountry?.name || '',
         address_line1: address,
-        address_state: selectedState?.name_eng,
+        address_state: selectedState?.name_eng || '',
         name,
       },
     )

src/features/AddCardForm/components/Form/hooks/validateFields.tsx

@@ -9,11 +9,13 @@ type fieldsType = {
   city: string,
   country: string,
   name: string,
+  state: string,
 }
 
 export const validateFields = (fields: fieldsType) => {
   if (!fields.name) return 'error_empty_name'
   if (!fields.country) return 'error_empty_country'
+  if (!fields.state && fields.country === 'United States of America') return 'error_empty_state'
   if (size(fields.city) < 3) return 'error_empty_city'
   if (size(fields.address) < 10) return 'error_empty_address'
   return false

src/features/CardsStore/hooks/index.tsx

@@ -54,6 +54,12 @@ export const useBankCards = () => {
 
   useEffect(() => {
     setIsHighlightsPage(window.location.pathname === PAGES.highlights)
+
+    return () => {
+      setError('')
+      setLastCard(null)
+      setIsHighlightsPage(false)
+    }
   }, [cards])
 
   return {

src/requests/getUsaStates.tsx

@@ -17,6 +17,6 @@ export const getUsaStates = (): Promise<Array<UsaStateType>> => {
 
   return callApi({
     config,
-    url: `${API_ROOT}/v1/data/usa-states`,
+    url: `${API_ROOT}/v1/data/usa/states`,
   })
 }