From 6a12e9a56c8637e020c87a011d1e71a817a11be6 Mon Sep 17 00:00:00 2001
From: Shafqat Farhan <shafqat.farhan@arbisoft.com>
Date: Fri, 11 Jun 2021 20:12:21 +0500
Subject: [PATCH] fix: VAN-528 - Fixed email field's suggestion container
 design issues (#334)

* VAN-528 - Fixed email field's suggestion container design issues

* VAN-528 - Fixed email field's suggestion container design issues

* VAN-528 - Fixed test

* VAN-528 - removed unused file
---
 src/_style.scss                              | 13 +++++++++++
 src/register/RegistrationPage.jsx            | 23 ++++++++++++++------
 src/register/messages.jsx                    |  4 ++--
 src/register/tests/RegistrationPage.test.jsx |  4 ++--
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 8cfb7248..3aeec554 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -556,6 +556,7 @@ select.form-control {
 
 .one-rem-font {
   font-size: 0.99rem;
+  color: #707070;
 }
 
 @media (max-width: 767px) {
@@ -632,3 +633,15 @@ select.form-control {
 .-mt-4 {
     margin-top: -1.5rem;
 }
+
+.alert .alert-icon {
+  margin-top: 3px;
+}
+.alert-dismissible .close {
+  top: 4px;
+  font-weight: 500;
+
+  :hover {
+      font-weight: 700;
+    }
+}
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 45eca362..3a744910 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -262,30 +262,34 @@ class RegistrationPage extends React.Component {
             let suggestedTld = closest(topLevelDomain, DEFAULT_TOP_LEVEL_DOMAINS);
             suggestedTld = `${emailLexemes[0]}@${domainLexemes[0]}.${suggestedTld}`;
             errors.email = intl.formatMessage(messages['email.invalid.format.error']);
-            suggestedTld = intl.formatMessage(messages['did.you.mean.alert.text'], { email: suggestedTld });
+
             this.setState({
               suggestedTopLevelDomain: suggestedTld,
+              suggestedTldMessage: intl.formatMessage(messages['did.you.mean.alert.text']),
               suggestedServiceLevelDomain: '',
+              suggestedSldMessage: '',
               borderClass: '',
               skipEmailValidation: false,
             });
             break;
           } else {
-            this.setState({ suggestedTopLevelDomain: '' });
+            this.setState({ suggestedTopLevelDomain: '', suggestedTldMessage: '' });
           }
 
           if (DEFAULT_SERVICE_PROVIDER_DOMAINS.indexOf(serviceProvider) < 0) {
             let suggestedSld = closest(serviceProvider, DEFAULT_SERVICE_PROVIDER_DOMAINS);
             suggestedSld = `${emailLexemes[0]}@${suggestedSld}.${domainLexemes[1]}`;
-            suggestedSld = intl.formatMessage(messages['did.you.mean.alert.text'], { email: suggestedSld });
             errors.email = '';
+
             this.setState({
               suggestedServiceLevelDomain: suggestedSld,
+              suggestedSldMessage: intl.formatMessage(messages['did.you.mean.alert.text']),
               borderClass: 'yellow-border',
             });
           } else {
             this.setState({
               suggestedServiceLevelDomain: '',
+              suggestedSldMessage: '',
               borderClass: '',
             });
           }
@@ -342,19 +346,24 @@ class RegistrationPage extends React.Component {
   handleOnClose() {
     const { errors } = this.state;
     errors.email = '';
-    this.setState({ errors, suggestedTopLevelDomain: '', skipEmailValidation: true });
+    this.setState({
+      errors,
+      suggestedTopLevelDomain: '',
+      skipEmailValidation: true,
+      suggestedTldMessage: '',
+    });
   }
 
   renderEmailFeedback() {
     if (this.state.suggestedTopLevelDomain) {
       return (
-        <Alert variant="danger" onClose={this.handleOnClose} dismissible className="pb-1 pt-1" icon={Error}>
-          {this.state.suggestedTopLevelDomain}
+        <Alert variant="danger" onClose={this.handleOnClose} dismissible className="pb-2 pt-2 mt-2" icon={Error}>
+          <p className="mb-0">{this.state.suggestedTldMessage}<Alert.Link href="#">{this.state.suggestedTopLevelDomain}</Alert.Link>?</p>
         </Alert>
       );
     }
     if (this.state.suggestedServiceLevelDomain) {
-      return <span className="one-rem-font">{this.state.suggestedServiceLevelDomain}</span>;
+      return <span className="one-rem-font">{this.state.suggestedSldMessage}<Alert.Link href="#">{this.state.suggestedServiceLevelDomain}</Alert.Link>?</span>;
     }
 
     return null;
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index b9f823eb..133ff169 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -257,8 +257,8 @@ const messages = defineMessages({
   },
   'did.you.mean.alert.text': {
     id: 'did.you.mean.alert.text',
-    defaultMessage: 'Did you mean: {email}?',
-    description: 'Did you mean email alert suggestion',
+    defaultMessage: 'Did you mean: ',
+    description: 'Did you mean alert suggestion',
   },
 });
 
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index e03b08b5..6e33fa71 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -248,10 +248,10 @@ describe('RegistrationPage', () => {
       const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
 
       registrationPage.find('input#email').simulate('blur', { target: { value: 'test@gmail.con', name: 'email' } });
-      expect(registrationPage.find('RegistrationPage').state('suggestedTopLevelDomain')).toEqual('Did you mean: test@gmail.com?');
+      expect(registrationPage.find('RegistrationPage').state('suggestedTopLevelDomain')).toEqual('test@gmail.com');
 
       registrationPage.find('input#email').simulate('blur', { target: { value: 'test@fmail.com', name: 'email' } });
-      expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('Did you mean: test@gmail.com?');
+      expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('test@gmail.com');
 
       registrationPage.find('input#email').simulate('blur', { target: { value: 'test@hotmail.com', name: 'email' } });
       expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('');