feat(#2901): add usa state to add card form

package.json

@@ -34,7 +34,7 @@
     "react-dom": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-window": "^1.8.6",
     "react-youtube": "^7.14.0",
     "recoil": "^0.7.4",
@@ -71,6 +71,7 @@
     "commitizen": "^4.2.4",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "18.2.1",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-postro4no": "^0.0.7",

src/config/lexics/payment.tsx

@@ -26,6 +26,7 @@ export const paymentLexics = {
   payment_method: 2010,
   pb_instat: 18274,
   save_sub: 18190,
+  state: 12932,
   still_cancel: 2646,
   sub_not_renewed: 15060,
   subscription_plan: 18182,

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

@@ -32,7 +32,12 @@ import { dataForPayHighlights } from 'pages/HighlightsPage/storeHighlightsAtoms'
 
 import { onePayment } from 'requests/onePayment'
 
-import { SelectedCountry, useCountries } from './useCountries'
+import {
+  SelectedCountry,
+  SelectedState,
+  useCountries,
+} from './useCountries'
+
 import {
   isValidAddress,
   isValidName,
@@ -47,6 +52,7 @@ export enum ElementTypes {
   CardExpiry = 'cardExpiry',
   CardHolder = 'cardHolder',
   CardNumber = 'cardNumber',
+  CardState = 'cardState',
 }
 
 export type Props = {
@@ -72,6 +78,7 @@ const initialState = {
   cardExpiry: inputState,
   cardHolder: inputState,
   cardNumber: inputState,
+  cardState: inputState,
 }
 
 export const useFormSubmit = ({
@@ -93,6 +100,7 @@ export const useFormSubmit = ({
   const [name, setName] = useState('')
   const [city, setCity] = useState('')
   const [address, setAddress] = useState('')
+  const [usaStateValue, setUsaStateValue] = useState('')
   const [inputStates, setInputStates] = useObjectState(initialState)
   const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
@@ -107,7 +115,10 @@ export const useFormSubmit = ({
   const {
     countries,
     selectedCountry,
+    selectedState,
     setSelectedCountry,
+    setSelectedState,
+    usaStates,
   } = useCountries()
 
   const resetErrors = useCallback(() => {
@@ -154,8 +165,25 @@ export const useFormSubmit = ({
     if (country?.id === selectedCountry?.id) return
     setSelectedCountry(country)
 
+    if (selectedCountry?.id !== 194) {
+      setSelectedState(null)
+    }
     setElementTypeState(ElementTypes.CardCountry, country?.name_eng || '')
-  }, [resetErrors, selectedCountry?.id, setElementTypeState, setSelectedCountry])
+  }, [
+    resetErrors,
+    selectedCountry?.id,
+    setElementTypeState,
+    setSelectedCountry,
+    setSelectedState,
+  ])
+
+  const onStateSelect = useCallback((state: SelectedState) => {
+    resetErrors()
+    if (state?.id === selectedState?.id) return
+    setSelectedState(state)
+    setUsaStateValue('')
+    setElementTypeState(ElementTypes.CardState, state?.name_eng || '')
+  }, [resetErrors, selectedState?.id, setElementTypeState, setSelectedState])
 
   const onCityChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target
@@ -167,6 +195,12 @@ export const useFormSubmit = ({
     resetErrors()
     setElementTypeState(ElementTypes.CardCity, value)
   }
+
+  const onStateChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    setUsaStateValue(value)
+  }
+
   const onAddressChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target
     if (!isValidAddress(value)) {
@@ -244,6 +278,7 @@ export const useFormSubmit = ({
         address_city: city,
         address_country: selectedCountry?.name || '',
         address_line1: address,
+        address_state: selectedState?.name_eng,
         name,
       },
     )
@@ -303,6 +338,11 @@ export const useFormSubmit = ({
     onInputsChange,
     onInputsFocus,
     onNameChange,
+    onStateChange,
+    onStateSelect,
     selectedCountry,
+    selectedState,
+    usaStateValue,
+    usaStates,
   }
 }

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

@@ -1,7 +1,7 @@
 import {
   useEffect,
-  useState,
   useMemo,
+  useState,
 } from 'react'
 
 import orderBy from 'lodash/orderBy'
@@ -9,11 +9,16 @@ import map from 'lodash/map'
 
 import type { Countries, Country } from 'requests'
 import { getCountries } from 'requests'
+import { getUsaStates, UsaStateType } from 'requests/getUsaStates'
 
 export type SelectedCountry = (Country & {
   name: string,
 }) | null
 
+export type SelectedState = (UsaStateType & {
+  name: string,
+}) | null
+
 const useCountriesList = () => {
   const [countries, setCountries] = useState<Countries>([])
 
@@ -27,6 +32,9 @@ const useCountriesList = () => {
 export const useCountries = () => {
   const countries = useCountriesList()
   const [selectedCountry, setSelectedCountry] = useState<SelectedCountry>(null)
+  const [usaStates, setUsaStates] = useState<Array<UsaStateType>>([])
+  const [selectedState, setSelectedState] = useState<SelectedState>(null)
+
   const transformedCountries = useMemo(
     () => orderBy(
       map(countries, (country) => ({
@@ -38,9 +46,22 @@ export const useCountries = () => {
     [countries],
   )
 
+  useEffect(() => {
+    if (selectedCountry?.id === 194) {
+      (async () => {
+        const states = await getUsaStates()
+        setUsaStates(states)
+      })()
+    }
+  }, [selectedCountry])
+
   return {
     countries: transformedCountries,
     selectedCountry,
+    selectedState,
     setSelectedCountry,
+    setSelectedState,
+    setUsaStates,
+    usaStates: usaStates.map((state: UsaStateType) => ({ ...state, name: state.name_eng })),
   }
 }

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

@@ -62,6 +62,17 @@ export const AddCardFormInner = (props: Props) => {
 
   const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount
 
+  const calcWidth = () => {
+    switch (true) {
+      case isUsaCountry:
+        return '100%'
+      case isMobileDevice:
+        return '48%'
+      default:
+        return '275px'
+    }
+  }
+
   const {
     address,
     city,
@@ -78,9 +89,16 @@ export const AddCardFormInner = (props: Props) => {
     onInputsChange,
     onInputsFocus,
     onNameChange,
+    onStateChange,
+    onStateSelect,
     selectedCountry,
+    selectedState,
+    usaStates,
+    usaStateValue,
   } = useFormSubmit(props)
 
+  const isUsaCountry = selectedCountry?.id === 194
+
   return (
     <Form onSubmit={handleSubmit}>
       <SectionTitle>
@@ -160,10 +178,28 @@ export const AddCardFormInner = (props: Props) => {
             noSearch
           />
         </CountryWrapper>
+        {isUsaCountry && (
+          <CountryWrapper>
+            <CustomCombobox
+              value={usaStateValue || selectedState?.name || ''}
+              labelLexic={selectedState?.name ? '' : 'state'}
+              onSelect={onStateSelect}
+              onBlur={onInputsBlur(ElementTypes.CardState)}
+              options={usaStates.filter(
+                (state) => (state.name_eng.toLowerCase().includes(usaStateValue.toLowerCase())),
+              )}
+              withError={false}
+              selected={Boolean(selectedState?.name)}
+              onChange={onStateChange}
+            />
+          </CountryWrapper>
+        )}
+
         <ElementContainer
           label={isLabelVisible(ElementTypes.CardCity) ? 'city' : ''}
-          width={isMobileDevice ? '48%' : '275px'}
+          width={calcWidth()}
           backgroundColor={inputsBackground}
+          className={isUsaCountry ? 'CardForm__cityInput' : ''}
         >
           <Input
             type='text'
@@ -178,7 +214,7 @@ export const AddCardFormInner = (props: Props) => {
           label={isLabelVisible(ElementTypes.CardAddress) ? 'address' : ''}
           width='100%'
           backgroundColor={inputsBackground}
-          className='AddCardForm_Address'
+          className={isUsaCountry ? 'CardForm__cityInput AddCardForm_Address' : 'AddCardForm_Address'}
         >
           <Input
             type='text'

src/features/AddCardForm/styled.tsx

@@ -20,6 +20,10 @@ export const Column = styled.div`
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 8px;
+
+  .CardForm__cityInput {
+    margin: 10px 0;
+  }
 `
 
 export const ButtonsBlock = styled.div<ButtonsBlockTypes>`

src/requests/getUsaStates.tsx

@@ -0,0 +1,22 @@
+import {
+  API_ROOT,
+} from 'config'
+import { callApi } from 'helpers'
+
+export type UsaStateType = {
+  id: number,
+  iso_2: string,
+  name_eng: string,
+  name_rus: string,
+}
+
+export const getUsaStates = (): Promise<Array<UsaStateType>> => {
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/data/usa-states`,
+  })
+}