diff --git a/src/assets/themes/wipro/wipro-logo.png b/src/assets/themes/wipro/wipro-logo.png new file mode 100644 index 0000000000..5ac77dd121 Binary files /dev/null and b/src/assets/themes/wipro/wipro-logo.png differ diff --git a/src/server/tc-communities/wipro/metadata.json b/src/server/tc-communities/wipro/metadata.json index 5ec5bd10d0..a47bb864f1 100644 --- a/src/server/tc-communities/wipro/metadata.json +++ b/src/server/tc-communities/wipro/metadata.json @@ -20,7 +20,7 @@ }], "leaderboardApiUrl": "https://api.topcoder.com/v4/looks/0/run/json/", "logos": [ - "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wipro_Logo_RGB.png/480px-Wipro_Logo_RGB.png", + "/themes/wipro/wipro-logo.png", "/themes/wipro/logo_topcoder_with_name.svg" ], "menuItems": [ diff --git a/src/shared/actions/tc-communities/index.js b/src/shared/actions/tc-communities/index.js index a8398c22bb..b5937a3b39 100644 --- a/src/shared/actions/tc-communities/index.js +++ b/src/shared/actions/tc-communities/index.js @@ -18,5 +18,7 @@ export default createActions({ HIDE_JOIN_BUTTON: _.noop, JOIN_INIT: _.noop, JOIN_DONE: joinDone, + RESET_JOIN_BUTTON: _.noop, + SHOW_JOIN_CONFIRM_MODAL: _.noop, }, }); diff --git a/src/shared/components/tc-communities/JoinCommunity/index.jsx b/src/shared/components/tc-communities/JoinCommunity/index.jsx index fd673c7883..bbf2a60c08 100644 --- a/src/shared/components/tc-communities/JoinCommunity/index.jsx +++ b/src/shared/components/tc-communities/JoinCommunity/index.jsx @@ -7,6 +7,7 @@ /* global window */ +import _ from 'lodash'; import config from 'utils/config'; import LoadingIndicator from 'components/LoadingIndicator'; import Modal from 'components/Modal'; @@ -14,24 +15,37 @@ import PT from 'prop-types'; import React from 'react'; import style from './style.scss'; +export const STATE = { + CONFIRM_JOIN: 'confirm-join', + DEFAULT: 'default', + HIDDEN: 'hidden', + JOINED: 'joined', + JOINING: 'joining', +}; + export default function JoinCommunity({ - canJoin, communityName, groupId, hideJoinButton, join, - joined, - joining, + resetJoinButton, + showJoinConfirmModal, + state, token, userId, }) { - if (!canJoin) return
; + if (state === STATE.HIDDEN) return
; return (
- { joined ? ( + { state === STATE.JOINED ? (

Congratulations!

You have joined {communityName}!

@@ -58,6 +72,23 @@ export default function JoinCommunity({ >Return to the Community ) : null} + { state === STATE.CONFIRM_JOIN ? ( + +

+ Are you sure you want to join {communityName}? +

+
+ + +
+ + ) : null}
); } @@ -69,13 +100,13 @@ JoinCommunity.defaultProps = { }; JoinCommunity.propTypes = { - canJoin: PT.bool.isRequired, communityName: PT.string.isRequired, groupId: PT.string, hideJoinButton: PT.func.isRequired, join: PT.func.isRequired, - joined: PT.bool.isRequired, - joining: PT.bool.isRequired, + resetJoinButton: PT.func.isRequired, + showJoinConfirmModal: PT.func.isRequired, + state: PT.oneOf(_.values(STATE)).isRequired, token: PT.string, userId: PT.string, }; diff --git a/src/shared/components/tc-communities/JoinCommunity/style.scss b/src/shared/components/tc-communities/JoinCommunity/style.scss index e408697637..00cd7a08b9 100644 --- a/src/shared/components/tc-communities/JoinCommunity/style.scss +++ b/src/shared/components/tc-communities/JoinCommunity/style.scss @@ -1,5 +1,58 @@ @import "~styles/tc-styles"; +@mixin button($color, $highlight-color) { + color: $color; + display: block; + background: $tc-white; + border: 1px solid $color; + border-radius: 20px; + font: 700 14px/40px 'Open Sans'; + margin: 24px auto; + height: 40px; + text-align: center; + text-transform: uppercase; + width: 171px; + + &:hover, + &:active, + &:focus, + &:visited { + color: $color; + outline: none; + text-decoration: none; + } + + &:hover { + background: $highlight-color; + } +} + +.confirmMsg { + @include tc-body; + + text-align: center; +} + +.btnCancel { + @include button($tc-light-blue, $tc-light-blue-10); + + display: inline-block; + margin: 24px 0 0 12px; + width: 100px; +} + +.btnConfirm { + @include button($tc-green, $tc-green-10); + + display: inline-block; + margin: 24px 12px 0 0; + width: 100px; +} + +.buttons { + text-align: center; +} + .done { color: $tc-light-blue; display: block; diff --git a/src/shared/containers/tc-communities/JoinCommunity.js b/src/shared/containers/tc-communities/JoinCommunity.js index ec03a10312..f0facb02b0 100644 --- a/src/shared/containers/tc-communities/JoinCommunity.js +++ b/src/shared/containers/tc-communities/JoinCommunity.js @@ -1,6 +1,8 @@ import _ from 'lodash'; import actions from 'actions/tc-communities'; -import JoinCommunity from 'components/tc-communities/JoinCommunity'; +import JoinCommunity, { + STATE as JOIN_COMMUNITY, +} from 'components/tc-communities/JoinCommunity'; import { connect } from 'react-redux'; function mapStateToProps(state) { @@ -11,13 +13,14 @@ function mapStateToProps(state) { item.id === state.tcCommunities.meta.challengeGroupId); if (state.tcCommunities.hideJoinButton) canJoin = false; + if (canJoin) canJoin = state.tcCommunities.joinCommunityButton; + else canJoin = JOIN_COMMUNITY.HIDDEN; + return { - canJoin, communityName: state.tcCommunities.meta.communityName, groupId: state.tcCommunities.meta.challengeGroupId, - joined: state.tcCommunities.joined, - joining: state.tcCommunities.joining, token: state.auth.tokenV3, + state: canJoin, userId: _.get(state.auth.user, 'userId'), }; } @@ -30,6 +33,8 @@ function mapDispatchToProps(dispatch) { dispatch(a.joinInit()); dispatch(a.joinDone(...args)); }, + resetJoinButton: () => dispatch(a.resetJoinButton()), + showJoinConfirmModal: () => dispatch(a.showJoinConfirmModal()), }; } diff --git a/src/shared/reducers/tc-communities/index.js b/src/shared/reducers/tc-communities/index.js index 931a9b6c13..994e112b79 100644 --- a/src/shared/reducers/tc-communities/index.js +++ b/src/shared/reducers/tc-communities/index.js @@ -9,6 +9,7 @@ import actions from 'actions/tc-communities'; import logger from 'utils/logger'; import { handleActions } from 'redux-actions'; import { combine, resolveReducers } from 'utils/redux'; +import { STATE as JOIN_COMMUNITY } from 'components/tc-communities/JoinCommunity'; import { factory as metaFactory } from './meta'; import { factory as newsFactory } from './news'; @@ -22,21 +23,29 @@ function onJoinDone(state, action) { * to see it normally. */ alert('Failed to join the group!'); // eslint-disable-line no-alert - return { ...state, joined: false, joining: false }; + return { ...state, joinCommunityButton: JOIN_COMMUNITY.DEFAULT }; } - return { ...state, joined: true }; + return { ...state, joinCommunityButton: JOIN_COMMUNITY.JOINED }; } function create(initialState = {}) { const a = actions.tcCommunity; return handleActions({ - [a.hideJoinButton]: state => ({ ...state, hideJoinButton: true }), - [a.joinInit]: state => ({ ...state, joining: true }), + [a.hideJoinButton]: state => ({ + ...state, joinCommunityButton: JOIN_COMMUNITY.HIDDEN, + }), + [a.joinInit]: state => ({ + ...state, joinCommunityButton: JOIN_COMMUNITY.JOINING, + }), [a.joinDone]: onJoinDone, + [a.resetJoinButton]: state => ({ + ...state, joinCommunityButton: JOIN_COMMUNITY.DEFAULT, + }), + [a.showJoinConfirmModal]: state => ({ + ...state, joinCommunityButton: JOIN_COMMUNITY.CONFIRM_JOIN, + }), }, _.defaults(_.clone(initialState), { - hideJoinButton: false, - joined: false, - joining: false, + joinCommunityButton: JOIN_COMMUNITY.DEFAULT, })); }