Skip to content

Commit 6d006bc

Browse files
raulMarvanWizelineraulMarvanWizeline
authored
Merge pull request #8 from wizeline/feat/GL-52/details-home-page
Feat/gl 52/details home page
2 parents bea8985 + f3f2034 commit 6d006bc

File tree

10 files changed

+181
-35
lines changed

10 files changed

+181
-35
lines changed

‎app/components/common/ShareContent.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { FC } from "react";
2+
import { WhatsappShareButton, LinkedinShareButton } from "react-share";
3+
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
4+
import LinkedInIcon from "@mui/icons-material/LinkedIn";
5+
import { IconButton } from "@mui/material";
6+
import CloseIcon from "@mui/icons-material/Close";
7+
8+
interface ShareContentProps {
9+
url: string;
10+
title: string;
11+
onClose: () => void;
12+
className?: string;
13+
}
14+
15+
const ShareContent: FC<ShareContentProps> = ({
16+
url,
17+
title,
18+
onClose,
19+
className,
20+
}) => {
21+
return (
22+
<div
23+
className={`h-auto max-h-64 border border-top-nav-border rounded overflow-hidden ${className}`}
24+
>
25+
<div className="flex justify-between items-center bg-primary text-white p-2 rounded-t">
26+
<h2 className="ml-2 font-bold text-sm leading-normal font-montserrat mr-4">
27+
Share content
28+
</h2>
29+
<IconButton className="!p-0" onClick={onClose}>
30+
<CloseIcon className="!fill-white" />
31+
</IconButton>
32+
</div>
33+
<div className="overflow-y-auto h-full p-6 bg-secondary">
34+
<div className="flex space-x-2 w-full justify-between">
35+
<WhatsappShareButton
36+
url={url}
37+
title={title}
38+
className="p-2 rounded-full bg-green-500 text-white"
39+
>
40+
<WhatsAppIcon className="!ml-2 !fill-white" />
41+
</WhatsappShareButton>
42+
<LinkedinShareButton
43+
url={url}
44+
title={title}
45+
className="p-2 rounded-full bg-blue-500 text-white"
46+
>
47+
<LinkedInIcon className="!ml-2 !fill-white" />
48+
</LinkedinShareButton>
49+
</div>
50+
</div>
51+
</div>
52+
);
53+
};
54+
55+
export default ShareContent;

