feat(loqate): added support for having a loader also changed copy (#5511

) * feat(loqate): added support for having a loader also changed copy * feat(loqate): code cleanup
blockchain · Nov 14, 2022 · 324a16b · 324a16b
1 parent 21e9f06
commit 324a16b
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 33 deletions.
diff --git a/...ages/blockchain-wallet-v4-frontend/src/modals/BuySell/BillingAddress/template.success.tsx b/...ages/blockchain-wallet-v4-frontend/src/modals/BuySell/BillingAddress/template.success.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
+import { Padding, SpinningLoader } from '@blockchain-com/constellation'
 import axios from 'axios'
 import { validate } from 'postal-codes-js'
 // @ts-ignore
@@ -26,7 +27,6 @@ import FormItem from 'components/Form/FormItem'
 import FormLabel from 'components/Form/FormLabel'
 import SelectBox from 'components/Form/SelectBox'
 import TextBox from 'components/Form/TextBox'
-import { Padding } from 'components/Padding'
 import { actions, model, selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 import { StateType } from 'data/types'
@@ -38,6 +38,8 @@ import AddressItem from '../../Onboarding/KycVerification/UserAddress/AddressIte
 import { Props as OwnProps, SuccessStateType } from '.'
 import CountrySelect from './CountrySelect'
 
+const MIN_SEARCH_CHARACTERS = 3
+
 const { FORMS_BS_BILLING_ADDRESS } = model.components.buySell
 
 const countryUsesPostalCode = (countryCode) => {
@@ -87,6 +89,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
   const [userStartedSearch, setUserStartedSearch] = useState<boolean>(false)
   const [suggestedAddresses, setSuggestedAddresses] = useState<Array<LocationAddress>>([])
   const [searchText, setSearchText] = useState('')
+  const [isAddressLoading, setIsAddressLoading] = useState(false)
   const {
     data: { api }
   } = useSelector(selectors.core.walletOptions.getDomains)
@@ -113,6 +116,17 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     countryUsesZipcode(countryCode) || countryUsesPostalCode(countryCode)
 
   const findUserAddresses = async (text: string, id?: string) => {
+    if (text.length === 0) {
+      setSuggestedAddresses([])
+      return
+    }
+
+    if (text.length < MIN_SEARCH_CHARACTERS) {
+      return
+    }
+
+    setIsAddressLoading(true)
+
     let addresses = []
     const searchQuery = queryString.stringify({
       country_code: countryCode,
@@ -128,6 +142,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     }
 
     setSuggestedAddresses(addresses)
+    setIsAddressLoading(false)
   }
 
   const findUserAddress = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -192,7 +207,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
       <FlyoutContent mode='middle'>
         <CustomForm onSubmit={props.handleSubmit}>
           <FormWrapper flexDirection='column'>
-            <Padding horizontal={40}>
+            <Padding horizontal={2.5}>
               <CountrySelect {...props} />
             </Padding>
             <Divider />
@@ -212,7 +227,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                       name='homeAddress'
                       placeholder='Start typing to find your home address'
                       component={TextBox}
-                      onChange={debounce(findUserAddress, 200)}
+                      onChange={debounce(findUserAddress, 400)}
                     />
                   </FormItem>
                 </FormGroup>
@@ -229,6 +244,12 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                 </LinkButton>
               )}
 
+              {props.useLoqateServiceEnabled && isAddressLoading && (
+                <Padding top={0.625}>
+                  <SpinningLoader variant='color' size='small' />
+                </Padding>
+              )}
+
               {props.useLoqateServiceEnabled &&
                 !isAddressSelected &&
                 !enterAddressManually &&

diff --git a/.../blockchain-wallet-v4-frontend/src/modals/BuySell/UpgradeToGold/UpgradeToGold.stories.tsx b/.../blockchain-wallet-v4-frontend/src/modals/BuySell/UpgradeToGold/UpgradeToGold.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { IntlProvider } from 'react-intl'
+import { Provider } from 'react-redux'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { combineReducers, createStore } from 'redux'
+
+import UpgradeToGold from './template'
+
+const store = createStore(combineReducers({}))
+
+export default {
+  args: {
+    handleClose: () => {},
+    verifyIdentity: () => {}
+  },
+  component: UpgradeToGold,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <IntlProvider locale='en'>
+          <div style={{ display: 'flex', height: '100vh', width: '480px' }}>{Story()}</div>
+        </IntlProvider>
+      </Provider>
+    )
+  ],
+  title: 'Flyouts/BuySell/UpgradeToGold'
+} as ComponentMeta<typeof UpgradeToGold>
+
+export const Template: ComponentStory<typeof UpgradeToGold> = (args) => <UpgradeToGold {...args} />
+
+export const Default = Template.bind({})
diff --git a/...llet-v4-frontend/src/modals/DebitCard/OrderCard/ResidentialAddress/ResidentialAddress.tsx b/...llet-v4-frontend/src/modals/DebitCard/OrderCard/ResidentialAddress/ResidentialAddress.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
-import { PaletteColors } from '@blockchain-com/constellation'
+import { Padding, PaletteColors, SpinningLoader } from '@blockchain-com/constellation'
 import axios from 'axios'
 import { validate } from 'postal-codes-js'
 // @ts-ignore
