fix(1336): card add form error language (#442)

src/config/lexics/payment.tsx

@@ -2,5 +2,6 @@ export const paymentLexics = {
   add_card: 8313,
   card_holder_name: 2021,
   error_can_not_add_card: 14447,
+  error_empty_name: 15290,
   error_payment_unsuccessful: 14446,
 }

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

@@ -6,6 +6,7 @@ import type {
 import {
   useState,
   useEffect,
+  useCallback,
 } from 'react'
 
 import type { StripeElementChangeEvent } from '@stripe/stripe-js'
@@ -20,6 +21,7 @@ import toUpper from 'lodash/toUpper'
 import { useObjectState } from 'hooks'
 
 import { useCardsStore } from 'features/CardsStore'
+import { useLexicsStore } from 'features/LexicsStore'
 
 export enum ElementTypes {
   CardCvc = 'cardCvc',
@@ -51,16 +53,23 @@ const initialState = {
 export const useFormSubmit = ({ onAddSuccess }: Props) => {
   const stripe = useStripe()
   const elements = useElements()
+  const { translate } = useLexicsStore()
   const { onAddCard, setError: setCardError } = useCardsStore()
   const [name, setName] = useState('')
   const [inputStates, setInputStates] = useObjectState(initialState)
-  const [error, setError] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
 
+  const resetErrors = useCallback(() => {
+    setErrorMessage('')
+    setCardError('')
+  }, [setErrorMessage, setCardError])
+
   const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target
-    if (/^[A-Za-z]{0,500}$/.test(value)) {
+    if (/^[A-Za-z .,'-]{0,500}$/.test(value)) {
       setName(toUpper(value))
+      resetErrors()
 
       const cardHolderState = inputStates[ElementTypes.CardHolder]
       setInputStates({
@@ -75,6 +84,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
   const onInputsChange = (e: StripeElementChangeEvent) => {
     const value = inputStates[e.elementType as ElementTypes]
     setInputStates({ [e.elementType]: { ...value, empty: e.empty } })
+    resetErrors()
   }
 
   const onInputsFocus = (elementType: ElementTypes) => () => {
@@ -93,6 +103,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+    resetErrors()
 
     if (!stripe || !elements) {
       // Stripe.js has not loaded yet.
@@ -100,7 +111,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
     }
 
     if (!name) {
-      setError('Name can not be empty')
+      setErrorMessage(translate('error_empty_name'))
       return
     }
 
@@ -113,8 +124,8 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
     )
 
     if (tokenError) {
-      setError(tokenError.message || '')
       setLoader(false)
+      setErrorMessage(tokenError.message || '')
     } else if (token) {
       setLoader(true)
       onAddCard(token.id)
@@ -128,7 +139,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
   }, [setCardError])
 
   return {
-    error,
+    errorMessage,
     handleSubmit,
     isLabelVisible,
     loader,

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

@@ -48,7 +48,7 @@ export const AddCardFormInner = (props: Props) => {
   } = props
   const { error: cardError } = useCardsStore()
   const {
-    error: formError,
+    errorMessage,
     handleSubmit,
     isLabelVisible,
     loader,
@@ -116,9 +116,9 @@ export const AddCardFormInner = (props: Props) => {
         </ElementContainer>
       </Column>
       <ButtonsBlock>
-        {(formError || cardError) && (
+        {(errorMessage || cardError) && (
           <Errors>
-            {formError}
+            {errorMessage}
             <T9n t={cardError} />
           </Errors>
         ) }

src/features/AddCardForm/index.tsx

@@ -37,7 +37,7 @@ export const AddCardForm = ({
           onAddSuccess={onSuccess}
         >
           <SolidButton type='submit'>
-            Сохранить
+            <T9n t='save' />
           </SolidButton>
         </AddCardFormInner>
       )

src/features/StripeElements/index.tsx

@@ -17,7 +17,11 @@ export const StripeElements = ({ children }: Props) => {
   const { lang } = useLexicsStore()
 
   return (
-    <Elements stripe={stripe} options={{ locale: lang }}>
+    <Elements
+      key={lang}
+      stripe={stripe}
+      options={{ locale: lang }}
+    >
       {children}
     </Elements>
   )