From 2148005a3e8149d0de8c78d2600792d9a7bb4e65 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 30 Jun 2022 15:25:44 +0700 Subject: [PATCH 01/16] improvement(reskin-tco-badge): tco badge --- src/assets/images/default-award.svg | 17 ++++ src/assets/images/profile/header-overlay.png | Bin 0 -> 12135 bytes src/assets/images/profile/header-overlay.svg | 3 - .../ProfilePage/Awards/AwardBadge/index.jsx | 37 ++++++++ .../ProfilePage/Awards/AwardBadge/styles.scss | 32 +++++++ .../ProfilePage/Awards/AwardModal/index.jsx | 52 +++++++++++ .../ProfilePage/Awards/AwardModal/styles.scss | 52 +++++++++++ .../components/ProfilePage/Awards/index.jsx | 81 +++++++++++++++++ .../components/ProfilePage/Awards/styles.scss | 84 ++++++++++++++++++ .../ProfilePage/BadgesModal/modal.scss | 2 +- .../components/ProfilePage/Header/styles.scss | 5 +- src/shared/components/ProfilePage/index.jsx | 9 ++ src/shared/containers/Profile.jsx | 4 + 13 files changed, 372 insertions(+), 6 deletions(-) create mode 100644 src/assets/images/default-award.svg create mode 100644 src/assets/images/profile/header-overlay.png delete mode 100644 src/assets/images/profile/header-overlay.svg create mode 100644 src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx create mode 100644 src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss create mode 100644 src/shared/components/ProfilePage/Awards/AwardModal/index.jsx create mode 100644 src/shared/components/ProfilePage/Awards/AwardModal/styles.scss create mode 100644 src/shared/components/ProfilePage/Awards/index.jsx create mode 100644 src/shared/components/ProfilePage/Awards/styles.scss diff --git a/src/assets/images/default-award.svg b/src/assets/images/default-award.svg new file mode 100644 index 0000000000..53bf3bbd6e --- /dev/null +++ b/src/assets/images/default-award.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/src/assets/images/profile/header-overlay.png b/src/assets/images/profile/header-overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..b88c5159c1a6fb09bf9ed0c54ccda3c15c6eee7b GIT binary patch literal 12135 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 WLci@*X*US?qkUBGNUjDZ@c#hcjxxjm literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/header-overlay.svg b/src/assets/images/profile/header-overlay.svg deleted file mode 100644 index b4d2bc7d82..0000000000 --- a/src/assets/images/profile/header-overlay.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx new file mode 100644 index 0000000000..1f37fd8852 --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import PT from 'prop-types'; +import FallBackAwardIcon from 'assets/images/default-award.svg'; + +import './styles.scss'; + +const AwardBadge = ({ + title, imageUrl, mimeType, onSelectBadge, +}) => ( +
+ { + imageUrl ? ( + award-badge + ) : ( + + ) + } +
+ {title} +
+
+); + +AwardBadge.defaultProps = { + title: '', + imageUrl: null, + mimeType: 'image/svg+xml', +}; + +AwardBadge.propTypes = { + title: PT.string, + imageUrl: PT.string, + mimeType: PT.string, + onSelectBadge: PT.func.isRequired, +}; + +export default AwardBadge; diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss b/src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss new file mode 100644 index 0000000000..a8dd313416 --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss @@ -0,0 +1,32 @@ +@import "~styles/mixins"; + +.awardBadge { + background-color: $tc-white; + padding: 16px; + border-radius: 8px; + display: flex; + cursor: pointer; + + .image { + width: 48px; + height: 48px; + } + + .title { + @include roboto-bold; + $color: $tco-black; + + font-size: 14px; + font-weight: 700; + line-height: 16px; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + max-width: 130px; + + @include xs-to-sm { + max-width: unset; + } + } +} diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx new file mode 100644 index 0000000000..bc383a9ffc --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import PT from 'prop-types'; +import FallBackAwardIcon from 'assets/images/default-award.svg'; + +import './styles.scss'; + +const AwatarModal = ({ + modalData, +}) => { + const { + title, description, imageUrl, mimeType, + } = modalData; + + return ( +
+ { + imageUrl ? ( + award-badge + ) : ( + + ) + } + +
+
+ {title} +
+ +
+ {description} +
+
+
+ ); +}; + +AwatarModal.defaultProps = { + modalData: {}, +}; + +AwatarModal.propTypes = { + modalData: PT.shape( + { + title: PT.string, + description: PT.string, + imageUrl: PT.string, + mimeType: PT.string, + }, + ), +}; + +export default AwatarModal; diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss new file mode 100644 index 0000000000..5df89b637b --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss @@ -0,0 +1,52 @@ +@import "~styles/mixins"; + +.awardModal { + display: flex; + margin-top: 48px; + + @include xs-to-md { + flex-direction: column; + margin-top: 24px; + } + + .image { + width: 100px; + height: 100px; + + @include xs-to-md { + width: 100%; + } + } + + .rightContent { + margin-left: 16px; + + .title { + @include roboto-bold; + + color: $tco-black; + font-size: 20px; + font-weight: 700; + line-height: 26px; + + @include xs-to-md { + text-align: center; + } + } + + .description { + @include roboto-regular; + + font-weight: 400; + color: $tco-black; + font-size: 16px; + line-height: 24px; + margin-top: 10px; + } + + @include xs-to-md { + margin-top: 24px; + text-align: center; + } + } +} diff --git a/src/shared/components/ProfilePage/Awards/index.jsx b/src/shared/components/ProfilePage/Awards/index.jsx new file mode 100644 index 0000000000..a3473c3ae2 --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/index.jsx @@ -0,0 +1,81 @@ +import React, { useState } from 'react'; +import PT from 'prop-types'; +import { Modal } from 'topcoder-react-ui-kit'; +import IconClose from 'assets/images/tc-edu/icon-close-big.svg'; +import _ from 'lodash'; + +import style from './styles.scss'; +import AwardBadge from './AwardBadge'; +import AwatarModal from './AwardModal'; + +const Awards = ({ rewards }) => { + const [showModal, setShowModal] = useState(false); + const [modalData, setModalData] = useState({}); + + return ( + +
+
+ Community Awards & Honors +
+ +
+ { + rewards.map((reward) => { + const title = _.get(reward, 'awarded.name'); + const description = _.get(reward, 'awarded.reward.message'); + const imageUrl = _.get(reward, 'awarded.reward.imageUrl'); + const mimeType = _.get(reward, 'awarded.reward.mimeType'); + + return ( + { + setShowModal(true); + setModalData({ + title, + description, + imageUrl, + mimeType, + }); + }} + /> + ); + }) + } +
+
+ { + showModal && ( + setShowModal(false)} theme={style}> +
+
+

Community Awards & Honors

+
setShowModal(false)}> + +
+
+
+ + +
+ + ) + } + + ); +}; + +Awards.defaultProps = { + rewards: [], +}; + +Awards.propTypes = { + rewards: PT.arrayOf(PT.shape()), +}; + +export default Awards; diff --git a/src/shared/components/ProfilePage/Awards/styles.scss b/src/shared/components/ProfilePage/Awards/styles.scss new file mode 100644 index 0000000000..d89a42a1e4 --- /dev/null +++ b/src/shared/components/ProfilePage/Awards/styles.scss @@ -0,0 +1,84 @@ +@import "~styles/mixins"; + +.header { + display: flex; + justify-content: space-between; + margin-bottom: 25px; + + .title { + @include barlow-medium; + + font-weight: 600; + color: #2a2a2a; + font-size: 22px; + line-height: 26px; + text-transform: uppercase; + } + + .icon { + cursor: pointer; + margin-top: 5px; + } +} + +.awards { + background-color: $listing-filter-bg; + border-radius: 8px; + margin: 68px 0 -36px 0; + padding-bottom: 32px; + + .header { + padding: 32px 0 20px 32px; + + @include xs-to-sm { + padding: 16px 0 16px 16px; + } + + span { + @include barlow-bold; + + font-weight: 600; + font-size: 20px; + line-height: 22px; + text-transform: uppercase; + color: $tco-black; + } + } +} + +.badgesContainer { + margin: 0 32px; + display: flex; + gap: 16px; + + @include xs-to-sm { + flex-direction: column; + margin: 0 16px; + } +} + +.award-modal { + padding-bottom: 10px; + border-radius: 8px; + margin: 25px 32px 32px; +} + +hr { + opacity: 0.5; +} + +.container { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); + border-radius: 8px; + min-width: 600px; + + @include xs-to-sm { + width: 90%; + min-width: unset; + } +} + +.overlay { + background-color: #0C0C0C; + opacity: 0.85; +} \ No newline at end of file diff --git a/src/shared/components/ProfilePage/BadgesModal/modal.scss b/src/shared/components/ProfilePage/BadgesModal/modal.scss index c0655a5605..e7ad2943fe 100644 --- a/src/shared/components/ProfilePage/BadgesModal/modal.scss +++ b/src/shared/components/ProfilePage/BadgesModal/modal.scss @@ -24,6 +24,6 @@ } @include xs-to-sm { - padding: 40px 10px; + padding: 0; } } diff --git a/src/shared/components/ProfilePage/Header/styles.scss b/src/shared/components/ProfilePage/Header/styles.scss index 7537655f7e..5b3b96de88 100644 --- a/src/shared/components/ProfilePage/Header/styles.scss +++ b/src/shared/components/ProfilePage/Header/styles.scss @@ -6,11 +6,11 @@ background-repeat: no-repeat; background-position: center center; width: 100%; - max-width: $screen-max; margin: 0 auto; height: 115px; position: absolute; top: 0; + left: 0; @include xs-to-sm { height: 173px; @@ -23,8 +23,9 @@ left: 0; width: 100%; height: 60px; - background: url(assets/images/profile/header-overlay.svg); + background: url(assets/images/profile/header-overlay.png); background-repeat: no-repeat; + background-size: 100% 100%; @include xs-to-sm { height: 36px; diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx index 6ec47bde38..23715e0343 100644 --- a/src/shared/components/ProfilePage/index.jsx +++ b/src/shared/components/ProfilePage/index.jsx @@ -16,6 +16,7 @@ import './styles.scss'; import Skills from './Skills'; import MemberInfo from './MemberInfo'; import Activity from './Activity'; +import Awards from './Awards'; /** * Inspects a subtrack and determines if the member is active @@ -126,6 +127,7 @@ class ProfilePage extends React.Component { skills: propSkills, stats, lookupData, + rewards, } = this.props; const { isMobile } = this.state; @@ -196,6 +198,11 @@ class ProfilePage extends React.Component { + { + (rewards || []).length ? ( + + ) : null + } ({ stats: state.profile.stats, memberGroups: state.groups.memberGroups, lookupData: state.lookup, + rewards: state.members[ownProps.match.params.handle] + ? state.members[ownProps.match.params.handle].rewards : [], auth: { ...state.auth, }, @@ -223,6 +225,7 @@ function mapDispatchToProps(dispatch) { dispatch(a.getSkillsInit()); dispatch(a.getStatsInit()); dispatch(lookupActions.getCountriesInit()); + dispatch(memberActions.getGamificationRewardsInit(handle)); dispatch(a.getAchievementsV3Done(handle)); dispatch(a.getExternalAccountsDone(handle)); dispatch(a.getExternalLinksDone(handle)); @@ -230,6 +233,7 @@ function mapDispatchToProps(dispatch) { dispatch(a.getSkillsDone(handle)); dispatch(a.getStatsDone(handle, showPublicStats ? undefined : groupIds, tokenV3)); dispatch(lookupActions.getCountriesDone()); + dispatch(memberActions.getGamificationRewardsDone(handle, tokenV3)); }, loadMarathon: (handle, tokenV3, memberId) => { const uuid = shortId(); From 49f0a6d37cc251a5669baf20f78cb249e26116f2 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 30 Jun 2022 15:31:58 +0700 Subject: [PATCH 02/16] fix lint error --- .circleci/config.yml | 4 ++-- src/shared/components/ProfilePage/Awards/styles.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 62b48152fc..a3ffe0eb00 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -363,7 +363,7 @@ workflows: filters: branches: only: - - free + - reskin-tco-badge # This is beta env for production soft releases - "build-prod-beta": context : org-global @@ -371,7 +371,7 @@ workflows: branches: only: - footer-update - - reskin-profile + - reskin-tco-badge # This is stage env for production QA releases - "build-prod-staging": context : org-global diff --git a/src/shared/components/ProfilePage/Awards/styles.scss b/src/shared/components/ProfilePage/Awards/styles.scss index d89a42a1e4..bd8aed2a04 100644 --- a/src/shared/components/ProfilePage/Awards/styles.scss +++ b/src/shared/components/ProfilePage/Awards/styles.scss @@ -79,6 +79,6 @@ hr { } .overlay { - background-color: #0C0C0C; + background-color: #0c0c0c; opacity: 0.85; -} \ No newline at end of file +} From 3f3fb31d01c1434009048d832a566c35831958ff Mon Sep 17 00:00:00 2001 From: Luiz Ricardo Rodrigues Date: Thu, 30 Jun 2022 07:20:02 -0300 Subject: [PATCH 03/16] fix: for issue PROD-2113 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c5cfd86bd9..361e8fd9c5 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1.2.6", + "topcoder-react-lib": "1000.29.2", "topcoder-react-ui-kit": "2.0.1", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", From 59d5ffe7a55b88a1ef72c542435533bf7250dae7 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 30 Jun 2022 22:25:44 +0700 Subject: [PATCH 04/16] fix(reskin-profile): verified badge tooltip --- src/shared/components/ProfilePage/Header/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/ProfilePage/Header/index.jsx b/src/shared/components/ProfilePage/Header/index.jsx index 5862718418..8a932cfd7e 100644 --- a/src/shared/components/ProfilePage/Header/index.jsx +++ b/src/shared/components/ProfilePage/Header/index.jsx @@ -51,7 +51,7 @@ const ProfileHeader = ({ getLookerDone, lookerInfo, info }) => { }; const tooltipContent = ( -
verified member
+
This member is compliant with Topcoder policies
and is a trusted member of the Topcoder community.
); From 42c909623a8fccd60e3060ff95e00a9f5191d4fa Mon Sep 17 00:00:00 2001 From: lunarkid Date: Mon, 4 Jul 2022 21:05:09 +0700 Subject: [PATCH 05/16] fix(reskin-tco-badge): minor fixes --- .../components/ProfilePage/Awards/AwardBadge/index.jsx | 4 +++- .../components/ProfilePage/Awards/AwardModal/index.jsx | 5 ++--- .../components/ProfilePage/Awards/AwardModal/styles.scss | 7 ++++++- src/shared/components/ProfilePage/Awards/index.jsx | 2 +- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx index 1f37fd8852..39a2a126eb 100644 --- a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx @@ -16,7 +16,9 @@ const AwardBadge = ({ ) }
- {title} + +
+
); diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx index bc383a9ffc..6918147870 100644 --- a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx @@ -26,9 +26,8 @@ const AwatarModal = ({ {title} -
- {description} -
+
+
); diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss index 5df89b637b..07228c80d0 100644 --- a/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss +++ b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss @@ -14,12 +14,17 @@ height: 100px; @include xs-to-md { - width: 100%; + display: block; + margin: 0 auto; } } .rightContent { margin-left: 16px; + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; .title { @include roboto-bold; diff --git a/src/shared/components/ProfilePage/Awards/index.jsx b/src/shared/components/ProfilePage/Awards/index.jsx index a3473c3ae2..f304b2eac5 100644 --- a/src/shared/components/ProfilePage/Awards/index.jsx +++ b/src/shared/components/ProfilePage/Awards/index.jsx @@ -22,7 +22,7 @@ const Awards = ({ rewards }) => {
{ rewards.map((reward) => { - const title = _.get(reward, 'awarded.name'); + const title = _.get(reward, 'awarded.reward.attrs.behaviours[0].behaviour.name'); const description = _.get(reward, 'awarded.reward.message'); const imageUrl = _.get(reward, 'awarded.reward.imageUrl'); const mimeType = _.get(reward, 'awarded.reward.mimeType'); From 83dd4c32e278f0fec5b2a80b850fe8854f48b583 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Fri, 22 Jul 2022 08:49:12 +0700 Subject: [PATCH 06/16] ci: set reskin-tco-badge to staging --- .circleci/config.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c4405ae031..14f12cc24e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -363,7 +363,7 @@ workflows: filters: branches: only: - - reskin-tco-badge + - reskin-profile # This is beta env for production soft releases - "build-prod-beta": context : org-global @@ -371,7 +371,7 @@ workflows: branches: only: - footer-update - - reskin-tco-badge + - reskin-profile # This is stage env for production QA releases - "build-prod-staging": context : org-global @@ -381,6 +381,7 @@ workflows: - develop - fix-security-headers - tco23-BS-comps + - reskin-tco-badge # Production builds are exectuted # when PR is merged to the master # Don't change anything in this configuration From 1c76288ac87ce20f46aa8999dbe8f440e99e3af2 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Fri, 22 Jul 2022 09:27:55 +0700 Subject: [PATCH 07/16] ci: set tco-reskin-badge to beta --- .circleci/config.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 14f12cc24e..bb327a5c59 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -371,7 +371,7 @@ workflows: branches: only: - footer-update - - reskin-profile + - reskin-tco-badge # This is stage env for production QA releases - "build-prod-staging": context : org-global @@ -381,7 +381,6 @@ workflows: - develop - fix-security-headers - tco23-BS-comps - - reskin-tco-badge # Production builds are exectuted # when PR is merged to the master # Don't change anything in this configuration From 8181ced0e9b7e506871893ea4f8f7e4978aa47b3 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 18 Aug 2022 16:57:17 +0300 Subject: [PATCH 08/16] re-structure for Gamification API --- Dockerfile | 2 + build.sh | 1 + config/custom-environment-variables.js | 3 + config/default.js | 3 + src/shared/actions/page/index.js | 3 +- src/shared/actions/page/profile.js | 50 ++++++++++++++++ .../ProfilePage/Awards/AwardModal/index.jsx | 5 +- .../components/ProfilePage/Awards/index.jsx | 17 +++--- src/shared/components/ProfilePage/index.jsx | 10 ++-- src/shared/containers/Profile.jsx | 9 +-- src/shared/reducers/page/profile.js | 60 +++++++++++++++++++ 11 files changed, 140 insertions(+), 23 deletions(-) create mode 100644 src/shared/actions/page/profile.js create mode 100644 src/shared/reducers/page/profile.js diff --git a/Dockerfile b/Dockerfile index f52ff2b984..c67c7f091a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -143,6 +143,8 @@ ENV GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=$GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY # Optimizely ENV OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY +ENV GAMIFICATION_ORG_ID=$GAMIFICATION_ORG_ID + ################################################################################ # Testing and build of the application inside the container. diff --git a/build.sh b/build.sh index 2440e90b4f..793ff38770 100755 --- a/build.sh +++ b/build.sh @@ -53,6 +53,7 @@ docker build -t $TAG \ --build-arg OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY \ --build-arg COMMUNITY_APP_URL=$COMMUNITY_APP_URL \ --build-arg GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=$GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY \ + --build-arg GAMIFICATION_ORG_ID=$GAMIFICATION_ORG_ID \ --build-arg VALID_ISSUERS=$VALID_ISSUERS . # Copies "node_modules" from the created image, if necessary for caching. diff --git a/config/custom-environment-variables.js b/config/custom-environment-variables.js index e82ca22da4..df8fe3394a 100644 --- a/config/custom-environment-variables.js +++ b/config/custom-environment-variables.js @@ -114,4 +114,7 @@ module.exports = { SDK_KEY: 'OPTIMIZELY_SDK_KEY', }, GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: 'GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY', + GAMIFICATION: { + ORG_ID: 'GAMIFICATION_ORG_ID' + } }; diff --git a/config/default.js b/config/default.js index 1e4f3b5492..0af5b4c68e 100644 --- a/config/default.js +++ b/config/default.js @@ -452,4 +452,7 @@ module.exports = { SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1', }, PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com', + GAMIFICATION: { + ORG_ID: '' + } }; diff --git a/src/shared/actions/page/index.js b/src/shared/actions/page/index.js index aaaf978697..fe59bdea94 100644 --- a/src/shared/actions/page/index.js +++ b/src/shared/actions/page/index.js @@ -1,4 +1,5 @@ import _ from 'lodash'; import challengeDetails from './challenge-details'; +import memberProfile from './profile'; -export default _.merge({}, challengeDetails); +export default _.merge({}, challengeDetails, memberProfile); diff --git a/src/shared/actions/page/profile.js b/src/shared/actions/page/profile.js new file mode 100644 index 0000000000..e46f128cf2 --- /dev/null +++ b/src/shared/actions/page/profile.js @@ -0,0 +1,50 @@ +/** + * Actions for member profile page. + */ +/* global fetch */ +import { redux, config } from 'topcoder-react-utils'; + +/** + * @static + * @desc Initiates an action that fetch member's badges + * @param {String} handle Member handle. + * @return {Action} + */ +async function getGamificationBadgesInit(handle) { + return { handle }; +} + +/** + * @static + * @desc Creates an action that gets member's badges + * + * @param {String} handle Topcoder member handle. + * @return {Action} + */ +async function getGamificationBadgesDone(handle) { + try { + const memberInfo = await fetch(`${config.API.V5}/members/${handle}`) + .then(response => response.json()); + const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}`) + .then(response => response.json()); + + return { + handle, + badges, + }; + } catch (error) { + return { + handle, + error, + } + } +} + +export default redux.createActions({ + PAGE: { + PROFILE: { + GET_GAMIFICATION_BADGES_INIT: getGamificationBadgesInit, + GET_GAMIFICATION_BADGES_DONE: getGamificationBadgesDone, + }, + }, +}); diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx index 6918147870..45feb6e9dc 100644 --- a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx @@ -8,14 +8,14 @@ const AwatarModal = ({ modalData, }) => { const { - title, description, imageUrl, mimeType, + title, description, imageUrl, } = modalData; return (
{ imageUrl ? ( - award-badge + award-badge ) : ( ) @@ -43,7 +43,6 @@ AwatarModal.propTypes = { title: PT.string, description: PT.string, imageUrl: PT.string, - mimeType: PT.string, }, ), }; diff --git a/src/shared/components/ProfilePage/Awards/index.jsx b/src/shared/components/ProfilePage/Awards/index.jsx index f304b2eac5..16a0db5fd4 100644 --- a/src/shared/components/ProfilePage/Awards/index.jsx +++ b/src/shared/components/ProfilePage/Awards/index.jsx @@ -8,7 +8,7 @@ import style from './styles.scss'; import AwardBadge from './AwardBadge'; import AwatarModal from './AwardModal'; -const Awards = ({ rewards }) => { +const Awards = ({ badges }) => { const [showModal, setShowModal] = useState(false); const [modalData, setModalData] = useState({}); @@ -21,24 +21,21 @@ const Awards = ({ rewards }) => {
{ - rewards.map((reward) => { - const title = _.get(reward, 'awarded.reward.attrs.behaviours[0].behaviour.name'); - const description = _.get(reward, 'awarded.reward.message'); - const imageUrl = _.get(reward, 'awarded.reward.imageUrl'); - const mimeType = _.get(reward, 'awarded.reward.mimeType'); + badges.map((reward) => { + const title = _.get(reward, 'org_badge.badge_name'); + const description = _.get(reward, 'org_badge.badge_description'); + const imageUrl = _.get(reward, 'org_badge.badge_image_url'); return ( { setShowModal(true); setModalData({ title, description, imageUrl, - mimeType, }); }} /> @@ -71,11 +68,11 @@ const Awards = ({ rewards }) => { }; Awards.defaultProps = { - rewards: [], + badges: [], }; Awards.propTypes = { - rewards: PT.arrayOf(PT.shape()), + badges: PT.arrayOf(PT.shape()), }; export default Awards; diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx index 23715e0343..877033bc3b 100644 --- a/src/shared/components/ProfilePage/index.jsx +++ b/src/shared/components/ProfilePage/index.jsx @@ -127,7 +127,7 @@ class ProfilePage extends React.Component { skills: propSkills, stats, lookupData, - rewards, + badges, } = this.props; const { isMobile } = this.state; @@ -199,8 +199,8 @@ class ProfilePage extends React.Component {
{ - (rewards || []).length ? ( - + (badges && (badges.rows || [])).length ? ( + ) : null } ({ stats: state.profile.stats, memberGroups: state.groups.memberGroups, lookupData: state.lookup, - rewards: state.members[ownProps.match.params.handle] - ? state.members[ownProps.match.params.handle].rewards : [], + badges: state.page.profile[ownProps.match.params.handle] + ? state.page.profile[ownProps.match.params.handle].badges : {}, auth: { ...state.auth, }, @@ -225,7 +226,7 @@ function mapDispatchToProps(dispatch) { dispatch(a.getSkillsInit()); dispatch(a.getStatsInit()); dispatch(lookupActions.getCountriesInit()); - dispatch(memberActions.getGamificationRewardsInit(handle)); + dispatch(profileActions.page.profile.getGamificationBadgesInit(handle)); dispatch(a.getAchievementsV3Done(handle)); dispatch(a.getExternalAccountsDone(handle)); dispatch(a.getExternalLinksDone(handle)); @@ -233,7 +234,7 @@ function mapDispatchToProps(dispatch) { dispatch(a.getSkillsDone(handle)); dispatch(a.getStatsDone(handle, showPublicStats ? undefined : groupIds, tokenV3)); dispatch(lookupActions.getCountriesDone()); - dispatch(memberActions.getGamificationRewardsDone(handle, tokenV3)); + dispatch(profileActions.page.profile.getGamificationBadgesDone(handle)); }, loadMarathon: (handle, tokenV3, memberId) => { const uuid = shortId(); diff --git a/src/shared/reducers/page/profile.js b/src/shared/reducers/page/profile.js new file mode 100644 index 0000000000..e0dc467391 --- /dev/null +++ b/src/shared/reducers/page/profile.js @@ -0,0 +1,60 @@ +import _ from 'lodash'; +import { handleActions } from 'redux-actions'; +import { logger } from 'topcoder-react-lib'; + +import actions from 'actions/page/profile'; + +/** + * Inits the loading of user's badges. + * @param {Object} state + * @param {Object} action + * @return {Object} New state. + */ +function getGamificationBadgesInit(state, { payload }) { + const { handle } = payload; + return { + ...state, + [handle]: { + ...state[handle], + badges: {}, + }, + }; +} + +/** + * Finalizes the loading of user's badges. + * @param {Object} state + * @param {Object} action + * @return {Object} New state. + */ +function getGamificationBadgesDone(state, { error, payload }) { + if (error) { + logger.error('Failed to get user badges', payload); + return state; + } + + const { badges, handle } = payload; + + return { + ...state, + [handle]: { + ...state[handle], + badges, + }, + }; +} + +/** + * Creates a new reducer. + * @param {Object} state Optional. Initial state. + * @return {Function} Reducer. + */ +function create(defaultState = {}) { + const a = actions.page.profile; + return handleActions({ + [a.getGamificationBadgesInit]: getGamificationBadgesInit, + [a.getGamificationBadgesDone]: getGamificationBadgesDone, + }, _.defaults(defaultState, {})); +} + +export default create(); From b09caf5b5f9d7a51a3c6e8e4c9fc8784631c2938 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 18 Aug 2022 16:58:19 +0300 Subject: [PATCH 09/16] ci: on test --- .circleci/config.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index bb327a5c59..4f43147c43 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -356,7 +356,7 @@ workflows: filters: branches: only: - - free + - reskin-tco-badge # This is alternate dev env for parallel testing - "build-qa": context : org-global @@ -370,8 +370,7 @@ workflows: filters: branches: only: - - footer-update - - reskin-tco-badge + - free # This is stage env for production QA releases - "build-prod-staging": context : org-global From 10f66b52ff49c1cbf5c8e080a255d260dc8b0709 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 18 Aug 2022 17:05:56 +0300 Subject: [PATCH 10/16] fix lint erros --- config/custom-environment-variables.js | 4 ++-- config/default.js | 4 ++-- src/shared/actions/page/profile.js | 18 +++++++++--------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/config/custom-environment-variables.js b/config/custom-environment-variables.js index df8fe3394a..91fac6fbd5 100644 --- a/config/custom-environment-variables.js +++ b/config/custom-environment-variables.js @@ -115,6 +115,6 @@ module.exports = { }, GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: 'GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY', GAMIFICATION: { - ORG_ID: 'GAMIFICATION_ORG_ID' - } + ORG_ID: 'GAMIFICATION_ORG_ID', + }, }; diff --git a/config/default.js b/config/default.js index 0af5b4c68e..ad8a6a0768 100644 --- a/config/default.js +++ b/config/default.js @@ -453,6 +453,6 @@ module.exports = { }, PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com', GAMIFICATION: { - ORG_ID: '' - } + ORG_ID: '', + }, }; diff --git a/src/shared/actions/page/profile.js b/src/shared/actions/page/profile.js index e46f128cf2..cd8d10f6fe 100644 --- a/src/shared/actions/page/profile.js +++ b/src/shared/actions/page/profile.js @@ -23,20 +23,20 @@ async function getGamificationBadgesInit(handle) { */ async function getGamificationBadgesDone(handle) { try { - const memberInfo = await fetch(`${config.API.V5}/members/${handle}`) - .then(response => response.json()); - const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}`) - .then(response => response.json()); + const memberInfo = await fetch(`${config.API.V5}/members/${handle}`) + .then(response => response.json()); + const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}`) + .then(response => response.json()); - return { - handle, - badges, - }; + return { + handle, + badges, + }; } catch (error) { return { handle, error, - } + }; } } From 35e4af36a37c393d41629f9c6ea098cbbe178048 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 18 Aug 2022 18:17:02 +0300 Subject: [PATCH 11/16] register profile reducer --- src/shared/reducers/page/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shared/reducers/page/index.js b/src/shared/reducers/page/index.js index 5bd6895078..bf9a7671e7 100644 --- a/src/shared/reducers/page/index.js +++ b/src/shared/reducers/page/index.js @@ -22,6 +22,7 @@ import ui, { factory as uiFactory } from './ui'; import settings, { factory as settingsFactory } from './settings'; import reviewOpportunityDetails from './review-opportunity-details'; +import profile from './profile'; /** * Reducer factory. @@ -40,6 +41,7 @@ export function factory(req) { dashboard, reviewOpportunityDetails, submissionManagement, + profile, })); } @@ -52,4 +54,5 @@ export default combineReducers({ submission, ui, submissionManagement, + profile, }); From 1b2ab8ac9c9fb992e3882b5ad6a032eb807b0460 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 18 Aug 2022 18:46:19 +0300 Subject: [PATCH 12/16] def org_id if no env set --- config/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/default.js b/config/default.js index ad8a6a0768..cc60b3f317 100644 --- a/config/default.js +++ b/config/default.js @@ -453,6 +453,6 @@ module.exports = { }, PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com', GAMIFICATION: { - ORG_ID: '', + ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3', }, }; From 6e27b379dd07ef66fb820ce04e582bcd0d0534ec Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 19 Aug 2022 10:31:11 +0300 Subject: [PATCH 13/16] ui tweaks --- package.json | 2 +- .../components/ProfilePage/Awards/AwardModal/index.jsx | 2 +- .../components/ProfilePage/Awards/AwardModal/styles.scss | 3 ++- src/shared/components/ProfilePage/Awards/index.jsx | 6 +++++- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 361e8fd9c5..348f5064de 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1000.29.2", + "topcoder-react-lib": "1.2.9", "topcoder-react-ui-kit": "2.0.1", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx index 45feb6e9dc..4eb1257d25 100644 --- a/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardModal/index.jsx @@ -26,7 +26,7 @@ const AwatarModal = ({ {title}
-
+
{description}
diff --git a/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss index 07228c80d0..0a230c30e9 100644 --- a/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss +++ b/src/shared/components/ProfilePage/Awards/AwardModal/styles.scss @@ -1,4 +1,5 @@ @import "~styles/mixins"; +@import "~components/Contentful/brackets"; .awardModal { display: flex; @@ -40,7 +41,7 @@ } .description { - @include roboto-regular; + @include brackets-content; font-weight: 400; color: $tco-black; diff --git a/src/shared/components/ProfilePage/Awards/index.jsx b/src/shared/components/ProfilePage/Awards/index.jsx index 16a0db5fd4..7551d74071 100644 --- a/src/shared/components/ProfilePage/Awards/index.jsx +++ b/src/shared/components/ProfilePage/Awards/index.jsx @@ -3,6 +3,7 @@ import PT from 'prop-types'; import { Modal } from 'topcoder-react-ui-kit'; import IconClose from 'assets/images/tc-edu/icon-close-big.svg'; import _ from 'lodash'; +import md from 'utils/markdown'; import style from './styles.scss'; import AwardBadge from './AwardBadge'; @@ -23,8 +24,11 @@ const Awards = ({ badges }) => { { badges.map((reward) => { const title = _.get(reward, 'org_badge.badge_name'); - const description = _.get(reward, 'org_badge.badge_description'); const imageUrl = _.get(reward, 'org_badge.badge_image_url'); + let description = _.get(reward, 'org_badge.badge_description'); + if (description) { + description = md(description); + } return ( Date: Fri, 19 Aug 2022 10:40:52 +0300 Subject: [PATCH 14/16] wrap badges when many --- src/shared/components/ProfilePage/Awards/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/components/ProfilePage/Awards/styles.scss b/src/shared/components/ProfilePage/Awards/styles.scss index bd8aed2a04..2fc895902b 100644 --- a/src/shared/components/ProfilePage/Awards/styles.scss +++ b/src/shared/components/ProfilePage/Awards/styles.scss @@ -50,6 +50,7 @@ margin: 0 32px; display: flex; gap: 16px; + flex-wrap: wrap; @include xs-to-sm { flex-direction: column; From 41e96ddc96ec676b6ba1d39accb011a2b5c660f6 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 22 Aug 2022 08:42:47 +0300 Subject: [PATCH 15/16] GAME-63 --- config/custom-environment-variables.js | 1 + config/default.js | 1 + src/shared/components/ProfilePage/index.jsx | 4 ++-- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/config/custom-environment-variables.js b/config/custom-environment-variables.js index 91fac6fbd5..d161d20dee 100644 --- a/config/custom-environment-variables.js +++ b/config/custom-environment-variables.js @@ -116,5 +116,6 @@ module.exports = { GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: 'GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY', GAMIFICATION: { ORG_ID: 'GAMIFICATION_ORG_ID', + ENABLE_BADGE_UI: 'GAMIFICATION_ENABLE_BADGE_UI', }, }; diff --git a/config/default.js b/config/default.js index cc60b3f317..e2da5699e3 100644 --- a/config/default.js +++ b/config/default.js @@ -454,5 +454,6 @@ module.exports = { PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com', GAMIFICATION: { ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3', + ENABLE_BADGE_UI: true, }, }; diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx index 877033bc3b..ad80713c62 100644 --- a/src/shared/components/ProfilePage/index.jsx +++ b/src/shared/components/ProfilePage/index.jsx @@ -6,7 +6,7 @@ import _ from 'lodash'; import React from 'react'; import PT from 'prop-types'; -import { isomorphy } from 'topcoder-react-utils'; +import { isomorphy, config } from 'topcoder-react-utils'; import { dataMap } from './ExternalLink'; import Header from './Header'; @@ -199,7 +199,7 @@ class ProfilePage extends React.Component { { - (badges && (badges.rows || [])).length ? ( + (config.GAMIFICATION.ENABLE_BADGE_UI && badges && (badges.rows || [])).length ? ( ) : null } From 8accbe921a18efd88d064c677ea445c3544ff5f1 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 12:17:37 +0300 Subject: [PATCH 16/16] fixes snapshot failed tests --- .../shared/components/ProfilePage/__snapshots__/index.jsx.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap index a0cd40abdc..b9e6eccc2c 100644 --- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap @@ -58,6 +58,7 @@ exports[`renders a full Profile correctly 1`] = ` }, ] } + badges={Object {}} challenges={null} clearSubtrackChallenges={[Function]} copilot={true} @@ -720,6 +721,7 @@ exports[`renders a full Profile correctly 1`] = ` exports[`renders an empty Profile correctly 1`] = `