@@ -33,7 +33,6 @@ import FormItem from 'components/Form/FormItem'
 import FormLabel from 'components/Form/FormLabel'
 import SelectBox from 'components/Form/SelectBox'
 import TextBox from 'components/Form/TextBox'
-import { Padding } from 'components/Padding'
 import { actions, model, selectors } from 'data'
 import { ResidentialAddress as ResidentialAddressFormValues } from 'data/components/debitCard/types'
 import { RootState } from 'data/rootReducer'
@@ -46,6 +45,8 @@ import AddressItem from '../../../Onboarding/KycVerification/UserAddress/Address
 
 const { RESIDENTIAL_ADDRESS_FORM } = model.components.debitCard
 
+const MIN_SEARCH_CHARACTERS = 3
+
 const countryUsesPostalCode = (countryCode) => {
   return path([countryCode, 'postalCodeFormat'], postalCodes)
 }
@@ -169,6 +170,7 @@ const ResidentialAddress = ({
   const [userStartedSearch, setUserStartedSearch] = useState<boolean>(false)
   const [suggestedAddresses, setSuggestedAddresses] = useState<Array<LocationAddress>>([])
   const [searchText, setSearchText] = useState('')
+  const [isAddressLoading, setIsAddressLoading] = useState(false)
 
   const canSubmitAddress =
     (!isAddressSelected && enterAddressManually) || (isAddressSelected && !enterAddressManually)
@@ -252,23 +254,33 @@ const ResidentialAddress = ({
   }
 
   const findUserAddresses = async (text: string, id?: string) => {
-    if (residentialAddress) {
-      let addresses = []
-      const searchQuery = queryString.stringify({
-        country_code: residentialAddress.country,
-        id,
-        text
-      })
-      const response = await axios.get(`${api}/nabu-gateway/address-capture/find?${searchQuery}`, {
-        headers: { authorization: `Bearer ${nabuToken}` }
-      })
-
-      if (response.data) {
-        addresses = response.data?.addresses
-      }
-
-      setSuggestedAddresses(addresses)
+    if (!residentialAddress || text.length < MIN_SEARCH_CHARACTERS) {
+      return
+    }
+    if (text.length === 0) {
+      setSuggestedAddresses([])
+      return
+    }
+    if (suggestedAddresses.length) {
+      setSuggestedAddresses([])
+    }
+    setIsAddressLoading(true)
+    let addresses = []
+    const searchQuery = queryString.stringify({
+      country_code: residentialAddress.country,
+      id,
+      text
+    })
+    const response = await axios.get(`${api}/nabu-gateway/address-capture/find?${searchQuery}`, {
+      headers: { authorization: `Bearer ${nabuToken}` }
+    })
+
+    if (response.data) {
+      addresses = response.data?.addresses
     }
+
+    setSuggestedAddresses(addresses)
+    setIsAddressLoading(false)
   }
 
   const retrieveUserAddresses = async (id: string) => {
@@ -320,7 +332,7 @@ const ResidentialAddress = ({
           />
         </Text>
       </FlyoutHeader>
-      <Padding left={40} right={40}>
+      <Padding left={2.5} right={2.5}>
         <Text
           weight={500}
           size='16px'
@@ -337,7 +349,7 @@ const ResidentialAddress = ({
         <CustomForm onSubmit={handleSubmit}>
           <FormWrapper flexDirection='column' justifyContent='space-between'>
             {editAddress ? (
-              <Padding horizontal={40}>
+              <Padding horizontal={2.5}>
                 {useLoqateServiceEnabled && (
                   <FormGroup>
                     <FormItem>
@@ -353,7 +365,7 @@ const ResidentialAddress = ({
                         name='homeAddress'
                         placeholder='Start typing to find your home address'
                         component={TextBox}
-                        onChange={debounce(findUserAddress, 200)}
+                        onChange={debounce(findUserAddress, 400)}
                       />
                     </FormItem>
                   </FormGroup>
@@ -373,6 +385,11 @@ const ResidentialAddress = ({
                     </LinkButton>
                   )}
 
+                {useLoqateServiceEnabled && isAddressLoading && (
+                  <Padding top={0.625}>
+                    <SpinningLoader variant='color' size='small' />
+                  </Padding>
+                )}
                 {useLoqateServiceEnabled &&
                   !isAddressSelected &&
                   !enterAddressManually &&
@@ -541,7 +558,7 @@ const ResidentialAddress = ({
                 )}
               </Padding>
             ) : (
-              <Padding left={40} right={40}>
+              <Padding left={2.5} right={2.5}>
                 <FormGroup>
                   <FormItem>
                     <Label htmlFor='homeAddress'>

diff --git a/...et-v4-frontend/src/modals/Onboarding/KycVerification/UserAddress/UserAddress.template.tsx b/...et-v4-frontend/src/modals/Onboarding/KycVerification/UserAddress/UserAddress.template.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
-import { Flex } from '@blockchain-com/constellation'
+import { Flex, SpinningLoader } from '@blockchain-com/constellation'
 import { validate } from 'postal-codes-js'
 // @ts-ignore
 import postalCodes from 'postal-codes-js/generated/postal-codes-alpha2'
@@ -24,7 +24,7 @@ import TextBox from 'components/Form/TextBox'
 import { actions, model, selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 import { CountryType, StateType } from 'data/types'
-import { useCountryList, useUSStateList } from 'hooks'
+import { useCountryList, useRemote, useUSStateList } from 'hooks'
 import { countryUsesZipcode, required } from 'services/forms'
 import { debounce } from 'utils/helpers'
 
@@ -83,7 +83,9 @@ const getStateElements = (states: Array<StateType>) => [
 const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
   const { data: supportedCountries } = useCountryList({ scope: CountryScope.SIGNUP })
   const { data: supportedUSStates } = useUSStateList()
-  const userAddresses = useSelector(selectors.components.identityVerification.getUserAddresses)
+  const { data: userAddresses, isLoading } = useRemote(
+    selectors.components.identityVerification.getUserAddresses
+  )
   const userRetrievedAddress = useSelector(
     selectors.components.identityVerification.getUserRetrieveAddress
   )
@@ -147,6 +149,9 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
   )
 
   const findUserAddresses = (text: string, id?: string) => {
+    if (text.length < 3) {
+      return
+    }
     dispatch(actions.components.identityVerification.fetchUserAddress({ countryCode, id, text }))
   }
 
@@ -217,7 +222,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                     name='homeAddress'
                     placeholder='Start typing to find your home address'
                     component={TextBox}
-                    onChange={debounce(findUserAddress, 200)}
+                    onChange={debounce(findUserAddress, 400)}
                   />
                 </FormItem>
               </FormGroup>
@@ -234,11 +239,16 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
               </LinkButton>
             )}
 
+            {useLoqateServiceEnabled && isLoading && (
+              <SpinningLoader variant='color' size='small' />
+            )}
+
             {useLoqateServiceEnabled &&
               !isAddressSelected &&
               !enterAddressManually &&
-              userAddresses.data?.addresses?.length > 0 &&
-              userAddresses.data?.addresses.map((address) => (
+              userAddresses &&
+              userAddresses?.addresses?.length > 0 &&
+              userAddresses?.addresses.map((address) => (
                 <AddressItem
                   address={address}
                   key={address.id}

diff --git a/...ontend/src/modals/Onboarding/KycVerification/UserInfoDetails/UserInfoDetails.template.tsx b/...ontend/src/modals/Onboarding/KycVerification/UserInfoDetails/UserInfoDetails.template.tsx
@@ -104,7 +104,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                   <Text weight={500} size='14px' color='grey900'>
                     <FormattedMessage
                       id='identityverification.personal.firstnamerequired'
-                      defaultMessage='First Name *'
+                      defaultMessage='Legal First Name *'
                     />
                   </Text>
                 </Label>
@@ -121,7 +121,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                   <Text weight={500} size='14px' color='grey900'>
                     <FormattedMessage
                       id='identityverification.personal.lastnamerequired'
-                      defaultMessage='Last Name *'
+                      defaultMessage='Legal Last Name *'
                     />
                   </Text>
                 </Label>