subscribe success UI updated

vijayvulchi · vijayvulchi · commit 84a8a6ac6376 · 2022-01-27T21:30:34.000+05:30
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
@@ -116,20 +116,25 @@
       padding-right: 20px;
     }
   }
-  .email-error,
-  .subscribe-success {
+  .hide {
+    display: none;
+  }
+  .email-error {
     display: none;
     font-size: 12px;
-    color: #ED4B48;
     margin: 2px 0 !important;
   }
-
   .email-error {
     color: #ED4B48;
   }
-
   .subscribe-success {
-    color: #03A973;
+    display: flex;
+    justify-content: center;
+    flex-basis: 34%;
+    align-items: center;
+    h4 {
+      color: #03A973;
+    }
   }
 }
 
diff --git a/src/components/SubscribeButton.jsx b/src/components/SubscribeButton.jsx
@@ -5,6 +5,10 @@ import axios from 'axios';
 class SubscribeButton extends Component {
     constructor(props) {
         super(props);
+        
+        this.state = {
+            subscribed: false,
+        };
         this._reCaptchaRef = React.createRef();
     }
 
@@ -14,56 +18,49 @@ class SubscribeButton extends Component {
         const CONTACT_LIST_API = 'https://staging.testsigma.com/api/website/contacts';
         const email =  document.getElementById('email').value;
         const emailError = document.getElementById('email_error');
-        const subscribeSuccess = document.getElementById('subscribe_success');
         let trimmedURL = window.location.href;
 
         if (trimmedURL.length > 250)
             trimmedURL = window.location.href.substr(0, 240)+"...";
 
         const regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-
-        this._reCaptchaRef.current.executeAsync().then(value => {
-
-            const formData = {
-                'CATEGORY': 'Product Updates',
-                'LSOURCE': 'Tutorials',
-                'UPDATES': '',
-                'URL': trimmedURL,
-                'add_tags_immediately': false,
-                'email': email,
-                'g-recaptcha-response': value,
-                'list_id' : 'bec00ef235',
-                'tags': ['Product Updates']
-            };
-
-            emailError.style.display = "none";
-            subscribeSuccess.style.display = "none";
-
-            if (!regex.test(email)) {
-                emailError.style.display = "block";
-                return false;
-            } else {
-                axios({
-                    method: 'POST',
-                    url: CONTACT_LIST_API,
-                    data: formData,
-                    headers: { "Content-Type": "application/json; charset=UTF-8" },
-                })
+        
+        emailError.style.display = "none";
+        if (!regex.test(email)) {
+            emailError.style.display = "block";
+            return false;
+        } else {
+            this._reCaptchaRef.current.executeAsync().then(value => {
+                if (value) {
+                    const formData = {
+                        'CATEGORY': 'Product Updates',
+                        'LSOURCE': 'Tutorials',
+                        'UPDATES': '',
+                        'URL': trimmedURL,
+                        'add_tags_immediately': false,
+                        'email': email,
+                        'g-recaptcha-response': value,
+                        'list_id' : 'bec00ef235',
+                        'tags': ['Product Updates']
+                    };
+        
+                    axios({
+                        method: 'POST',
+                        url: CONTACT_LIST_API,
+                        data: formData,
+                        headers: { "Content-Type": "application/json; charset=UTF-8" },
+                    })
                     .then(function (response) {
                         // handle success
-                        document.getElementById('email').value = "";
-                        subscribeSuccess.style.display = "block";
-                        setTimeout(() => {
-                            subscribeSuccess.style.display = "none";
-                        }, 3000);
-                        // console.log("Success: ", response);
-                    })
+                        this.setState({ subscribed: true });
+                    }.bind(this))
                     .catch(function (response) {
                         // handle error
                         console.error("Failed: ", response);
                     });
-            }
-        });
+                }
+            });
+        }
     }
 
     render() {
@@ -75,7 +72,7 @@ class SubscribeButton extends Component {
                             Stay up to date with product updates & news
                         </h4>
                     </div>
-                    <div className="flex_item">
+                    <div className={this.state.subscribed ? "hide" : "flex_item"}>
                         <form>
                             <svg width="20" height="15" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
@@ -85,16 +82,20 @@ class SubscribeButton extends Component {
                             <input type="text" id="email" name="email" placeholder="Your Email Id"/>
                         </form>
                         <p id="email_error" className="email-error">Please fill out this field.</p>
-                        <p id="subscribe_success" className="subscribe-success">You're now subscribed to our monthly product updates.</p>
                     </div>
-                    <div className="flex_item btn_width">
+                    <div className={this.state.subscribed ? "hide" : "flex_item btn_width"}>
                         <ReCAPTCHA
                             size="invisible"
                             ref={this._reCaptchaRef}
                             sitekey='6LcL08cZAAAAAAn21PBn75R1qLquLlbx1ZB0ZIFd'
                         />
                         <button className="btn" onClick={this.subscribeNewsletters}>Subscribe</button>
                     </div>
+                    <div className={this.state.subscribed ? "flex_item subscribe-success" : "hide"}>
+                        <h4 className="green_text">
+                            You're now subscribed to our monthly product updates.
+                        </h4>
+                    </div>
                 </div>
             </>
         );

Original file line number	Diff line number	Diff line change
`@@ -116,20 +116,25 @@`
`116`	`116`	`padding-right: 20px;`
`117`	`117`	`}`
`118`	`118`	`}`
`119`		`- .email-error,`
`120`		`- .subscribe-success {`
	`119`	`+ .hide {`
	`120`	`+ display: none;`
	`121`	`+ }`
	`122`	`+ .email-error {`
`121`	`123`	`display: none;`
`122`	`124`	`font-size: 12px;`
`123`		`- color: #ED4B48;`
`124`	`125`	`margin: 2px 0 !important;`
`125`	`126`	`}`
`126`		`-`
`127`	`127`	`.email-error {`
`128`	`128`	`color: #ED4B48;`
`129`	`129`	`}`
`130`		`-`
`131`	`130`	`.subscribe-success {`
`132`		`- color: #03A973;`
	`131`	`+ display: flex;`
	`132`	`+ justify-content: center;`
	`133`	`+ flex-basis: 34%;`
	`134`	`+ align-items: center;`
	`135`	`+ h4 {`
	`136`	`+ color: #03A973;`
	`137`	`+ }`
`133`	`138`	`}`
`134`	`139`	`}`
`135`	`140`