From e58cf187d080fb5291bcafadebf5e6afbf732524 Mon Sep 17 00:00:00 2001 From: ilona Date: Sat, 28 Sep 2024 16:53:33 -0400 Subject: [PATCH] Add ChallengeInviteFriends, YourRank, and icon changes --- src/img/global/icons/ph_arrow-up-bold.png | Bin 0 -> 271 bytes src/img/global/icons/ph_arrow-up-bold_1.png | Bin 0 -> 202 bytes .../common/components/Challenge/YourRank.jsx | 472 ++++++++++++++++++ .../ChallengeInviteFriends.jsx | 27 +- 4 files changed, 486 insertions(+), 13 deletions(-) create mode 100644 src/img/global/icons/ph_arrow-up-bold.png create mode 100644 src/img/global/icons/ph_arrow-up-bold_1.png create mode 100644 src/js/common/components/Challenge/YourRank.jsx diff --git a/src/img/global/icons/ph_arrow-up-bold.png b/src/img/global/icons/ph_arrow-up-bold.png new file mode 100644 index 0000000000000000000000000000000000000000..efa60b8577defefd6d8f4f3463711d0a142ba98d GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{t{0Y$B+ufvy(RR9x@Pc{r}U+rPZb>Jb}f` z!}}zM&m_U1OKHquCppAKor?NmmRz_gzTjkb&dV?J->hdg^S^%JzEsPdI|m;exO27d zy=A9n#nO_i#_Eb|9GbOev?g24t>%g6^b(3{vku=X@MBVoM^ginW83i=ebeO%-zD(7 zXs_W2jCmJ)tUm6;ckw#j^+Hn)b?sy~EuPJ-JyrFBYn7jB_Tw8W`D>KCq&)=dCjs5d N;OXk;vd$@?2>>%JU-|$5 literal 0 HcmV?d00001 diff --git a/src/img/global/icons/ph_arrow-up-bold_1.png b/src/img/global/icons/ph_arrow-up-bold_1.png new file mode 100644 index 0000000000000000000000000000000000000000..c235b686c740d0bd939381c78c6a5e8342e8e63b GIT binary patch literal 202 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBe!QoPV@L(#*-0mP4=C`kybW>S+%mx{*b4|2 zFmLwQR#C(ik$L3sy~+pyS$V<21Ht(LbqBBOdb*0rXeCNNs%+4%*z>7*_RPaen*##3 r*?OO?J9k0$+tg5lr^;Jpb262Vt*G@oqh}}tw2Hyg)z4*}Q$iB}m$5&B literal 0 HcmV?d00001 diff --git a/src/js/common/components/Challenge/YourRank.jsx b/src/js/common/components/Challenge/YourRank.jsx new file mode 100644 index 000000000..9f057855a --- /dev/null +++ b/src/js/common/components/Challenge/YourRank.jsx @@ -0,0 +1,472 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import withStyles from '@mui/styles/withStyles'; +import DesignTokenColors from '../../components/Style/DesignTokenColors'; +import { Button } from '@mui/material'; +import { CampaignSupportDesktopButtonPanel, CampaignSupportDesktopButtonWrapper, CampaignSupportSection, CampaignSupportSectionWrapper } from '../../components/Style/CampaignSupportStyles'; +import { SupportButtonFooterWrapper, SupportButtonPanel} from '../../components/Style/CampaignDetailsStyles'; +import arrow from '../../../../img/global/icons/ph_arrow-up-bold.png'; +import arrow1 from '../../../../img/global/icons/ph_arrow-up-bold_1.png'; +const URL = '/:challengeSEOFriendlyPath/+/customize-message'; + +const YourRank =({classes})=>{ + const [clicked, setClicked] = useState(false); + const [points, setPoints] = useState(0); + const [note, setNote] = useState(""); + const [arrowImage, setArrowImage] = useState(arrow) + + const calculateRank = (points) => 5336 + points * 5; + + const handleClick = () => { + setPoints((prevPoints) => { + const newPoints = prevPoints + 1; + setClicked(true); + setArrowImage(arrow1) + + setTimeout(() => { + setClicked(false); + setArrowImage(arrow) + }, 3000); + return newPoints; + }); + }; + return ( + +
+

Your rank in the challenge:

+
+ + + + + ); + }; + const styles = (theme) => ({ + buttonDesktop: { + boxShadow: 'none !important', + color: '#AC5204', + width: '105px', + height: '34px', + border: '1px solid #AC5204', + borderRadius: '20px 20px 20px 20px', + transition: 'color 0.3s ease', + textTransform: 'none', + width: '100%', + }, + desktopSimpleLink: { + border: '2px solid #AC5204', + boxShadow: 'none !important', + color: '#999', + marginTop: 10, + padding: '0 20px', + textTransform: 'none', + width: 250, + }, + mobileSimpleLink: { + boxShadow: 'none !important', + color: '#999', + marginTop: 10, + padding: '0 20px', + textTransform: 'none', + width: '100%', + '&:hover': { + color: '#4371cc', + textDecoration: 'underline', + }, + }, + arrow: { + width: '10.5px', + height: '12.5px', + top: '2.75px', + left: '14.25px', + gap: '0px', + opacity: '0px', + angle: '-90 deg', + }, + }); + const ChallengeTabsWrapper = styled('div')` + background-color: ${DesignTokenColors.neutralUI50}; + display: flex; + justify-content: center; + `; + const YourRankWrapper = styled('div')` + background-color: ${DesignTokenColors.neutralUI50}; + display: flex; + justify-content: center; + `; + const CompleteYourProfileButtonWrapper = styled('div')` + background-color: ${(props)=>(props.clicked ? "#AC5204" : "#FFFFFF")}; + width: 105px; + height: 34px; + top: 443px; + left: 234px; + gap: 0px; + border-radius: 20px; + border: 1px solid #AC5204, + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease, color 0.3s ease; + `; +export default withStyles(styles)(YourRank); + + + + +// import { Button } from '@mui/material'; +// import { CampaignSupportDesktopButtonPanel, CampaignSupportDesktopButtonWrapper, CampaignSupportSection, CampaignSupportSectionWrapper } from '../../components/Style/CampaignSupportStyles'; +// import { SupportButtonFooterWrapper, SupportButtonPanel} from '../../components/Style/CampaignDetailsStyles'; +// // Import pngs +// import vector from '../../../../img/global/icons/Vector.png'; +// import vector1 from '../../../../img/global/icons/Vector1.png'; +// import vector8 from '../../../../img/global/icons/Vector 8.png'; +// import vector9 from '../../../../img/global/icons/Vector 9.png'; +// import vector11 from '../../../../img/global/icons/Vector 11.png'; +// import vector12 from '../../../../img/global/icons/Vector 12.png'; +// import vector13 from '../../../../img/global/icons/Vector 13.png'; +// import yellow_star from '../../../../img/global/icons/material-symbols_star.png'; +// import orange_star from '../../../../img/global/icons/material-symbols_star1.png'; +// import ellipse273 from '../../../../img/global/icons/Ellipse 273.png'; +// import ellipse274 from '../../../../img/global/icons/Ellipse 274.png'; +// import ellipse275 from '../../../../img/global/icons/Ellipse 275.png'; +// import ellipse276 from '../../../../img/global/icons/Ellipse 276.png'; +// import arrow from '../../../../img/global/icons/ph_arrow-up-bold.png'; +// import arrow1 from '../../../../img/global/icons/ph_arrow-up-bold_1.png'; +// // import Button from "@mui/material"; +// const URL = '/:challengeSEOFriendlyPath/+/customize-message'; +// +// const YourRank =({classes})=>{ +// // console.log(classes) +// const [clicked, setClicked] = useState(false); +// const [points, setPoints] = useState(0); +// const [note, setNote] = useState(""); +// const [arrowImage, setArrowImage] = useState(arrow) +// +// const calculateRank = (points) => 5336 + points * 5; +// +// const handleClick = () => { +// setPoints((prevPoints) => { +// const newPoints = prevPoints + 1; +// setClicked(true); +// setArrowImage(arrow1) +// setNote("1 point earned. You move up by 5 ranks!"); +// +// setTimeout(() => { +// setClicked(false); +// setNote(""); +// setArrowImage(arrow) +// }, 3000); +// return newPoints; +// }); +// }; +// return ( +// +//
+//

