Merge pull request #10079 from hicommonwealth/marcin/10063/ui-referal…

…-boards [Referrals] - UI components pt.2
hicommonwealth · Dec 3, 2024 · bf5718a · bf5718a
2 parents 1ebaadf + 2f8b463
commit bf5718a
Show file tree

Hide file tree

Showing 15 changed files with 573 additions and 60 deletions.
diff --git a/packages/commonwealth/client/scripts/styles/mixins/table.scss b/packages/commonwealth/client/scripts/styles/mixins/table.scss
@@ -0,0 +1,33 @@
+@mixin table-cell {
+  .table-cell {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .user-info {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: black;
+
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      :hover,
+      :focus,
+      :visited {
+        text-decoration: underline;
+      }
+    }
+
+    &.text-right {
+      display: block;
+      text-align: right;
+    }
+  }
+}
diff --git a/packages/commonwealth/client/scripts/styles/shared.scss b/packages/commonwealth/client/scripts/styles/shared.scss
@@ -8,6 +8,7 @@
 @import 'mixins/inputs';
 @import 'mixins/icons';
 @import 'mixins/text';
+@import 'mixins/table';
 @import 'utils';
 
 // layout & global nav parameters

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx b/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx
@@ -139,7 +139,11 @@ const Profile = ({ userId }: ProfileProps) => {
           >
             {/* @ts-expect-error StrictNullChecks*/}
             <ProfileHeader profile={profile} isOwner={isOwner} />
-            <ProfileActivity threads={threads} comments={comments} />
+            <ProfileActivity
+              threads={threads}
+              comments={comments}
+              isOwner={isOwner}
+            />
           </div>
         </CWPageLayout>
       </div>
@@ -151,7 +155,11 @@ const Profile = ({ userId }: ProfileProps) => {
           <div className="ProfilePageContainer">
             {/* @ts-expect-error StrictNullChecks*/}
             <ProfileHeader profile={profile} isOwner={isOwner} />
-            <ProfileActivity threads={threads} comments={comments} />
+            <ProfileActivity
+              threads={threads}
+              comments={comments}
+              isOwner={isOwner}
+            />
           </div>
         </div>
       </CWPageLayout>

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivity.scss b/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivity.scss
@@ -17,6 +17,7 @@
 
     .CWTabsRow {
       align-items: center;
+      overflow: auto;
 
       .tab-header {
         display: flex;

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivity.tsx b/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivity.tsx
@@ -2,18 +2,14 @@ import React, { useState } from 'react';
 
 import './ProfileActivity.scss';
 
+import { useFlag } from 'hooks/useFlag';
 import type Comment from 'models/Comment';
 import type Thread from 'models/Thread';
 import type { IUniqueId } from 'models/interfaces';
 import { CWTab, CWTabsRow } from '../component_kit/new_designs/CWTabs';
-import ProfileActivityContent from './ProfileActivityContent';
-
-enum ProfileActivityType {
-  Addresses,
-  Comments,
-  Communities,
-  Threads,
-}
+import ProfileActivityContent, {
+  ProfileActivityType,
+} from './ProfileActivityContent';
 
 export type CommentWithAssociatedThread = Comment<IUniqueId> & {
   thread: Thread;
@@ -22,13 +18,20 @@ export type CommentWithAssociatedThread = Comment<IUniqueId> & {
 type ProfileActivityProps = {
   comments: CommentWithAssociatedThread[];
   threads: Thread[];
+  isOwner: boolean | undefined;
 };
 
-const ProfileActivity = ({ comments, threads }: ProfileActivityProps) => {
+const ProfileActivity = ({
+  comments,
+  threads,
+  isOwner,
+}: ProfileActivityProps) => {
   const [selectedActivity, setSelectedActivity] = useState(
     ProfileActivityType.Comments,
   );
 
+  const referralsEnabled = useFlag('referrals');
+
   return (
     <div className="ProfileActivity">
       <div className="activity-nav">
@@ -52,13 +55,28 @@ const ProfileActivity = ({ comments, threads }: ProfileActivityProps) => {
             }}
             isSelected={selectedActivity === ProfileActivityType.Threads}
           />
+          {referralsEnabled && (
+            <CWTab
+              isSelected={selectedActivity === ProfileActivityType.Referrals}
+              label={
+                <div className="tab-header">
+                  Referrals
+                  <div className="count">5</div>
+                </div>
+              }
+              onClick={() => {
+                setSelectedActivity(ProfileActivityType.Referrals);
+              }}
+            />
+          )}
         </CWTabsRow>
       </div>
       <div className="activity-content">
         <ProfileActivityContent
           option={selectedActivity}
           threads={threads}
           comments={comments}
+          isOwner={isOwner}
         />
       </div>
     </div>

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivityContent.tsx b/packages/commonwealth/client/scripts/views/components/Profile/ProfileActivityContent.tsx
@@ -6,24 +6,28 @@ import type Thread from 'models/Thread';
 import { CWText } from '../component_kit/cw_text';
 import type { CommentWithAssociatedThread } from './ProfileActivity';
 import ProfileActivityRow from './ProfileActivityRow';
+import ReferralsTab from './ReferralsTab';
 
-enum ProfileActivityType {
+export enum ProfileActivityType {
   Addresses,
   Comments,
   Communities,
   Threads,
+  Referrals,
 }
 
 type ProfileActivityContentProps = {
   option: ProfileActivityType;
   threads: Thread[];
   comments: CommentWithAssociatedThread[];
+  isOwner: boolean | undefined;
 };
 
 const ProfileActivityContent = ({
   option,
   comments,
   threads,
+  isOwner,
 }: ProfileActivityContentProps) => {
   if (option === ProfileActivityType.Threads) {
     if (threads.length === 0) {
@@ -49,6 +53,10 @@ const ProfileActivityContent = ({
     );
   }
 
+  if (option === ProfileActivityType.Referrals) {
+    return <ReferralsTab isOwner={isOwner} />;
+  }
+
   const allActivities: Array<CommentWithAssociatedThread | Thread> = [
     ...comments,
     ...threads,

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/ReferralsTab/ReferralsTab.scss b/packages/commonwealth/client/scripts/views/components/Profile/ReferralsTab/ReferralsTab.scss
@@ -0,0 +1,57 @@
+@import '../../../../styles/shared.scss';
+
+.ReferralsTab {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  input,
+  svg {
+    cursor: pointer !important;
+  }
+
+  input:read-only {
+    background-color: $neutral-50;
+    border-color: $neutral-200;
+    color: $neutral-400;
+
+    &:hover {
+      border-color: $neutral-200;
+    }
+
+    &:focus-within {
+      border-color: $neutral-200 !important;
+      box-shadow: none !important;
+    }
+  }
+
+  table {
+    width: 100%;
+    @include table-cell;
+  }
+
+  .referral-totals {
+    margin-right: 16px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 176px 0;
+
+    @include mediumSmallInclusive {
+      padding: 96px 0;
+    }
+
+    .empty-state-text {
+      color: $neutral-400;
+      text-align: center;
+    }
+  }
+}