‎app/components/information/ModalInformation.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ModalInformation: FC<ModalInformationProps> = ({
4848
className={`fixed top-4 right-4 w-96 h-auto max-h-[90vh] bg-secondary rounded-md p-2 gap-2 overflow-auto !z-40 ${className}`}
4949
>
5050
<div className="flex justify-between items-center mb-2">
51-
<h2 className="text-white border border-primary p-4 mr-2 w-full rounded-md">
51+
<h2 className="text-white border border-primary p-4 mr-2 w-full rounded-md truncate">
5252
{product?.name}
5353
</h2>
5454
<div className="border border-primary rounded-md p-4">
@@ -59,7 +59,7 @@ const ModalInformation: FC<ModalInformationProps> = ({
5959
</div>
6060
<a href={product?.link} target="_blank" rel="noreferrer">
6161
<div className="border border-primary rounded-md p-2 mb-2 flex justify-between p-4 items-center">
62-
<p className="text-blue500 font-montserrat font-medium text-sm leading-[18px]">
62+
<p className="text-blue500 font-montserrat font-medium text-sm leading-[18px] truncate">
6363
{cleanProductLink(product?.link)}
6464
</p>
6565
<OpenInNew className="!fill-primary" />

‎app/components/navigation/TopNavigation.tsx

Lines changed: 71 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
import React, { useState } from "react";
1+
import React, { useEffect, useState } from "react";
22
import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
33
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
44
import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
55
import { Badge, IconButton } from "@mui/material";
66
import { ModalUpdates } from "../updates/ModalUpdates";
77
import { NotificationType } from "~/types";
8+
import {
9+
helpButtonFeatureFlag,
10+
newsButtonFeatureFlag,
11+
} from "~/utils/featureFlags";
12+
import ShareContent from "../common/ShareContent";
813

914
interface Props {
1015
newNotifications: boolean;
@@ -15,52 +20,88 @@ export const TopNavigation: React.FC<Props> = ({
1520
newNotifications,
1621
notifications,
1722
}: Props) => {
18-
const [isModalOpen, setIsModalOpen] = useState(false);
23+
const [isUpdatesModalOpen, setIsUpdatesModalOpen] = useState(false);
24+
const [isShareModalOpen, setIsSharesModalOpen] = useState(false);
25+
const [shareContentUrl, setShareContentUrl] = useState("");
1926

20-
const handleOpenModal = () => {
21-
setIsModalOpen(true);
27+
useEffect(() => {
28+
if (typeof window !== "undefined") {
29+
setShareContentUrl(window.location.origin);
30+
}
31+
}, []);
32+
33+
const handleUpdateOpenModal = () => {
34+
setIsUpdatesModalOpen(true);
35+
};
36+
37+
const handleUpdateCloseModal = () => {
38+
setIsUpdatesModalOpen(false);
2239
};
2340

24-
const handleCloseModal = () => {
25-
setIsModalOpen(false);
41+
const handleShareOpenModal = () => {
42+
setIsSharesModalOpen(true);
2643
};
2744

28-
const handleOnClick = () => {
29-
if (isModalOpen) {
30-
handleCloseModal();
45+
const handleShareCloseModal = () => {
46+
setIsSharesModalOpen(false);
47+
};
48+
49+
const handleUpdateOnClick = () => {
50+
if (isUpdatesModalOpen) {
51+
handleUpdateCloseModal();
3152
} else {
32-
handleOpenModal();
53+
handleUpdateOpenModal();
54+
}
55+
};
56+
57+
const handleShareOnClick = () => {
58+
if (isUpdatesModalOpen) {
59+
handleShareCloseModal();
60+
} else {
61+
handleShareOpenModal();
3362
}
3463
};
3564

3665
return (
3766
<>
38-
<div className="flex justify-between items-center border border-top-nav-border rounded w-28 h-9 p-2 bg-primary">
39-
<IconButton className="!p-0" onClick={() => {}}>
40-
<HelpOutlineOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
41-
</IconButton>
42-
<IconButton className="!p-0" onClick={() => {}}>
67+
<div className="flex justify-between items-center border border-top-nav-border rounded w-auto h-9 p-2 gap-4 bg-primary">
68+
{helpButtonFeatureFlag && (
69+
<IconButton className="!p-0" onClick={() => {}}>
70+
<HelpOutlineOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
71+
</IconButton>
72+
)}
73+
<IconButton className="!p-0" onClick={handleShareOnClick}>
4374
<ShareOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
4475
</IconButton>
45-
<IconButton className="!p-0" onClick={handleOnClick}>
46-
{!newNotifications ? (
47-
<NotificationsOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
48-
) : (
49-
<Badge
50-
overlap="circular"
51-
variant="dot"
52-
color="error"
53-
invisible={!newNotifications}
54-
>
76+
{newsButtonFeatureFlag && (
77+
<IconButton className="!p-0" onClick={handleUpdateOnClick}>
78+
{!newNotifications ? (
5579
<NotificationsOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
56-
</Badge>
57-
)}
58-
</IconButton>
80+
) : (
81+
<Badge
82+
overlap="circular"
83+
variant="dot"
84+
color="error"
85+
invisible={!newNotifications}
86+
>
87+
<NotificationsOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
88+
</Badge>
89+
)}
90+
</IconButton>
91+
)}
5992
</div>
60-
{isModalOpen && (
93+
{isUpdatesModalOpen && (
6194
<ModalUpdates
6295
notifications={notifications}
63-
onClose={handleCloseModal}
96+
onClose={handleUpdateCloseModal}
97+
className="fixed top-14 right-4 z-50"
98+
/>
99+
)}
100+
{isShareModalOpen && shareContentUrl && (
101+
<ShareContent
102+
url={shareContentUrl}
103+
title={"Wizeline Gen AI Map"}
104+
onClose={handleShareCloseModal}
64105
className="fixed top-14 right-4 z-50"
65106
/>
66107
)}

‎app/components/navigation/ViewSwitcher.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ViewSwitcher: FC<ViewSwitcherProps> = ({ onSwitch }) => {
3333
};
3434

3535
return (
36-
<div className="flex justify-between items-center border border-top-nav-border rounded w-28 h-9 p-2 bg-primary fixed right-1/2 transform translate-x-1/2">
36+
<div className="flex justify-between items-center border border-top-nav-border rounded w-auto gap-4 h-9 p-2 bg-primary fixed right-1/2 transform translate-x-1/2">
3737
<IconButton className="!p-0" onClick={handleChartClick}>
3838
<BubbleChart
3939
className={`w-5 h-5 cursor-pointer ${

‎app/components/tables/AIProductTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const AIProductTable: FC<AIProductTableProps> = ({
160160
<div className="mt-6">
161161
<div className="w-[900px] h-[700px] border border-top-nav-border rounded overflow-auto !text-white mt-6 items-center">
162162
<TableContainer className="max-h-[700px]">
163-
<Table>
163+
<Table stickyHeader>
164164
<TableHead>
165165
<TableRow className="bg-primary font-montserrat">
166166
<TableCell className="!text-white-alt">Name</TableCell>

‎app/routes/_index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import AIProductTable from "~/components/tables/AIProductTable";
1313
import { ZoomControl } from "~/components/zoom/ZoomControl";
1414
import { ModalContext } from "~/context/ModalContext";
1515
import { NotificationType } from "~/types";
16+
import { zoomFeatureFlag } from "~/utils/featureFlags";
1617

1718
export const meta: MetaFunction = () => {
1819
return [
@@ -157,7 +158,7 @@ export default function Index() {
157158
<Breadcrumb path={nodeAncestors} />
158159
</div>
159160
)}
160-
{currentView === ViewType.BubbleChart && (
161+
{zoomFeatureFlag && currentView === ViewType.BubbleChart && (
161162
<div className="hidden sm:block absolute bottom-0 right-0 mb-4 mr-4 !z-40">
162163
<ZoomControl
163164
zoomPercentage={zoomPercentage}

‎app/tailwind.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,7 @@ body {
1717
.select-arrow-color .MuiSelect-icon {
1818
color: white !important;
1919
}
20+
21+
.MuiTableCell-stickyHeader {
22+
background-color: #203449 !important;
23+
}

‎app/utils/featureFlags.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Set this flags to True when feature is Ready to render
2+
3+
export const zoomFeatureFlag = false;
4+
export const helpButtonFeatureFlag = false;
5+
export const newsButtonFeatureFlag = false;

‎package-lock.json

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"react": "^18.2.0",
2323
"react-dom": "^18.2.0",
2424
"react-responsive": "^10.0.0",
25+
"react-share": "^5.1.0",
2526
"sunburst-chart": "^1.19.2",
2627
"tailwindcss": "^3.4.1"
2728
},

0 commit comments

Comments
 (0)