From 7681462c8353044a7a68e8bb57d5bfa0db85578a Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 13 Apr 2023 19:59:50 +0700 Subject: [PATCH] feat(#526): add onchange to search country card --- .../components/Form/hooks/index.tsx | 12 +++++++-- .../components/Form/hooks/useCountries.tsx | 4 ++- .../AddCardForm/components/Form/index.tsx | 27 ++++++++++++------- src/features/AddCardForm/styled.tsx | 6 +++++ src/features/Combobox/hooks/index.tsx | 7 +++++ src/features/Combobox/index.tsx | 3 ++- src/features/Combobox/styled.tsx | 5 ---- src/features/Combobox/types.tsx | 1 + src/features/Common/Input/styled.tsx | 1 - 9 files changed, 47 insertions(+), 19 deletions(-) diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx index b1f96bd5..6516d7be 100644 --- a/src/features/AddCardForm/components/Form/hooks/index.tsx +++ b/src/features/AddCardForm/components/Form/hooks/index.tsx @@ -104,6 +104,8 @@ export const useFormSubmit = ({ const [inputStates, setInputStates] = useObjectState(initialState) const [errorMessage, setErrorMessage] = useState('') const [loader, setLoader] = useState(false) + const [typedCountry, setTypedCountry] = useState('') + const dataHighlights = useRecoilValue(dataForPayHighlights) const { @@ -161,7 +163,7 @@ export const useFormSubmit = ({ } } - const onCountryChange = useCallback((country: SelectedCountry) => { + const onCountrySelect = useCallback((country: SelectedCountry) => { resetErrors() if (country?.id === selectedCountry?.id) return setSelectedCountry(country) @@ -178,6 +180,10 @@ export const useFormSubmit = ({ setSelectedState, ]) + const onChangeCountry = (e: ChangeEvent) => { + setTypedCountry(e.target.value) + } + const onStateSelect = useCallback((state: SelectedState) => { resetErrors() if (state?.id === selectedState?.id) return @@ -334,8 +340,9 @@ export const useFormSubmit = ({ loader, name, onAddressChange, + onChangeCountry, onCityChange, - onCountryChange, + onCountrySelect, onInputsBlur, onInputsChange, onInputsFocus, @@ -344,6 +351,7 @@ export const useFormSubmit = ({ onStateSelect, selectedCountry, selectedState, + typedCountry, usaStateValue, usaStates, } diff --git a/src/features/AddCardForm/components/Form/hooks/useCountries.tsx b/src/features/AddCardForm/components/Form/hooks/useCountries.tsx index 6a54a716..8e568d1f 100644 --- a/src/features/AddCardForm/components/Form/hooks/useCountries.tsx +++ b/src/features/AddCardForm/components/Form/hooks/useCountries.tsx @@ -19,6 +19,8 @@ export type SelectedState = (UsaStateType & { name: string, }) | null +export const USA_ID = 194 + const useCountriesList = () => { const [countries, setCountries] = useState([]) @@ -47,7 +49,7 @@ export const useCountries = () => { ) useEffect(() => { - if (selectedCountry?.id === 194) { + if (selectedCountry?.id === USA_ID) { (async () => { const states = await getUsaStates() setUsaStates(states) diff --git a/src/features/AddCardForm/components/Form/index.tsx b/src/features/AddCardForm/components/Form/index.tsx index 339df9ad..2242886a 100644 --- a/src/features/AddCardForm/components/Form/index.tsx +++ b/src/features/AddCardForm/components/Form/index.tsx @@ -1,8 +1,8 @@ import { useRouteMatch } from 'react-router-dom' import { - CardNumberElement, - CardExpiryElement, CardCvcElement, + CardExpiryElement, + CardNumberElement, } from '@stripe/react-stripe-js' import { isMobileDevice } from 'config/userAgent' @@ -16,7 +16,8 @@ import { SolidButton } from 'features/UserAccount/styled' import { ElementContainer } from '../ElementContainer' import type { Props } from './hooks' -import { useFormSubmit, ElementTypes } from './hooks' +import { ElementTypes, useFormSubmit } from './hooks' +import { USA_ID } from './hooks/useCountries' import { Form, @@ -81,8 +82,9 @@ export const AddCardFormInner = (props: Props) => { loader, name, onAddressChange, + onChangeCountry, onCityChange, - onCountryChange, + onCountrySelect, onInputsBlur, onInputsChange, onInputsFocus, @@ -91,11 +93,12 @@ export const AddCardFormInner = (props: Props) => { onStateSelect, selectedCountry, selectedState, + typedCountry, usaStates, usaStateValue, } = useFormSubmit(props) - const isUsaCountry = selectedCountry?.id === 194 + const isUsaCountry = selectedCountry?.id === USA_ID return (
@@ -166,14 +169,20 @@ export const AddCardFormInner = (props: Props) => { {isUsaCountry && ( diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx index 40cffe8e..6adfba47 100644 --- a/src/features/AddCardForm/styled.tsx +++ b/src/features/AddCardForm/styled.tsx @@ -133,5 +133,11 @@ export const CustomCombobox = styled(Combobox)` ${PopOver}{ top: 55px; max-height: 300px; + + ${isMobileDevice + ? css` + top: 30px; + ` + : ''}; } ` as typeof Combobox diff --git a/src/features/Combobox/hooks/index.tsx b/src/features/Combobox/hooks/index.tsx index 70d11b37..2b6a05c8 100644 --- a/src/features/Combobox/hooks/index.tsx +++ b/src/features/Combobox/hooks/index.tsx @@ -32,6 +32,7 @@ export const useCombobox = ({ noSearch, onBlur, onChange, + onFocus, onSelect, options, selected, @@ -104,6 +105,11 @@ export const useCombobox = ({ onBlur?.(event) } + const onInputFocus = (event: FocusEvent) => { + open() + onFocus?.(event) + } + useEffect(() => { const selectedIndex = findIndex(filteredOptions, ({ name }) => name === query) setIndex(selectedIndex) @@ -138,6 +144,7 @@ export const useCombobox = ({ inputFieldRef, isOpen, onInputBlur, + onInputFocus, onKeyDown, onOptionSelect, onOutsideClick, diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx index 3590f4d7..653750e7 100644 --- a/src/features/Combobox/index.tsx +++ b/src/features/Combobox/index.tsx @@ -61,6 +61,7 @@ export const Combobox = (props: Props) => { inputFieldRef, isOpen, onInputBlur, + onInputFocus, onKeyDown, onOptionSelect, onOutsideClick, @@ -102,7 +103,7 @@ export const Combobox = (props: Props) => { ({ padding-left: 24px; color: ${({ theme }) => theme.colors.white70}; background-color: transparent; - text-transform: capitalize; ${({ isHighlighted }) => isHighlighted && css` color: ${({ theme }) => theme.colors.white}; @@ -74,10 +73,6 @@ export const WrapperIcon = styled.span` : ''}; ` -export const ScAudioWrap = styled.div` - margin-left: 20px; -` - export const ScLoaderWrapper = styled.div` border-radius: 10px; display: flex; diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx index 301d9c48..9a6bbe65 100644 --- a/src/features/Combobox/types.tsx +++ b/src/features/Combobox/types.tsx @@ -18,6 +18,7 @@ export type Props = Pick, ( | 'title' | 'placeholder' | 'onBlur' + | 'onFocus' )> & { className?: string, customListStyles?: CustomStyles, diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 38fa2d07..09a00744 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -129,7 +129,6 @@ const inputStyles = css` export const InputStyled = styled.input` ${inputStyles} opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; - text-transform: capitalize; ::placeholder { opacity: 0;