From 2148005a3e8149d0de8c78d2600792d9a7bb4e65 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 30 Jun 2022 15:25:44 +0700 Subject: [PATCH 01/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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 99d50d3239d17fb6d8766ac348eb96a297763ded Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 26 Aug 2022 12:50:15 +0300 Subject: [PATCH 16/24] map fields to tco23 --- .../ChallengeHistoryModal/index.jsx | 23 ++++++++++--------- .../Leaderboard/LeaderboardTable/index.jsx | 23 ++++++++++++------- .../Leaderboard/PodiumSpot/index.jsx | 19 ++++++++++----- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx index bd4023d261..1d54dda5af 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx @@ -39,8 +39,8 @@ class ChallengeHistoryModal extends Component { } = this.props; const { sortParam } = this.state; const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]); - const placeLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.placement' : 'place'; - const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points'; + const placeLabel = competitor['member_profile_basic.handle'] ? (competitor['tco23_leaderboard.placement'] ? 'tco23_leaderboard.placement' : 'tco_leaderboard.placement') : 'place'; + const pointsLabel = competitor['member_profile_basic.handle'] ? (competitor['tco23_leaderboard.tco_points'] ? 'tco23_leaderboard.tco_points' : 'tco_leaderboard.tco_points') : 'points'; const styles = THEMES[themeName] || THEMES.Default; /* eslint-disable no-confusing-arrow */ const sortInner = () => themeName === 'TCO23' ? ( @@ -95,7 +95,7 @@ class ChallengeHistoryModal extends Component { }} type="button" > - { sortInner() } + {sortInner()} @@ -117,7 +117,7 @@ class ChallengeHistoryModal extends Component { }} type="button" > - { sortInner() } + {sortInner()} @@ -125,23 +125,24 @@ class ChallengeHistoryModal extends Component { { - challengesOrdered.map(challenge => ( - + challengesOrdered.map(challenge => { + const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id; + return - - {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id} + + {challenge.challenge_name || challenge['challenge.challenge_name'] || challengeId} { !isCopilot ? ( - {challenge['tco_leaderboard.placement'] || challenge.place}placement + {challenge[placeLabel] || challenge.place}placement ) : null } - {challenge['tco_leaderboard.tco_points'] || challenge.points}points + {challenge[pointsLabel] || challenge.points}points - )) + }) } diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 1f7eb08bc5..42c6afab04 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -67,6 +67,13 @@ export default function LeaderboardTable(props) { const addSufix = val => isAlgo ? (val !== 1 ? `${val} matches` : `${val} match`) : (val !== 1 ? `${val} challenges` : `${val} challenge`); const renderTableRows = comps => ( comps.map((competitor) => { + const tcoPoints = + competitor['tco23_leaderboard.tco_points'] || + competitor['tco_leaderboard.tco_points'] || + competitor.points || + competitor['tco_leaderboard.total_score'] || + competitor['srm_tco19.score']; + const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=40`; @@ -147,13 +154,13 @@ export default function LeaderboardTable(props) { }
{fulfillment && ({fulfillment} fulfillment)} - {competitor['tco_leaderboard.tco_points'] || competitor.points} points + {tcoPoints} points { themeName === 'TCO23' ? (
onUsernameClick(competitor)} styleName={`${stylesName}.mobile-link`}> - {addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)} + {addSufix(tcoChallengeCnt)}
- ) : {addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)} + ) : {addSufix(tcoChallengeCnt)} }
@@ -172,15 +179,15 @@ export default function LeaderboardTable(props) { style={{ cursor: 'pointer', display: 'inline-block', color: '#0d61bf' }} onClick={() => onUsernameClick(competitor)} > - { `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` } + {`${addSufix(tcoChallengeCnt)}`} - ) : `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` + ) : `${addSufix(tcoChallengeCnt)}` ) : ( - competitor['tco_leaderboard.challenge_count'] || competitor.challengecount + tcoChallengeCnt ) } - {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} + {formatPoints(tcoPoints)} { isTopGear ? ( {competitor.wins} @@ -193,7 +200,7 @@ export default function LeaderboardTable(props) { } { isAlgo ? ( - {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} + {tcoPoints} ) : null } diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index ad49696a8a..83b6077408 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -124,6 +124,13 @@ export default function PodiumSpot(props) { } = props; const stylesName = THEME[themeName]; + const tcoPoints = + competitor['tco23_leaderboard.tco_points'] || + competitor['tco_leaderboard.tco_points'] || + competitor.points || + competitor['tco_leaderboard.total_score'] || + competitor['srm_tco19.score']; + const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`; @@ -195,7 +202,7 @@ export default function PodiumSpot(props) { ) : null }
- {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} + {tcoChallengeCnt} { isAlgo ? ( # of matches @@ -205,13 +212,13 @@ export default function PodiumSpot(props) { }
- {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} + {formatPoints(tcoPoints)} points
{ isAlgo ? (
- {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} + {tcoPoints} total score
) : null @@ -294,7 +301,7 @@ export default function PodiumSpot(props) { ) : null }
- {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} + {tcoChallengeCnt} { isAlgo ? ( # of matches @@ -304,7 +311,7 @@ export default function PodiumSpot(props) { }
- {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} + {formatPoints(tcoPoints)} points
{ @@ -326,7 +333,7 @@ export default function PodiumSpot(props) { { isAlgo ? (
- {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} + {tcoPoints} total score
) : null From 3a0074c35b0518d97fed7283c32206dcacfe210c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 10:59:00 +0300 Subject: [PATCH 17/24] tco23 leaderboards --- .../__snapshots__/LeaderboardTable.jsx.snap | 12 +- .../Leaderboard/__snapshots__/Podium.jsx.snap | 6 +- .../__snapshots__/PodiumSpot.jsx.snap | 4 +- .../ChallengeHistoryModal/index.jsx | 32 +++-- .../Leaderboard/LeaderboardTable/index.jsx | 11 +- .../components/Leaderboard/Podium/index.jsx | 3 +- .../Leaderboard/Podium/themes/default.scss | 3 +- .../Leaderboard/Podium/themes/tco23.scss | 21 ++- .../Leaderboard/PodiumSpot/index.jsx | 75 ++++++----- .../Leaderboard/PodiumSpot/themes/styles.scss | 3 +- .../Leaderboard/PodiumSpot/themes/tco20.scss | 3 +- .../Leaderboard/PodiumSpot/themes/tco22.scss | 3 +- .../Leaderboard/PodiumSpot/themes/tco23.scss | 122 ++++++++++++++++-- .../components/Leaderboard/avatarStyles.scss | 4 +- 14 files changed, 227 insertions(+), 75 deletions(-) diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap index be1a732415..9f2998a102 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap @@ -70,7 +70,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -84,7 +83,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -125,7 +124,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -139,7 +137,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -180,7 +178,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -194,7 +191,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -235,7 +232,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -249,7 +245,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap index c5a8a3f5e5..30cbf6a86e 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap @@ -5,7 +5,7 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-Podium-themes-___default__Podium___1qIZm" >
@@ -49,6 +50,7 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} + podiumPlaces={4} themeName="Default" /> @@ -69,6 +71,7 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} + podiumPlaces={4} themeName="Default" /> @@ -89,6 +92,7 @@ exports[`Matches shallow shapshot 1`] = ` isCopilot={false} isTopGear={false} onUsernameClick={null} + podiumPlaces={4} themeName="Default" /> diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap index 99ce90f051..38d804a762 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap @@ -47,7 +47,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN - 0.00 + NaN { - challengesOrdered.map(challenge => { + challengesOrdered.map((challenge) => { const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id; - return - - - {challenge.challenge_name || challenge['challenge.challenge_name'] || challengeId} - - - { + return ( + + + + {challenge.challenge_name || challenge['challenge.challenge_name'] || challengeId} + + + { !isCopilot ? ( - {challenge[placeLabel] || challenge.place}placement + + {challenge[placeLabel]}placement + ) : null } - - {challenge[pointsLabel] || challenge.points}points - - + + {challenge[pointsLabel] || challenge.points}points + + + ); }) } diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 42c6afab04..89476a8dee 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -67,12 +67,11 @@ export default function LeaderboardTable(props) { const addSufix = val => isAlgo ? (val !== 1 ? `${val} matches` : `${val} match`) : (val !== 1 ? `${val} challenges` : `${val} challenge`); const renderTableRows = comps => ( comps.map((competitor) => { - const tcoPoints = - competitor['tco23_leaderboard.tco_points'] || - competitor['tco_leaderboard.tco_points'] || - competitor.points || - competitor['tco_leaderboard.total_score'] || - competitor['srm_tco19.score']; + const tcoPoints = competitor['tco23_leaderboard.tco_points'] + || competitor['tco_leaderboard.tco_points'] + || competitor.points + || competitor['tco_leaderboard.total_score'] + || competitor['srm_tco19.score']; const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { diff --git a/src/shared/components/Leaderboard/Podium/index.jsx b/src/shared/components/Leaderboard/Podium/index.jsx index c3d176c973..5a6cf54310 100644 --- a/src/shared/components/Leaderboard/Podium/index.jsx +++ b/src/shared/components/Leaderboard/Podium/index.jsx @@ -64,12 +64,13 @@ export default function Podium(props) { isTopGear={isTopGear} isAlgo={isAlgo} themeName={themeName} + podiumPlaces={comps.length} /> )); return ( -
+
3 ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}> {podiumSpots}
); diff --git a/src/shared/components/Leaderboard/Podium/themes/default.scss b/src/shared/components/Leaderboard/Podium/themes/default.scss index d41f31f5e6..e912007c97 100644 --- a/src/shared/components/Leaderboard/Podium/themes/default.scss +++ b/src/shared/components/Leaderboard/Podium/themes/default.scss @@ -18,7 +18,8 @@ } } -.PodiumWrap { +.PodiumWrap, +.PodiumWrapCondense { display: flex; justify-content: center !important; diff --git a/src/shared/components/Leaderboard/Podium/themes/tco23.scss b/src/shared/components/Leaderboard/Podium/themes/tco23.scss index cbde4c5ef1..d76552b6ff 100644 --- a/src/shared/components/Leaderboard/Podium/themes/tco23.scss +++ b/src/shared/components/Leaderboard/Podium/themes/tco23.scss @@ -23,7 +23,8 @@ } } -.PodiumWrap { +.PodiumWrap, +.PodiumWrapCondense { display: flex; justify-content: center !important; @@ -31,7 +32,9 @@ flex-direction: column; align-items: center; } +} +.PodiumWrap { .podium-column:nth-child(2) { @include md-to-xl { margin-top: -16px; @@ -58,3 +61,19 @@ margin-right: 0; } } + +.PodiumWrapCondense { + @media screen and (min-width: 375px) and (max-width: 768px) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 17px; + } + + .podium-column { + margin-right: 16px; + + @include xs-to-sm { + margin: 0; + } + } +} diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 83b6077408..0d50bccb69 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -25,7 +25,7 @@ */ import React from 'react'; -import PT from 'prop-types'; +import PT, { number } from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; import _ from 'lodash'; @@ -48,6 +48,8 @@ const PODIUM_ITEM_MODIFIER = { 2: 'second', 3: 'third', 4: 'fourth', + 5: 'fifth', + 6: 'sixt', }; /** @@ -78,6 +80,8 @@ const CUSTOM_STYLES = { 2: avatarStyles['tco23-2'], 3: avatarStyles['tco23-3'], 4: avatarStyles['tco23-4'], + 5: avatarStyles['tco23-5'], + 6: avatarStyles['tco23-6'], }, }; @@ -103,6 +107,8 @@ const DISPLAY_RANKING_NUM = { 2: '2ND', 3: '3RD', 4: '4TH', + 5: '5TH', + 6: '6TH', }; /** @@ -121,21 +127,21 @@ export default function PodiumSpot(props) { isTopGear, isAlgo, themeName, + podiumPlaces, } = props; const stylesName = THEME[themeName]; - const tcoPoints = - competitor['tco23_leaderboard.tco_points'] || - competitor['tco_leaderboard.tco_points'] || - competitor.points || - competitor['tco_leaderboard.total_score'] || - competitor['srm_tco19.score']; + const tcoPoints = competitor['tco23_leaderboard.tco_points'] + || competitor['tco_leaderboard.tco_points'] + || competitor.points + || competitor['tco_leaderboard.total_score'] + || competitor['srm_tco19.score']; const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`; } - let rootStyle = `${stylesName}.PodiumSpot`; + let rootStyle = `${stylesName}.${podiumPlaces > 3 ? 'PodiumSpotCondense' : 'PodiumSpot'}`; if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`; const fulfillment = competitor['tco_leaderboard.fulfillment'] ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '') @@ -144,7 +150,7 @@ export default function PodiumSpot(props) { return themeName === 'TCO23' ? (
{ - competitor.rank <= 4 &&

{`${DISPLAY_RANKING_NUM[competitor.rank]} PLACE`}

+ competitor.rank <= 6 &&

{`${DISPLAY_RANKING_NUM[competitor.rank]} PLACE`}

} { onUsernameClick ? ( @@ -169,15 +175,24 @@ export default function PodiumSpot(props) {
4 ? 4 : competitor.rank]}`}> 3 ? 200 : 392} + height={podiumPlaces > 3 ? 16 : 25} fill="none" - viewBox="0 0 392 25" + viewBox={`0 0 ${podiumPlaces > 3 ? 200 : 392} ${podiumPlaces > 3 ? 16 : 25}`} > - + { + podiumPlaces > 3 ? ( + + ) : ( + + ) + } { @@ -201,28 +216,28 @@ export default function PodiumSpot(props) {
) : null } + { + isAlgo ? ( +
+ {tcoPoints} + total score +
+ ) : null + } +
+ {formatPoints(tcoPoints)} + points +
{tcoChallengeCnt} { isAlgo ? ( - # of matches + matches ) : ( challenges ) }
-
- {formatPoints(tcoPoints)} - points -
- { - isAlgo ? ( -
- {tcoPoints} - total score -
- ) : null - }
@@ -361,6 +376,7 @@ PodiumSpot.propTypes = { isTopGear: PT.bool, isAlgo: PT.bool, themeName: PT.string, + podiumPlaces: number, }; PodiumSpot.defaultProps = { @@ -369,4 +385,5 @@ PodiumSpot.defaultProps = { isTopGear: false, isAlgo: false, themeName: 'Default', + podiumPlaces: 1, }; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss index 9f45f5f9be..cceab354ad 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border: 1px solid $podium-border-color; border-radius: 6px; padding: 20px 0; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index fffcb4919b..a09b62ca94 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 6px; padding: 23px 15px; display: flex; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss index 319e1bd11e..8f03f24033 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 12px; padding: 22px 17px 12px; display: flex; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss index 663879a3f2..facff2d8c8 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss @@ -2,7 +2,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 8px; display: flex; flex-direction: column; @@ -120,7 +121,7 @@ $podium-border-color: #ededf2; line-height: 44px; text-transform: uppercase; margin-bottom: 8px; - color: #2a2a2a; + color: #000; } .wave-wrap--first, @@ -133,11 +134,11 @@ $podium-border-color: #ededf2; flex-direction: column; align-items: center; justify-content: center; - margin-top: 120px; - padding-bottom: 36px; + margin-top: 45px; + padding-bottom: 24px; .leaderboard-avatar { - margin-top: -120px; + margin-top: -70px; border: 3px solid white; border-radius: 50%; height: 152px; @@ -160,6 +161,7 @@ $podium-border-color: #ededf2; svg { margin-top: -1px; + transform: scaleX(1.03); } } @@ -168,16 +170,102 @@ $podium-border-color: #ededf2; } .wave-wrap--second { - background-color: #219174; + background-color: #16679a; } .wave-wrap--third { - background-color: #16679a; + background-color: #227681; } .wave-wrap--fourth { + background-color: #219174; + + .stats { + color: #fff; + } + } + + .wave-wrap--fifth { + background-color: #219174; + } + + .wave-wrap--sixt { + background-color: #219174; + } +} + +.PodiumSpotCondense { + min-width: auto; + max-width: 200px; + padding-top: 24px; + + @media screen and (min-width: 375px) and (max-width: 768px) { + max-width: 162px; + margin: auto; + } + + @media screen and (max-width: 3320px) { + margin-bottom: 15px; + } + + .place { + @include barlow-condensed-semi-bold; + + font-size: 26px; + font-weight: 500; + line-height: 28px; + text-transform: uppercase; + margin-bottom: 8px; + color: #000; + } + + .handle-link { + font-size: 16px; + line-height: 24px; + } + + .leaderboard-avatar { + height: 88px !important; + width: 88px !important; + } + + .winnings-info { + margin-top: 16px; + + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + padding: 0 13px; + } + .stats { - color: #2a2a2a; + margin-right: 16px !important; + + @include xs-to-sm { + flex-direction: row; + margin-bottom: 4px; + } + + &:last-child { + margin-right: 0 !important; + } + + .value { + font-size: 14px !important; + font-weight: 700; + line-height: 16px !important; + text-align: left; + + @include xs-to-sm { + margin-right: 4px !important; + } + } + + .value-title { + font-size: 12px !important; + font-weight: 400; + line-height: 18px !important; + } } } } @@ -210,10 +298,26 @@ $podium-border-color: #ededf2; } } +.PodiumSpot--fifth { + .ranking { + background-color: #1e94a3; + color: #fff; + } +} + +.PodiumSpot--sixt { + .ranking { + background-color: #1e94a3; + color: #fff; + } +} + .PodiumSpot--first, .PodiumSpot--second, .PodiumSpot--third, -.PodiumSpot--fourth { +.PodiumSpot--fourth, +.PodiumSpot--fifth, +.PodiumSpot--sixt { margin-top: 0; .leaderboard-avatar { diff --git a/src/shared/components/Leaderboard/avatarStyles.scss b/src/shared/components/Leaderboard/avatarStyles.scss index c84446b00d..413dc5e999 100644 --- a/src/shared/components/Leaderboard/avatarStyles.scss +++ b/src/shared/components/Leaderboard/avatarStyles.scss @@ -63,7 +63,9 @@ .tco23-1, .tco23-2, .tco23-3, -.tco23-4 { +.tco23-4, +.tco23-5, +.tco23-6 { border-radius: 50%; height: 100%; width: 100%; From a53a20a4207c9b491d000d67ffc434d1a17b4cc0 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 11:01:48 +0300 Subject: [PATCH 18/24] ci: on beta --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 7eb96a463b..1df6c44e6b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -370,7 +370,7 @@ workflows: filters: branches: only: - - social-share-updates + - tco23-leaderboards # This is stage env for production QA releases - "build-prod-staging": context : org-global From a5f6f4378d1e1835602a09e2181029caa1b048a0 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 11:40:05 +0300 Subject: [PATCH 19/24] pref guid over id --- .../components/Leaderboard/ChallengeHistoryModal/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx index 51fb5c0164..767d87f6a0 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx @@ -128,7 +128,7 @@ class ChallengeHistoryModal extends Component { { challengesOrdered.map((challenge) => { - const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id; + const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_GUID'] || challenge['challenge.challenge_id'] || challenge.challenge_id; return ( From 8accbe921a18efd88d064c677ea445c3544ff5f1 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 12:17:37 +0300 Subject: [PATCH 20/24] 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`] = ` Date: Mon, 29 Aug 2022 15:58:30 +0300 Subject: [PATCH 21/24] fix placement label/value --- .../components/Leaderboard/ChallengeHistoryModal/index.jsx | 4 ++-- src/shared/components/Leaderboard/PodiumSpot/index.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx index 767d87f6a0..a1ad152b8c 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx @@ -40,9 +40,9 @@ class ChallengeHistoryModal extends Component { const { sortParam } = this.state; const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]); // eslint-disable-next-line - const placeLabel = competitor['member_profile_basic.handle'] ? (competitor['tco23_leaderboard.placement'] ? 'tco23_leaderboard.placement' : 'tco_leaderboard.placement') : 'place'; + const placeLabel = competitor['tco23_leaderboard.challenge_count'] ? 'tco23_leaderboard.placement' : 'tco_leaderboard.placement'; // eslint-disable-next-line - const pointsLabel = competitor['member_profile_basic.handle'] ? (competitor['tco23_leaderboard.tco_points'] ? 'tco23_leaderboard.tco_points' : 'tco_leaderboard.tco_points') : 'points'; + const pointsLabel = competitor['tco23_leaderboard.tco_points'] ? 'tco23_leaderboard.tco_points' : 'tco_leaderboard.tco_points'; const styles = THEMES[themeName] || THEMES.Default; /* eslint-disable no-confusing-arrow */ const sortInner = () => themeName === 'TCO23' ? ( diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 0d50bccb69..99d73216ab 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -224,7 +224,7 @@ export default function PodiumSpot(props) { ) : null } -
+
{formatPoints(tcoPoints)} points
From 39bbb50df3af2b291087938e2d21cbc339bd3aa7 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 16:15:21 +0300 Subject: [PATCH 22/24] custom social for gigs --- src/shared/containers/GigsPages.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shared/containers/GigsPages.jsx b/src/shared/containers/GigsPages.jsx index 3418d7ed7a..f44cd68bc4 100644 --- a/src/shared/containers/GigsPages.jsx +++ b/src/shared/containers/GigsPages.jsx @@ -23,6 +23,8 @@ const optimizelyClient = createInstance({ }); const cookies = require('browser-cookies'); +const GIGS_SOCIAL_SHARE_IMAGE = 'https://images.ctfassets.net/b5f1djy59z3a/4XlYNZgq5Kfa4XdwQ6pDfV/769ea7be756a88145b88ce685f050ebc/10_Freelance_Gig.png'; + function GigsPagesContainer(props) { const { match, profile, growSurf, getReferralId, tokenV3, @@ -84,6 +86,7 @@ window._chatlio = window._chatlio||[];
{ From 2d3764650c653c91f008029daa467c20a55389e8 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 29 Aug 2022 16:15:59 +0300 Subject: [PATCH 23/24] ci: on test --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 1df6c44e6b..4652e71a83 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -356,7 +356,7 @@ workflows: filters: branches: only: - - tco23 + - gig-share # This is alternate dev env for parallel testing - "build-qa": context : org-global From 639a553b8f2c0a9664c8aa7242eb86a504e4f0dd Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 31 Aug 2022 10:54:28 +0300 Subject: [PATCH 24/24] fix missing env var --- Dockerfile | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Dockerfile b/Dockerfile index c67c7f091a..6b7a48a00a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -78,6 +78,9 @@ ARG GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY # Optimizely ARG OPTIMIZELY_SDK_KEY +# Gamification +ARG GAMIFICATION_ORG_ID + ################################################################################ # Setting of environment variables in the Docker image.