From 2abee3ef902aa00f233d49cec65af2467f8f7c62 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 09:29:27 +0700
Subject: [PATCH 1/2] improvement(reskin-profile): verified badge

---
 .../components/ProfilePage/Header/index.jsx   | 99 +++++++++++++------
 1 file changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/shared/components/ProfilePage/Header/index.jsx b/src/shared/components/ProfilePage/Header/index.jsx
index c87fe95f73..5862718418 100644
--- a/src/shared/components/ProfilePage/Header/index.jsx
+++ b/src/shared/components/ProfilePage/Header/index.jsx
@@ -3,17 +3,23 @@
  */
 import React, { useEffect, useState } from 'react';
 import PT from 'prop-types';
+import { connect } from 'react-redux';
 
+import { actions } from 'topcoder-react-lib';
 import { isomorphy } from 'topcoder-react-utils';
 
-// import VerifiedBadge from 'assets/images/profile/verified-badge.svg';
-// import InfoIcon from 'assets/images/profile/ico-info.svg';
-// import Tooltip from 'components/Tooltip';
+import VerifiedBadge from 'assets/images/profile/verified-badge.svg';
+import InfoIcon from 'assets/images/profile/ico-info.svg';
+import Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
-const ProfileHeader = ({ info }) => {
+const verifiedBadgeLookerId = '3322';
+
+const ProfileHeader = ({ getLookerDone, lookerInfo, info }) => {
   const [imageUrl, setimageUrl] = useState();
+  const [isMemberVerified, setIsMemberVerified] = useState(false);
+  const { handle } = info;
 
   useEffect(() => {
     let url = '';
@@ -25,16 +31,29 @@ const ProfileHeader = ({ info }) => {
     setimageUrl(url);
   }, []);
 
+  useEffect(() => {
+    if (!lookerInfo || lookerInfo.error) {
+      getLookerDone(verifiedBadgeLookerId);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!lookerInfo || lookerInfo.error) {
+      return;
+    }
+    const { lookerData } = lookerInfo;
+    const currentUserData = lookerData.find(x => x['user.handle'] === handle);
+    setIsMemberVerified(currentUserData && currentUserData['member_verification.status'] === 'Verified');
+  }, [lookerInfo]);
+
   const loadImageError = () => {
     setimageUrl(null);
   };
 
-  // const tooltipContent = (
-  //   <div styleName="tooltip-content">verified member</div>
-  // );
+  const tooltipContent = (
+    <div styleName="tooltip-content">verified member</div>
+  );
 
-  const { handle } = info;
-  // const isMemberVerified = true;
 
   return (
     <div styleName="container">
@@ -55,24 +74,22 @@ const ProfileHeader = ({ info }) => {
             {handle}
           </div>
 
-          {/* { */}
-          {/*   isMemberVerified && ( */}
-          {/*     <div styleName="verified-member"> */}
-          {/*       <VerifiedBadge /> */}
-
-          {/*       <span>verified member</span> */}
-
-          {/*       <div styleName="info"> */}
-          {/*         <Tooltip */}
-          {/*           content={tooltipContent} */}
-          {/*           trigger={['hover', 'focus']} */}
-          {/*         > */}
-          {/*           <InfoIcon /> */}
-          {/*         </Tooltip> */}
-          {/*       </div> */}
-          {/*     </div> */}
-          {/*   ) */}
-          {/* } */}
+          {isMemberVerified && (
+            <div styleName="verified-member">
+              <VerifiedBadge />
+
+              <span>verified member</span>
+
+              <div styleName="info">
+                <Tooltip
+                  content={tooltipContent}
+                  trigger={['hover', 'focus']}
+                >
+                  <InfoIcon />
+                </Tooltip>
+              </div>
+            </div>
+          )}
         </div>
 
       </div>
@@ -85,8 +102,34 @@ ProfileHeader.defaultProps = {
   info: {},
 };
 
+function mapStateToProps(state) {
+  const {
+    looker: {
+      dataSet,
+    },
+  } = state;
+  return {
+    lookerInfo: dataSet[verifiedBadgeLookerId],
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    getLookerDone: (lookerId) => {
+      dispatch(actions.looker.getLookerDone(lookerId));
+    },
+  };
+}
+
 ProfileHeader.propTypes = {
   info: PT.shape(),
+  lookerInfo: PT.shape().isRequired,
+  getLookerDone: PT.func.isRequired,
 };
 
-export default ProfileHeader;
+const Container = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ProfileHeader);
+
+export default Container;

From 2d863eda6abb45705330c61d5e25e1cb33e4afde Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 18:43:43 +0700
Subject: [PATCH 2/2] fix(reskin-profile): test update

---
 .../components/ProfilePage/__snapshots__/index.jsx.snap       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index 440ab14076..6070927991 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
@@ -5,7 +5,7 @@ exports[`renders a full Profile correctly 1`] = `
   className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
 >
   <div>
-    <ProfileHeader
+    <Connect(ProfileHeader)
       info={
         Object {
           "competitionCountryCode": "USA",
@@ -717,7 +717,7 @@ exports[`renders an empty Profile correctly 1`] = `
   className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
 >
   <div>
-    <ProfileHeader
+    <Connect(ProfileHeader)
       info={
         Object {
           "competitionCountryCode": "USA",