CustomErrorMessage and removeMaskDocument props

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+# Added
+
+- Props `customErrorMessage` and `removeMaskDocument`
+
 ## [1.24.0] - 2021-11-09
 
 ### Removed

docs/README.md

@@ -38,6 +38,36 @@ Now, create the file `store/interfaces.json` and define some interfaces:
   }
 }
 ```
+If you want to change the default alert message in MyAccount, use prop `customErrorMessage`
+
+```json
+"my-account": {
+    "props": { "customErrorMessage": "My custom error message" },
+    "blocks": [
+    ]
+  }
+```
+
+| Prop name       | Type      | Description                                                 | Default value |
+| --------------- | --------- | ----------------------------------------------------------- | ------------- |
+| `customErrorMessage` | `string` | Change the default generic error message in MyAccount | `undefined`   |
+
+---
+If you want to remove the mask from the document when saving the document in MyAccount, use prop `removeMaskDocument`
+
+```json
+"my-account": {
+    "props": { "removeMaskDocument": true },
+    "blocks": [
+    ]
+  }
+```
+
+| Prop name       | Type      | Description                                                 | Default value |
+| --------------- | --------- | ----------------------------------------------------------- | ------------- |
+| `removeMaskDocument` | `boolean` | Remove mask in document field in MyAccount | `undefined`   |
+
+---
 
 If you want to block the editing of the document in the my account form, use the props `blockDocument`
 

react/components/AppRouter.tsx

@@ -18,6 +18,8 @@ import Menu from './Menu'
 
 interface Props {
   blockDocument?: boolean
+  customErrorMessage?: string
+  removeMaskDocument: boolean
 }
 
 class AppRouter extends Component<Props> {
@@ -59,7 +61,7 @@ class AppRouter extends Component<Props> {
       {
         path: '/profile/edit',
         component: () => (
-          <ProfileEdit blockDocument={this.props.blockDocument} />
+          <ProfileEdit blockDocument={this.props.blockDocument} customErrorMessage={this.props.customErrorMessage} removeMaskDocument={this.props.removeMaskDocument} />
         ),
       },
     ]

react/components/Profile/ProfileFormBox.tsx

@@ -48,7 +48,7 @@ class ProfileFormBox extends Component<InnerProps & OutterProps, State> {
   }
 
   private handleSubmit = async ({ valid, profile }: any) => {
-    const { onDataSave, onError } = this.props
+    const { onDataSave, onError, customErrorMessage } = this.props
 
     await this.setStateAsync({ isLoading: true, valid, profile })
     try {
@@ -70,7 +70,9 @@ class ProfileFormBox extends Component<InnerProps & OutterProps, State> {
       this.setState({ isLoading: false })
       onDataSave()
     } catch (error) {
-      onError(error)
+      console.error(error)
+      this.setState({ isLoading: false })
+      onError(customErrorMessage)
     }
   }
 
@@ -79,7 +81,10 @@ class ProfileFormBox extends Component<InnerProps & OutterProps, State> {
   }
 
   private submit = (profile: ProfileInput) => {
-    const { updateProfile } = this.props
+    const { updateProfile, removeMaskDocument } = this.props
+
+    if (removeMaskDocument && profile?.document)
+      profile.document = profile.document.replace(/\D/g, '')
 
     return updateProfile({ variables: { profile } })
   }
@@ -132,9 +137,11 @@ interface InnerProps {
 }
 interface OutterProps {
   onDataSave: () => void
-  onError: (error: any) => void
+  onError: (customErrorMessage?: string) => void
   profile: Profile
   blockDocument?: boolean
+  customErrorMessage?: string
+  removeMaskDocument: boolean
 }
 
 const enhance = compose<InnerProps & OutterProps, OutterProps>(

react/components/pages/ProfileEdit.tsx

@@ -22,14 +22,16 @@ class ProfileEdit extends Component<Props> {
   }
 
   public render() {
-    const { profile, handleError, blockDocument } = this.props
+    const { profile, handleError, blockDocument, customErrorMessage, removeMaskDocument } = this.props
 
     return (
       <ProfileFormBox
         profile={profile}
         onDataSave={this.handleGoBack}
         onError={handleError}
         blockDocument={blockDocument}
+        customErrorMessage={customErrorMessage}
+        removeMaskDocument={removeMaskDocument}
       />
     )
   }
@@ -40,9 +42,11 @@ interface Props extends InjectedContentWrapperProps {
   profile: Profile
   history: any
   blockDocument?: boolean
+  customErrorMessage?: string
+  removeMaskDocument: boolean
 }
 
-const enhance = compose<Props, { blockDocument?: boolean }>(
+const enhance = compose<Props, { blockDocument?: boolean, customErrorMessage?: string, removeMaskDocument: boolean }>(
   graphql(GET_PROFILE),
   branch<Props>(
     ({ data }) => data.profile == null,

react/index.tsx

@@ -7,6 +7,8 @@ import { logGeneralErrors } from './utils/splunk'
 
 interface Props {
   blockDocument?: boolean
+  customErrorMessage?: string
+  removeMaskDocument: boolean
 }
 
 class MyAccount extends Component<Props> {
@@ -20,7 +22,7 @@ class MyAccount extends Component<Props> {
     return (
       <Wrapper>
         <div className="vtex-account helvetica flex justify-around">
-          <AppRouter blockDocument={this.props.blockDocument} />
+          <AppRouter blockDocument={this.props.blockDocument} customErrorMessage={this.props.customErrorMessage} removeMaskDocument={this.props.removeMaskDocument}/>
         </div>
       </Wrapper>
     )