conversation page and tab updates rebased

src/const/colors.ts

@@ -0,0 +1,4 @@
+export const CM_COLOURS = {
+    mainDarkGreen: "#07373b",
+    white: "#ffffff"
+}

src/pages/UserAAuthorizedPages/BadgePage.tsx

@@ -0,0 +1,11 @@
+import { Page } from "shared/components"
+
+function BadgePage() {
+  return (
+    <Page>
+      <div>Badge Page</div>
+    </Page>
+  )
+}
+
+export default BadgePage

src/pages/UserAAuthorizedPages/ConversationsPage.tsx

@@ -1,15 +1,34 @@
 import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
-import { useMediaQuery } from '@mui/material';
+import { CM_COLOURS } from 'const/colors';
+import HelpIcon from '@mui/icons-material/Help';
 
-import { CmButton, CmTextInput, CmTypography, Page, PageContent } from 'shared/components';
-import { ConversationsDrawer, CopyLinkModal, useConversationInvite } from 'features/conversations';
+import { CmButton2, CmTextInput, CmTypography, Page } from 'shared/components';
+import { ConversationsDrawer, CopyLinkModal, useConversationInvite, useConversations } from 'features/conversations';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { BorderLinearProgress } from 'shared/components/BorderLinearProgress';
+import { CmBadge } from 'shared/components/CmBadge';
+import CmGoalCard from 'shared/components/CmRoundedCard';
+import CmRoundedCard from 'shared/components/CmRoundedCard';
+import { CheckCircle, HourglassTopOutlined } from '@mui/icons-material';
+import CmTextWithIcon from 'shared/components/CmTextWithIcon';
 
 function ConversationsPage() {
   const location = useLocation();
   const [searchParams, _] = useSearchParams();
+  const badges = Array(4).fill({ name: 'badge name' });
+
+  const { isLoading, conversations } = useConversations();
 
-  const isSmall = useMediaQuery('(max-width: 960px)');
+  const getConversations = (status: 'complete' | 'ongoing') => {
+    if (status === 'complete') {
+      return conversations?.filter((conversation) => conversation.state === 5);
+    }
+    return conversations?.filter((conversation) => conversation.state !== 5);
+  };
+
+  useEffect(() => {
+    console.log(isLoading);
+  }, []);
 
   // Logic for create link
   const { inviteToConversation } = useConversationInvite();
@@ -37,48 +56,175 @@ function ConversationsPage() {
   }, []);
 
   return (
-    <Page style={{ backgroundColor: 'white' }}>
-      <PageContent style={{ maxWidth: 400, paddingBottom: 0, height: '100%' }}>
-        <CmTypography variant="h1">Start a conversation</CmTypography>
-
-        <CmTypography variant="body" style={{ textAlign: 'center', marginBottom: 20 }}>
-          Create a personalized link for each person you want to talk to. Then share it, so they can take the quiz, discover your shared values, and pick topics to talk about.
-        </CmTypography>
-
-        <CmTypography variant="body" style={{ textAlign: 'center', fontSize: '0.8em', fontWeight: 'bold' }}>
-          We will send you an email when they agree to share their results with you!
-        </CmTypography>
-
-        <form onSubmit={handleSubmit} style={styles.form}>
-          <CmTextInput
-            id="friend"
-            label="Name of recipient"
-            placeholder='Try "Peter Smith" or "Mom"'
-            value={friendsName}
-            onChange={(e) => setFriendsName(e.target.value)}
-            helperText={friendsName.length > 20 && 'Name must be less than 20 characters'}
-            style={{ marginTop: 30, marginBottom: 30 }}
-          />
-
-          <CmButton text="Create Link" onClick={handleSubmit} disabled={friendsName === '' || friendsName.length > 20} />
-        </form>
-
-        <button onClick={() => setConversationDrawerOpen(true)} style={{ ...styles.openDrawerButton, bottom: isSmall ? 56 : 0 }}>
-          <img src="/arrows/arrow-up-white.svg" alt="arrow-up" />
-          <CmTypography variant="h4" style={{ marginTop: 0, marginBottom: 10 }}>
-            Ongoing Conversations
+    <Page>
+      <div style={styles.root}>
+        <div style={styles.topPageSection}>
+          <CmTypography style={{ color: '#FDFFFC' }} variant="h2">
+            Conversation Hub
           </CmTypography>
-        </button>
+          <div style={styles.imageBanner}>
+            <img src="/hompage-conversation.svg" alt="cm conversation image" style={styles.image} />
+            <div content="" style={styles.HorizontalDivider}></div>
+          </div>
+          <div style={styles.conversationInputContainer}>
+            <div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <CmTypography style={{ color: '#FDFFFC' }} variant="h3">
+                  Create a link to get started!
+                </CmTypography>
+                <HelpIcon sx={{ color: CM_COLOURS.white, fontSize: 26 }} />
+              </div>
+            </div>
+            <CmTypography style={{ color: '#FDFFFC', paddingBottom: '16px' }} variant="body">
+              Share this link with a friend so they can take the Values Quiz and select topics to discuss! We will email you when they share their results.
+            </CmTypography>
+            <CmRoundedCard customStyles={{ boxShadow: '0px 4px 8px 0px #D0EEEB', padding: '16px', gap: 17 }}>
+              <form onSubmit={handleSubmit} style={styles.form}>
+                <CmTextInput
+                  variant="outlined"
+                  id="friend"
+                  label="Name"
+                  placeholder='Try "Peter Smith" or "Mom"'
+                  value={friendsName}
+                  onChange={(e) => setFriendsName(e.target.value)}
+                  helperText={friendsName.length > 20 && 'Name must be less than 20 characters'}
+                  style={{ borderRadius: '10px' }}
+                />
+
+                <CmButton2 style={{ marginTop: '20px' }} text="Create Link" onClick={() => handleSubmit} disabled={friendsName === '' || friendsName.length > 20} />
+              </form>
+            </CmRoundedCard>
+          </div>
+          <ConversationsDrawer open={conversationDrawerOpen} onClose={() => setConversationDrawerOpen(false)} />
+
+          <CopyLinkModal isOpen={showCopyLinkModal} onClose={() => setShowCopyLinkModal(false)} userBName={friendsName} link={link} />
+        </div>
+
+        {/* lower section */}
+        <div style={styles.lowerSection}>
+          <div style={styles.lowerSectionContainer}>
+            <CmTypography style={styles.textLeft} variant="h2">
+              Your Conversations
+            </CmTypography>
+
+            {!conversations || conversations.length == 0 ? (
+              <CmTypography style={styles.textLeft} variant="body">
+                You do not currently have any conversations. Create a quiz link and send it to a friend to get started!
+              </CmTypography>
+            ) : null}
 
-        <ConversationsDrawer open={conversationDrawerOpen} onClose={() => setConversationDrawerOpen(false)} />
+            <div style={{ marginTop: '64px' }}>
+              <CmTypography style={styles.textLeft} variant="h4">
+                Ongoing
+              </CmTypography>
 
-        <CopyLinkModal isOpen={showCopyLinkModal} onClose={() => setShowCopyLinkModal(false)} userBName={friendsName} link={link} />
-      </PageContent>
+              {getConversations('ongoing')?.map((conversation) => (
+                <CmGoalCard customStyles={{ marginBottom: '16px' }} key={conversation.conversationId} conversationStatus="ongoing">
+                  <div style={{ ...styles.conversationCardContainer, ...{ height: '162px' } }}>
+                    <CmTypography style={styles.textLeft} variant="h1">
+                      {conversation.userB.name}
+                    </CmTypography>
+                    <div>
+                      <CmTextWithIcon text="Link Created" icon={conversation.state >= 0 && conversation.state <= 5 ? <CheckCircle /> : <HourglassTopOutlined />} />
+                      <CmTextWithIcon text="Topics Selected" icon={conversation.state == 0 ? <HourglassTopOutlined /> : <CheckCircle />} />
+                      <CmTextWithIcon text="Talked" icon={<HourglassTopOutlined />} />
+                    </div>
+                  </div>
+                </CmGoalCard>
+              ))}
+            </div>
+
+            <div style={{ marginTop: '64px' }}>
+              <CmTypography style={styles.textLeft} variant="h4">
+                Completed
+              </CmTypography>
+              {getConversations('complete')?.map((conversation) => (
+                <CmGoalCard customStyles={{ marginBottom: '16px' }} key={conversation.conversationId} conversationStatus="completed">
+                  <div style={styles.conversationCardContainer}>
+                    <CmTypography style={styles.textLeft} variant="h1">
+                      {conversation.userB.name}
+                    </CmTypography>
+                    <div>
+                      <CmTypography variant="h4">Completed</CmTypography>
+                    </div>
+                  </div>
+                </CmGoalCard>
+              ))}
+            </div>
+
+            <div>
+              <CmTypography style={{ marginTop: '64px', textAlign: 'left' }} variant="h2">
+                Weekly Goal
+              </CmTypography>
+              <CmRoundedCard customStyles={styles.weeklyGoal}>
+                <div style={styles.weeklyGoalTopSection}>
+                  <img style={styles.weeklyGoalImage} src="/weekly-goal.svg" alt="cm weely goals" />
+                  <div style={{ padding: '10px' }}>
+                    <CmTypography variant="h4" style={styles.weeklyGoalTitle}>
+                      Almost there!
+                    </CmTypography>
+                    <CmTypography style={{ textAlign: 'left' }} variant="body">
+                      Reach out to a friend or family member to start talking!
+                    </CmTypography>
+                  </div>
+                </div>
+                <div style={{ margin: '16px 0px' }}>
+                  <CmTypography style={{ textAlign: 'right' }} variant="body">
+                    <span style={{ fontWeight: 'bolder' }}>0/1</span> Conversations
+                  </CmTypography>
+                  <BorderLinearProgress style={styles.progressBar} variant="determinate" value={50} />
+                </div>
+              </CmRoundedCard>
+
+              <div style={styles.resourcesArea}>
+                <CmTypography style={{ textAlign: 'center', paddingBottom: '32px' }} variant="body">
+                  Want more guidance on how to have great conversations?
+                </CmTypography>
+                <CmButton2 style={styles.resourcesButton} text="Resources" onClick={() => handleSubmit} />
+              </div>
+
+              <div>
+                <div style={styles.badgeSectionHeader}>
+                  <CmTypography style={styles.textLeft} variant="h4">
+                    Your Climate Badges
+                  </CmTypography>
+                  <CmTypography style={{ textDecoration: 'underline' }} variant="body">
+                    SEE ALL
+                  </CmTypography>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+                  {badges.map((badgeInfo) => (
+                    <div>
+                      <CmBadge name={badgeInfo.name} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </Page>
   );
 }
 
 const styles: { [key: string]: React.CSSProperties } = {
+  root: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    maxWidth: 640,
+    margin: '0 auto',
+  },
+  topPageSection: { backgroundColor: CM_COLOURS.mainDarkGreen, padding: '8px 8px 32px 8px' },
+  lowerSection: {
+    background: 'linear-gradient(180deg, #FFFFFF 78.34%, rgba(208, 238, 235, 0.6) 141.86%)',
+    paddingBottom: '128px',
+    width: "100%",
+  },
   form: {
     display: 'flex',
     flexDirection: 'column',
@@ -99,6 +245,21 @@ const styles: { [key: string]: React.CSSProperties } = {
     width: '100vw',
     height: 88,
   },
+  imageBanner: { width: '280px', height: '265px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minWidth: '100%' },
+  image: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },
+  HorizontalDivider: { border: '1px solid #BDFADC', width: '188px', alignSelf: 'center' },
+  lowerSectionContainer: { margin: '16px', marginTop: '64px' },
+  weeklyGoal: { display: 'flex', flexDirection: 'column', background: '#F5ECFE', boxShadow: '0px 4px 8px 0px #00000040', border: '1px solid #D0EEEB' },
+  weeklyGoalTopSection: { display: 'flex', alignItems: 'center' },
+  weeklyGoalImage: { width: '105px', height: '100px' },
+  weeklyGoalTitle: { padding: '0px', margin: '0px', textAlign: 'left' },
+  textLeft: { textAlign: 'left' },
+  resourcesArea: { display: 'flex', justifyContent: 'center', flexDirection: 'column', margin: '64px 32px' },
+  resourcesButton: { backgroundColor: 'white', border: '1px solid #07373B', boxShadow: '0px 4px 4px 0px #00000040' },
+  conversationCardContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  badgeSectionHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+  progressBar: { margin: '16px 0px', backgroundColor: 'white' },
+  conversationInputContainer: { display: 'flex', justifyContent: 'center', padding: '16px 16px 0px 16px', flexDirection: 'column' },
 };
 
 export default ConversationsPage;

src/router/RouteConfig.ts

@@ -14,6 +14,7 @@ const ROUTES = {
   USERA_SHARED_FEED_PAGE: '/user-a-shared-feed',
   SHARED_VALUES_PAGE: '/shared-values',
   PASSWORD_RESET_PAGE: '/password-reset',
+  BADGE_PAGE: '/badges',
 
   // new userA
   PRE_QUIZ_PAGE: '/start',

src/router/Router.tsx

@@ -41,6 +41,7 @@ import UserBNoConsentPage from '../pages/UserBPages/UserBNoConsentPage';
 import Error404Page from 'pages/SharedPages/Error404Page';
 import AuthorizedPage from 'pages/SharedPages/AuthorizedPage';
 import UnauthorizedPage from 'pages/UserAUnauthorizedPages/UnauthorizedPage';
+import BadgePage from 'pages/UserAAuthorizedPages/BadgePage';
 
 const router = createBrowserRouter([
   {
@@ -135,6 +136,10 @@ const router = createBrowserRouter([
             path: ROUTES.PROFILE_PAGE,
             element: <ProfilePage />,
           },
+          {
+            path: `${ROUTES.BADGE_PAGE}`,
+            element: <BadgePage />,
+          },
         ],
       },
 
@@ -191,4 +196,5 @@ const router = createBrowserRouter([
   },
 ]);
 
+
 export default router;

src/shared/components/AppBar/CmAppBar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { IconButton, useMediaQuery } from "@mui/material";
-import { Home, EmojiObjects, QuestionAnswer, Announcement, Menu } from "@mui/icons-material";
+import { EmojiObjects, Announcement, Menu, Home, Star } from "@mui/icons-material";
 
 import ROUTES from "router/RouteConfig";
 import { useAppSelector } from "store/hooks";
@@ -13,12 +13,12 @@ import { ProfileIcon } from "features/auth/components";
 const tabRoutes = [
   ROUTES.CLIMATE_FEED_PAGE,
   ROUTES.SOLUTIONS_FEED_PAGE,
-  ROUTES.CONVERSATIONS_INTRO_PAGE,
+  ROUTES.CONVERSATIONS_PAGE,
   ROUTES.MYTHS_FEED_PAGE,
+  ROUTES.BADGE_PAGE
 ];
 
 const conversationRoutes = [
-  ROUTES.CONVERSATIONS_INTRO_PAGE,
   ROUTES.CONVERSATIONS_PAGE,
   ROUTES.SHARED_VALUES_PAGE,
   ROUTES.USERA_SHARED_FEED_PAGE,
@@ -73,10 +73,11 @@ function CmAppBar({ onShowMenu }: Props) {
             <ProfileIcon />
           </div>
           <CmAppBarTabs value={selectedTab} onChange={(_, newValue) => changeTabHandler(newValue)}>
-            <CmAppBarTab icon={<Home fontSize='small' />} label='Home' />
-            <CmAppBarTab icon={<EmojiObjects fontSize='small' />} label='Actions' />
-            <CmAppBarTab icon={<QuestionAnswer fontSize='small' />} label='Talk' />
+            <CmAppBarTab icon={<img style={{ width: '20px', height: '20px', color: "red" }} src="/cm-impact.svg" alt="cm weely goals" />} label='Impact' />
+            <CmAppBarTab icon={<EmojiObjects fontSize='small' />} label='Solutions' />
+            <CmAppBarTab icon={<Home fontSize="small" />} label='Hub' />
             <CmAppBarTab icon={<Announcement fontSize='small' />} label='Myths' />
+            <CmAppBarTab icon={<Star fontSize="small" />} label="Badges" />
           </CmAppBarTabs>
         </div>
       )}
@@ -95,7 +96,6 @@ function CmAppBar({ onShowMenu }: Props) {
 const styles: { [key: string]: React.CSSProperties } = {
   root: {
     backgroundColor: '#07373b',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.5)',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',