Your rank in the challenge:

+//
+// {/* */} +// {/* ellipse273 */} +// {/* star */} +// {/* vector8 */} +// {/* ellipse274 */} +// {/* vector_13 */} +// {/* vector11 */} +// {/* vector9 */} +// {/* ellipse276 */} +// {/* blue_star */} +// {/* vector12 */} +// {/* ellipse275 */} +// {/* red_star */} +// {/* */} +// {/* */} +// {/* */} +// {/* */} +// {/*
*/} +// {/* {note &&

{note}

} */} +// {/* */} +// +// +// +// +// ); +// }; +// +// const styles = () => ({ +// +// buttonDesktop: { +// boxShadow: 'none !important', +// fontSize: '18px', +// height: '45px !important', +// padding: '0 12px', +// textTransform: 'none', +// width: '100%', +// }, +// desktopSimpleLink: { +// boxShadow: 'none !important', +// color: '#999', +// marginTop: 10, +// padding: '0 20px', +// textTransform: 'none', +// width: 250, +// '&:hover': { +// color: '#4371cc', +// textDecoration: 'underline', +// }, +// }, +// mobileSimpleLink: { +// boxShadow: 'none !important', +// color: '#999', +// marginTop: 10, +// padding: '0 20px', +// textTransform: 'none', +// width: '100%', +// '&:hover': { +// color: '#4371cc', +// textDecoration: 'underline', +// }, +// }, +// arrow: { +// width: '10.5px', +// height: '12.5px', +// top: '2.75px', +// left: '14.25px', +// gap: '0px', +// opacity: '0px', +// angle: '-90 deg' +// }, +// ellipse273: { +// width: '3px', +// height: '3px', +// top: '448px', +// left: '228px', +// opacity: '0px' +// }, +// ellipse274: { +// width: '3px', +// height: '3px', +// top: '434px', +// left: '259px', +// opacity: '0px' +// }, +// ellipse275:{ +// width: '3px', +// height: '3px', +// top: '437px', +// left: '331px', +// gap: '0px', +// opacity: '0px', +// }, +// ellipse276:{ +// width: '3px', +// height: '3px', +// top: '423px', +// left: '302px', +// gap: '0px', +// opacity: '0px' +// }, +// orange_star: { +// width: '11px', +// height: '11px', +// top: '432px', +// left: '338.11px', +// padding: '0.92px 0.92px 1.37px 0.92px', +// gap: '0px', +// opacity: '0px', +// angle: '-16.42 deg' +// }, +// vector1: { +// width: '11px', +// height: '11px', +// top: '427px', +// left: '302.11px', +// padding: '0.92px 0.92px 1.37px 0.92px', +// gap: '0px', +// opacity: '0px', +// angle: '-16.42 deg' +// }, +// vector8: { +// width: '0px', +// height: '9.37px', +// top: '428px', +// left: '243px', +// border: '2px 0px 0px 0px', +// opacity: '0px' +// }, +// vector9:{ +// height: '9.37px', +// top: '429px', +// left: '291.96px', +// border: '2px 0px 0px 0px' +// }, +// vector11: { +// width: '0px', +// height: '7.12px', +// top: '431px', +// left: '274px', +// border: '2px 0px 0px 0px', +// opacity: '0px' +// }, +// vector12: { +// width: '0px', +// height: '9.37px', +// top: '427px', +// left: '324.43px', +// gap: '0px', +// border: '2px 0px 0px 0px', +// opacity: '0px', +// angle: '-15 deg' +// }, +// vector13: { +// height: '7.07px', +// top: '423.02px', +// left: '256.29px', +// border: '2px 0px 0px 0px' +// }, +// yellow_star: { +// width: '11px', +// height: '11px', +// top: '435.81px', +// left: '222px', +// padding: '0.92px 0.92px 1.37px 0.92px', +// opacity: '0px' +// } +// }); +// const ChallengeTabsWrapper = styled('div')` +// background-color: ${DesignTokenColors.neutralUI50}; +// display: flex; +// justify-content: center; +// `; +// const YourRankWrapper = styled('div')` +// background-color: ${DesignTokenColors.neutralUI50}; +// display: flex; +// justify-content: center; +// `; +// const ConfettiWrapper = styled('div')` +// background-color: ${DesignTokenColors.neutralUI50}; +// display: flex; +// justify-content: center; +// `; +// const ChallengeTabsWrapperButton = styled(Button)` +// background-color: ${(props)=>(props.clicked ? "#AC5204" : "#FFFFFF")}; +// color: ${(props)=> (props.clicked ? "white" : "#AC5204")}; +// width: 105px; +// height: 34px; +// top: 443px; +// left: 234px; +// gap: 0px; +// border-radius: 20px 20px 20px 20px; +// border: '1px solid var(--Accent-500, #AC5204)', +// `; +// export default withStyles(styles)(YourRank); + + diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx index 8ebb85f2c..d55495da8 100644 --- a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx +++ b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx @@ -22,14 +22,16 @@ import initializejQuery from '../../utils/initializejQuery'; import { renderLog } from '../../utils/logging'; import DesignTokenColors from '../../components/Style/DesignTokenColors'; import ChallengeInviteSteps from '../../components/Navigation/ChallengeInviteSteps'; -import ChallengeInviteeListRoot from '../../components/ChallengeInviteeListRoot/ChallengeInviteeListRoot'; -import InviteFriendToChallengeInput from '../../components/ChallengeInviteeListRoot/InviteFriendToChallengeInput'; +import ChallengeInvitedFriends from '../../components/ChallengeInviteFriends/ChallengeInvitedFriends'; +import InviteFriendToChallengeInput from '../../components/ChallengeInviteFriends/InviteFriendToChallengeInput'; +import YourRank from '../../components/Challenge/YourRank'; const ChallengeRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeRetrieveController' */ '../../components/Challenge/ChallengeRetrieveController')); const VoterFirstRetrieveController = loadable(() => import(/* webpackChunkName: 'VoterFirstRetrieveController' */ '../../components/Settings/VoterFirstRetrieveController')); -class ChallengeInviteFriends extends Component { +// TODO SOON: Change name to ChallengeInviteFriends +class ChallengeInviteCopy extends Component { constructor (props) { super(props); this.state = { @@ -45,7 +47,7 @@ class ChallengeInviteFriends extends Component { } componentDidMount () { - // console.log('ChallengeInviteFriends componentDidMount'); + // console.log('ChallengeInviteCopy componentDidMount'); this.props.setShowHeaderFooter(false); this.onAppObservableStoreChange(); this.appStateSubscription = messageService.getMessage().subscribe(() => this.onAppObservableStoreChange()); @@ -215,7 +217,7 @@ class ChallengeInviteFriends extends Component { visibleToPublic = ChallengeParticipantStore.getVisibleToPublicQueuedToSave(); } if (participantEndorsementQueuedToSaveSet || visibleToPublicChanged) { - // console.log('ChallengeInviteFriends, participantEndorsementQueuedToSave:', participantEndorsementQueuedToSave); + // console.log('ChallengeInviteCopy, participantEndorsementQueuedToSave:', participantEndorsementQueuedToSave); const saveVisibleToPublic = true; initializejQuery(() => { ChallengeParticipantActions.participantEndorsementSave(challengeWeVoteId, participantEndorsementQueuedToSave, visibleToPublic, saveVisibleToPublic); // challengeParticipantSave @@ -235,9 +237,9 @@ class ChallengeInviteFriends extends Component { } render () { - renderLog('ChallengeInviteFriends'); // Set LOG_RENDER_EVENTS to log all renders + renderLog('ChallengeInviteCopy'); // Set LOG_RENDER_EVENTS to log all renders const { - challengePhotoLargeUrl, challengeSEOFriendlyPath, challengeTitle, + challengeSEOFriendlyPath, challengeTitle, challengeWeVoteId, chosenWebsiteName, } = this.state; const htmlTitle = `Invite your friends - ${chosenWebsiteName}`; @@ -249,7 +251,6 @@ class ChallengeInviteFriends extends Component { - + - YOUR RANK IN CHALLENGE HERE - + +  }> @@ -295,7 +296,7 @@ class ChallengeInviteFriends extends Component { ); } } -ChallengeInviteFriends.propTypes = { +ChallengeInviteCopy.propTypes = { match: PropTypes.object, setShowHeaderFooter: PropTypes.func, }; @@ -314,4 +315,4 @@ const InvitedFriendsWrapper = styled('div')` flex-direction: column; `; -export default withStyles(commonMuiStyles)(ChallengeInviteFriends); +export default withStyles(commonMuiStyles)(ChallengeInviteCopy);