Add org name and logo to org home page

src/__test__/__mockData__/organization.ts

@@ -0,0 +1,20 @@
+import { Organization } from 'store/main';
+
+export const organizations: Organization[] = [
+  {
+    created: "2024-01-18T17:10:43.329567Z",
+    deleted: false,
+    description: "This is a test organization for the Org Homepage Epic.",
+    github: "https://github.com/stakwork/sphinx-tribes",
+    id: "67",
+    img: "https://memes.sphinx.chat/public/UPWRvxiceSND60S9_7XwQGtj8MmPsQ1_ijX8aUR7kZ8=",
+    name: "E's Fun Club",
+    owner_pubkey: "021ae436bcd40ca21396e59be8cdb5a707ceacdb35c1d2c5f23be7584cab29c40b",
+    show: false,
+    updated: "2024-01-18T17:10:43.329567Z",
+    uuid: "cmkln4tm098m49vhlt80",
+    website: "https://ecurrencyhodler.com/",
+  }
+];
+
+export const organization = organizations[0];

src/pages/tickets/org/OrgTickets.tsx

@@ -24,7 +24,7 @@ function OrgBodyComponent() {
   const [checkboxIdToSelectedMapLanguage, setCheckboxIdToSelectedMapLanguage] = useState({});
   const { uuid } = useParams<{ uuid: string; bountyId: string }>();
   const [languageString, setLanguageString] = useState('');
-  const [organizationUrls, setOrganizationUrls] = useState({});
+  const [organizationData, setOrganizationData] = useState({});
 
   const color = colors['light'];
 
@@ -42,8 +42,8 @@ function OrgBodyComponent() {
           resetPage: true,
           languages: languageString
         });
-        const orgUrls = await api.get(`organizations/${uuid}`);
-        setOrganizationUrls(orgUrls);
+        const orgData = await api.get(`organizations/${uuid}`);
+        setOrganizationData(orgData);
       }
       setLoading(false);
     })();
@@ -167,7 +167,7 @@ function OrgBodyComponent() {
         }}
       >
         <OrgHeader
-          organizationUrls={organizationUrls}
+          organizationData={organizationData}
           onChangeStatus={onChangeStatus}
           onChangeLanguage={onChangeLanguage}
           checkboxIdToSelectedMap={checkboxIdToSelectedMap}

src/pages/tickets/org/orgHeader/index.tsx

@@ -21,31 +21,126 @@ interface styledProps {
   color?: any;
 }
 const color = colors['light'];
+
+const FillContainer = styled.div`
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-self: stretch;
+  background: #fff;
+  border-bottom: 1px solid var(--Input-BG-1, #f2f3f5);
+`;
+
 const Header = styled.div`
   display: flex;
+  min-width: 1366px;
   height: 130px;
-  padding: 45px 20px 45px 130px;
-  justify-content: center;
   align-items: center;
   align-self: stretch;
-  border-bottom: 1px solid var(--Input-BG-1, #f2f3f5);
+  padding: 0 130px;
   background: #fff;
+  @media (max-width: 1140px) {
+    min-width: 90%;
+    padding: 0;
+  }
 `;
 
-const UrlButtonContainer = styled.div`
-  width: 180px;
+const OrgDetails = styled.div`
   display: flex;
-  gap: 8px;
+  flex: 4;
   justify-content: space-between;
