Merge pull request #4090 from eaw-pid/WV-584

[TEAM REVIEW] - WV 584 - Thank you "modal" box when Invitee clicks link sent by Challenge participant

package.json

@@ -141,6 +141,7 @@
     "puppeteer": "^22.10.0",
     "react": "~17.0.2",
     "react-bootstrap": "^1.6.4",
+    "react-confetti": "^6.1.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "~17.0.2",
     "react-fullstory": "^1.4.0",

src/js/common/components/Challenge/ThanksForViewingChallenge.jsx

@@ -0,0 +1,118 @@
+import { IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Confetti from 'react-confetti';
+import React, { useState, useEffect } from 'react';
+
+const ThanksForViewingChallenge = ({ challengeOwner }) => {
+  const [isClosing, setIsClosing] = useState(false);
+  const [showConfetti, setShowConfetti] = useState(false);
+
+  useEffect(() => {
+    if (isClosing) {
+      const timer = setTimeout(() => {
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isClosing]);
+
+  useEffect(() => {
+    // Show confetti when the component mounts
+    setShowConfetti(true);
+    // Hide confetti after a short duration
+    const timer = setTimeout(() => {
+      setShowConfetti(false);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <ThanksForViewingOuterWrapper isClosing={isClosing}>
+      <ThanksForViewingInnerWrapper isClosing={isClosing}>
+        <ThankYouMessageWrapper>
+          <ThankYouMessage>
+            {showConfetti && <Confetti />}
+            Thanks for confirming
+            the link from&nbsp;
+            {challengeOwner}
+            !
+          </ThankYouMessage>
+          <CloseMessageIconWrapper>
+            <IconButton
+              aria-label="Close"
+              onClick={() => setIsClosing(true)}
+              size="large"
+            >
+              <span className="u-cursor--pointer">
+                <Close sx={{ color: '#999', width: 24, height: 24 }} />
+              </span>
+            </IconButton>
+          </CloseMessageIconWrapper>
+        </ThankYouMessageWrapper>
+      </ThanksForViewingInnerWrapper>
+    </ThanksForViewingOuterWrapper>
+  );
+};
+ThanksForViewingChallenge.propTypes = {
+  challengeOwner: PropTypes.string.isRequired,
+};
+
+const CloseMessageIconWrapper = styled.div`
+  background: none;
+  border: none;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const ThanksForViewingInnerWrapper = styled.div`
+  width: 500px;
+  max-height: ${(props) => (props.isClosing ? '0' : '300px')};
+  border-radius: 20px;
+  filter: drop-shadow(4px 4px 10px rgba(222,222,222,2));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: white;
+  padding: ${(props) => (props.isClosing ? '0' : '0px 10px 10px')};
+  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: ${(props) => (props.isClosing ? 0 : 1)};
+  transform: ${(props) => (props.isClosing ? 'translateY(-20px)' : 'translateY(0)')};
+`;
+
+const ThanksForViewingOuterWrapper = styled.div`
+  max-height: ${(props) => (props.isClosing ? '0' : '400px')};
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  padding: ${(props) => (props.isClosing ? '0' : '0px 0px 30px')};
+  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              margin-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: ${(props) => (props.isClosing ? 0 : 1)};
+  margin-bottom:  ${(props) => (props.isClosing ? '0' : '5px')};
+  z-index: 100;
+  position: relative;
+`;
+
+const ThankYouMessage = styled.p`
+  font-size: large;
+  text-align: left;
+  font-family: Poppins;
+  font-weight: 500;
+  text-decoration: none;
+`;
+
+const ThankYouMessageWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+export default ThanksForViewingChallenge;
+
+
+

src/js/common/pages/Challenge/ChallengeHomePage.jsx

@@ -43,6 +43,7 @@ import normalizedImagePath from '../../utils/normalizedImagePath';
 import ChallengeAbout from '../../components/Challenge/ChallengeAbout';
 import ChallengeParticipantListRoot from '../../components/ChallengeParticipantListRoot/ChallengeParticipantListRoot';
 import ChallengeInviteeListRoot from '../../components/ChallengeInviteeListRoot/ChallengeInviteeListRoot';
+import ThanksForViewingChallenge from '../../components/Challenge/ThanksForViewingChallenge'
 
 const ChallengeCardForList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCardForList' */ '../../components/ChallengeListRoot/ChallengeCardForList'));
 // const ChallengeCommentsList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCommentsList' */ '../../components/Challenge/ChallengeCommentsList'));
@@ -519,6 +520,10 @@ class ChallengeHomePage extends Component {
     );
     return (
       <PageContentContainer>
+        <ThanksForViewingChallenge
+           userName="User Name"
+           challengeOwner="David"
+        />
         <Suspense fallback={<span>&nbsp;</span>}>
           <ChallengeRetrieveController
             challengeSEOFriendlyPath={challengeSEOFriendlyPath}