-  margin-top: 40px;
-  margin-right: 690px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+`;
+
+const OrgDetailsLeft = styled.div`
+  display: flex;
+
+`;
+
+const OrgDetailsRight = styled.div`
+  display: flex;
+  justify-contents: flex-end;
+  align-items: center;
+
+`;
+
+const OrgLogo = styled.img`
+  width: 72px;
+  height: 72px;
+  border-radius: 66px;
+
+`;
+
+const OrgNameLinks = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 20px;
+
+`;
+
+const OrgName = styled.p`
+  color: var(--Text-2, #3c3f41);
+  font-family: Barlow;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  margin: 0;
+  text-wrap: nowrap;
+`;
+
+const OrgLinks = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
   margin-left: 0px;
 `;
 
-const FillContainer = styled.div`
-  width: 100vw;
-  align-self: stretch;
-  background: #fff;
+const SmallButton = styled.a`
+  border-radius: 4px;
+  border: 1px solid var(--Divider-2, #dde1e5);
+  display: flex;
+  width: auto;
+  height: 28px;
+  padding: 0px 10px 0px 7px;
+  align-items: center;
+  gap: 6px;
+  color: var(--Main-bottom-icons, #5f6368);
+  text-decoration: none;
+  cursor: pointer;
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  outline: none;
+  &:hover {
+    text-decoration: none;
+    color: var(--Main-bottom-icons, #5f6368);
+    border: 1px solid var(--Disabled-Icon-color, #B0B7BC);
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+const OrgDetailsText = styled.div`
+  overflow: hidden;
+  color: var(--Main-bottom-icons, #5F6368);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  text-overflow: ellipsis;
+  font-family: Barlow;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  width: 403px;
+
 `;
 
 const Filters = styled.div`
@@ -99,28 +194,6 @@ const Button = styled.button`
   letter-spacing: 0.14px;
 `;
 
-const UrlButton = styled.button`
-  border-radius: 4px;
-  margin-right: auto;
-  border: 1px solid #dde1e5;
-  background: #ffffff;
-  display: flex;
-  width: 85px;
-  height: 28px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  color: var(--Black, #5f6368);
-  text-align: center;
-  font-family: 'Barlow';
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 0px; /* 0% */
-  letter-spacing: 0.14px;
-`;
-
 const FilterLabel = styled.label`
   color: var(--Main-bottom-icons, #5f6368);
   font-family: Barlow;
@@ -414,13 +487,13 @@ const StatusContainer = styled.div<styledProps>`
 
 const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
 export const OrgHeader = ({
+  organizationData,
   onChangeLanguage,
   checkboxIdToSelectedMapLanguage,
   onChangeStatus,
   checkboxIdToSelectedMap,
   org_uuid,
-  languageString,
-  organizationUrls
+  languageString
 }: OrgBountyHeaderProps) => {
   const { main, ui } = useStores();
   const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
@@ -447,7 +520,14 @@ export const OrgHeader = ({
 
   const selectedWidget = 'wanted';
   const filterRef = useRef<HTMLDivElement | null>(null);
-  const { website, github } = organizationUrls;
+
+  const handlePostBountyClick = () => {
+    setIsPostBountyModalOpen(true);
+  };
+  const handlePostBountyClose = () => {
+    setIsPostBountyModalOpen(false);
+  };
+
 
   useEffect(() => {
     if (org_uuid) {
@@ -460,6 +540,7 @@ export const OrgHeader = ({
     }
   }, [org_uuid, checkboxIdToSelectedMap, main, languageString]);
 
+
   const handleClick = () => {
     setFilterClick(!filterClick);
   };
@@ -484,26 +565,45 @@ export const OrgHeader = ({
     <>
       <FillContainer>
         <Header>
-          <UrlButtonContainer data-testid="url-button-container">
-            {website !== '' ? (
-              <UrlButton onClick={() => window.open(website, '_blank')}>
-                <img src={websiteIcon} alt="" />
-                Website
-              </UrlButton>
-            ) : null}
-            {github !== '' ? (
-              <UrlButton onClick={() => window.open(github, '_blank')}>
-                <img src={githubIcon} alt="" />
-                Github
-              </UrlButton>
-            ) : null}
-          </UrlButtonContainer>
-          {canPostBounty && (
-            <Button onClick={() => setIsPostBountyModalOpen(true)}>
-              <img src={addBounty} alt="" />
-              Post a Bounty
-            </Button>
-          )}
+          <OrgDetails>
+              <OrgDetailsLeft>
+                <OrgLogo src={organizationData?.img || '/static/orgdefault.png'} alt={organizationData?.name + ' logo'}/>
+                <OrgNameLinks>
+                  <OrgName>{organizationData?.name || ''}</OrgName>
+                  <OrgLinks data-testid="url-button-container">
+                    {
+                      organizationData?.github &&
+                      <SmallButton href={organizationData?.website} target="_blank">
+                        <img src={websiteIcon} alt="globe-website icon" />
+                        <span>Website</span>
+                      </SmallButton>
+                    }
+                    {
+                      organizationData?.website &&
+                      <SmallButton href={organizationData?.github} target="_blank">
+                        {' '}
+                        <img src={githubIcon} alt="github icon" />
+                        <span>Github</span>
+                      </SmallButton>
+                    }
+
+                  </OrgLinks>
+
+                </OrgNameLinks>
+              </OrgDetailsLeft>
+              <OrgDetailsRight>
+                <OrgDetailsText>{organizationData?.description || ''}</OrgDetailsText>
+              </OrgDetailsRight>
+            </OrgDetails>
+            <ButtonContainer>
+               {canPostBounty && (
+                  <Button onClick={() => handlePostBountyClick()}>
+                    <img src={addBounty} alt="" />
+                    Post a Bounty
+                  </Button>
+                )}
+            </ButtonContainer>
+
         </Header>
       </FillContainer>
       <FillContainer>

src/people/interfaces.ts

@@ -16,7 +16,7 @@ export interface BountyModalProps {
 }
 
 export interface OrgBountyHeaderProps {
-  organizationUrls: any;
+  organizationData: any;
 }
 
 export interface FocusViewProps {

src/people/widgetViews/__tests__/OrgHeader.spec.tsx

@@ -39,9 +39,19 @@ const MockProps: OrgBountyHeaderProps = {
   org_uuid: 'clf6qmo4nncmf23du7ng',
   onChangeStatus: jest.fn(),
   onChangeLanguage: jest.fn(),
-  organizationUrls: {
-    github: 'https://github.com/stakwork/sphinx-tribes',
-    website: 'https://ecurrencyhodler.com/'
+  organizationData: {
+    created: "2024-01-18T17:10:43.329567Z",
+    deleted: false,
+    description: "This is a test organization for the Org Homepage Epic.",
+    github: "https://github.com/stakwork/sphinx-tribes",
+    id: "67",
+    img: "https://memes.sphinx.chat/public/UPWRvxiceSND60S9_7XwQGtj8MmPsQ1_ijX8aUR7kZ8=",
+    name: "E's Fun Club",
+    owner_pubkey: "021ae436bcd40ca21396e59be8cdb5a707ceacdb35c1d2c5f23be7584cab29c40b",
+    show: false,
+    updated: "2024-01-18T17:10:43.329567Z",
+    uuid: "cmkln4tm098m49vhlt80",
+    website: "https://ecurrencyhodler.com/",
   }
 };
 describe('OrgHeader Component', () => {
@@ -154,4 +164,10 @@ describe('OrgHeader Component', () => {
     const containerStyle = window.getComputedStyle(urlButtonContainer);
     expect(containerStyle.marginLeft).toBe('0px');
   });
+
+  it('renders the component with organization logo and name', async () => {
+    render( <OrgHeader {...MockProps} />);
+    waitFor(() => expect(screen.findByText(MockProps.organizationData.name)).toBeInTheDocument());
+    waitFor(() => expect(screen.findByAltText(`${MockProps.organizationData.name} logo`)).toBeInTheDocument()); 
+  });
 });

src/store/main.ts

@@ -2070,6 +2070,25 @@ export class MainStore {
     }
   }
 
+    //for a user who is not logged in
+    async getOrganizationByUuid(uuid: string): Promise<Organization | undefined> {
+      try {
+        const r: any = await fetch(`${TribesURL}/organizations/${uuid}`, {
+          method: 'GET',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        });
+
+        const data = await r.json();
+        return await data;
+      } catch (e) {
+        console.log('Error getOrganizationByUuid', e);
+        return undefined;
+      }
+    }
+
   @action async addOrganization(body: CreateOrganizationInput): Promise<any> {
     try {
       if (!uiStore.meInfo) return null;