479 lines
17 KiB
JavaScript
479 lines
17 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Heading,
|
|
HStack,
|
|
Image,
|
|
Modal,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Progress,
|
|
Spinner,
|
|
Stack,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import Mobile from "../assets/mobileWing.png";
|
|
import mobileBanner from "../assets/welcome.avif";
|
|
import { GrDownload } from "react-icons/gr";
|
|
import { LuClock } from "react-icons/lu";
|
|
import { GiNetworkBars } from "react-icons/gi";
|
|
import { GrLinkedinOption } from "react-icons/gr";
|
|
import { FiInstagram } from "react-icons/fi";
|
|
import { IoBatteryHalf } from "react-icons/io5";
|
|
import { BiWifi } from "react-icons/bi";
|
|
import { useGetIOByIdQuery } from "../Services/io.service";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import FullscreenLoaders from "./Loaders/FullscreenLoaders";
|
|
import { calculatePercentage, formatDate } from "../Constants/Constants";
|
|
import { BsFileText } from "react-icons/bs";
|
|
|
|
const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
|
|
const [time, setTime] = useState(new Date());
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
const id = actionId;
|
|
|
|
const {
|
|
data: IObyID,
|
|
isLoading: IObyIDisLoading,
|
|
error: IObyIDerror,
|
|
} = useGetIOByIdQuery(id, { skip: !id });
|
|
|
|
console.log(IObyID);
|
|
|
|
const keyMerits = IObyID?.data?.keyMerits || [];
|
|
const artifactsImage = IObyID?.data?.artifactsImage || [];
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = (date) => {
|
|
return date.toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
});
|
|
};
|
|
|
|
console.log(
|
|
calculatePercentage(
|
|
IObyID?.data?.totalAmtInvestmentInUSD,
|
|
IObyID?.data?.goalAmount
|
|
)
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
display={"flex"}
|
|
size={"xl"}
|
|
justifyContent={"center"}
|
|
isCentered
|
|
finalFocusRef={finalRef}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
>
|
|
<ModalOverlay
|
|
backdropFilter="blur(5px)" // Add this line for backdrop blur
|
|
bg="rgba(0, 0, 0, 0.4)" // Optional: Adjust the overlay color and opacity
|
|
/>
|
|
<ModalContent backgroundColor={"transparent"} shadow={"none"}>
|
|
<HStack w={"100"} display={"flex"} justify={"center"}>
|
|
<Box
|
|
as="span"
|
|
boxShadow={"none"}
|
|
position={"relative"}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
h={"600px"}
|
|
w={"320px"}
|
|
sx={{
|
|
"@media (max-width: 2024px)": {
|
|
height: "695px",
|
|
width: "360px",
|
|
},
|
|
"@media (max-width: 1440px)": {
|
|
height: "600px",
|
|
width: "320px",
|
|
},
|
|
}}
|
|
>
|
|
<Image
|
|
h={"100%"}
|
|
w={"100%"}
|
|
src={Mobile}
|
|
position={"absolute"}
|
|
top={"0"}
|
|
left={"0"}
|
|
/>
|
|
<Box
|
|
backgroundColor={"#fff"}
|
|
h={"98%"}
|
|
w={"96%"}
|
|
// m={2}
|
|
borderRadius={"47px"}
|
|
pt={"36px"}
|
|
px={"15px"}
|
|
>
|
|
{IObyIDisLoading ? (
|
|
<Box
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
h={"100%"}
|
|
>
|
|
<Spinner thickness="3px" color="purple.900" size="lg" />
|
|
</Box>
|
|
) : (
|
|
<>
|
|
<Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
position={"absolute"}
|
|
left={"30px"}
|
|
top={"18px"}
|
|
>
|
|
<Text ml={1} mb={0}>
|
|
<GiNetworkBars fontSize={"10px"} />
|
|
</Text>
|
|
<Text ml={1} mb={0} fontSize={"10px"}>
|
|
{formatTime(time)}
|
|
</Text>
|
|
<Text ml={"5px"} mb={0}>
|
|
<GrLinkedinOption fontSize={"10px"} />
|
|
</Text>
|
|
{/* <Text ml={1} mb={0}><FiInstagram fontSize={"10px"} /></Text> */}
|
|
</Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
position={"absolute"}
|
|
right={"36px"}
|
|
top={"17px"}
|
|
>
|
|
<Text mb={0}>
|
|
<BiWifi fontSize={"14px"} />
|
|
</Text>
|
|
<Text ml={1} mb={0}>
|
|
<IoBatteryHalf fontSize={"15px"} />
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
p={"10px"}
|
|
overflowY={"scroll"}
|
|
h={"483px"}
|
|
zIndex={"99"}
|
|
position={"relative"}
|
|
borderBottomLeftRadius={"23px"}
|
|
borderBottomRightRadius={"23px"}
|
|
sx={{
|
|
"@media (max-width: 2024px)": {
|
|
height: "575px",
|
|
},
|
|
"@media (max-width: 1440px)": {
|
|
height: "483px",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
mb={4}
|
|
bg={"#f5f8f6"}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Box position={"relative"}>
|
|
<Text
|
|
position={"absolute"}
|
|
top={"12px"}
|
|
left={"10px"}
|
|
backgroundColor={"#e4f6ea"}
|
|
fontSize={"10px"}
|
|
fontWeight={500}
|
|
color="green"
|
|
p={"7px 12px"}
|
|
borderRadius={"20px"}
|
|
>
|
|
Stock
|
|
</Text>
|
|
<Text
|
|
position={"absolute"}
|
|
top={"12px"}
|
|
right={"10px"}
|
|
fontSize={"10px"}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
fontWeight={500}
|
|
backgroundColor={"#fff"}
|
|
p={"7px 12px"}
|
|
borderRadius={"20px"}
|
|
>
|
|
<LuClock color="#d8804e" />{" "}
|
|
<Text mb={0} ml={1}>
|
|
Closing Date {formatDate(IObyID?.data?.closingDate)}
|
|
</Text>
|
|
</Text>
|
|
{artifactsImage?.[0]?.artifactPathName && (
|
|
<Image
|
|
borderTopLeftRadius={"20px"}
|
|
borderTopRightRadius={"20px"}
|
|
h={"130px"}
|
|
w={"100%"}
|
|
src={
|
|
import.meta.env.VITE_IMAGE_URL+
|
|
artifactsImage[0]?.artifactPathName
|
|
}
|
|
/>
|
|
)}
|
|
</Box>
|
|
<Stack mt="3" bg={"#fff"} py={4} px={4}>
|
|
<Text
|
|
fontSize={"sm"}
|
|
fontWeight={"500"}
|
|
color={"#000"}
|
|
mb={0}
|
|
>
|
|
{IObyID?.data?.investmentType?.investmentTypeName}
|
|
</Text>
|
|
<Heading fontSize="16px" color={"#004717"}>
|
|
BHD {IObyID?.data?.goalAmount}
|
|
</Heading>
|
|
<Progress
|
|
colorScheme="green"
|
|
size="sm"
|
|
value={calculatePercentage(
|
|
IObyID?.data?.totalAmtInvestmentInUSD,
|
|
IObyID?.data?.goalAmount
|
|
)}
|
|
borderRadius={"3px"}
|
|
/>
|
|
<Text
|
|
color={"#4e4e4e"}
|
|
fontSize={"xs"}
|
|
fontWeight={600}
|
|
mb={0}
|
|
>
|
|
{parseFloat(
|
|
calculatePercentage(
|
|
IObyID?.data?.totalAmtInvestmentInUSD,
|
|
IObyID?.data?.goalAmount
|
|
) || 0
|
|
).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
% funded
|
|
</Text>
|
|
<Text
|
|
fontSize={"xs"}
|
|
fontWeight={500}
|
|
mb={0}
|
|
color={"#9d9d9d"}
|
|
>
|
|
{IObyID?.data?.descriptionEnglish}
|
|
</Text>
|
|
</Stack>
|
|
<Box py={4} px={4}>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"xs"}
|
|
mb={1}
|
|
fontWeight={500}
|
|
color={"#616161"}
|
|
>
|
|
Sponsor name:
|
|
</Text>
|
|
<Text fontSize={"xs"} mb={1} fontWeight={500}>
|
|
{IObyID?.data?.sponsor?.sponsorName}
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"xs"}
|
|
mb={1}
|
|
fontWeight={500}
|
|
color={"#616161"}
|
|
>
|
|
Estimated return:
|
|
</Text>
|
|
<Text fontSize={"xs"} mb={1} fontWeight={500}>
|
|
{IObyID?.data?.expectedReturn}
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"xs"}
|
|
mb={1}
|
|
fontWeight={500}
|
|
color={"#616161"}
|
|
>
|
|
Hoiding period:
|
|
</Text>
|
|
<Text fontSize={"xs"} mb={1} fontWeight={500}>
|
|
{IObyID?.data?.holdingPeriod}
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"xs"}
|
|
mb={1}
|
|
fontWeight={500}
|
|
color={"#616161"}
|
|
>
|
|
Minimum investment:
|
|
</Text>
|
|
<Text fontSize={"xs"} mb={1} fontWeight={500}>
|
|
{
|
|
IObyID?.data?.minInvestmentAmt?.[0]?.country
|
|
?.minInvestmentAmt
|
|
}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={5}
|
|
bg={"#f5f8f6"}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Key Merits
|
|
</Heading>
|
|
<Box>
|
|
{keyMerits &&
|
|
keyMerits.map((item, index) => (
|
|
<Box display={"flex"} alignItems={"center"}>
|
|
<Image
|
|
rounded={"md"}
|
|
display={"flex"}
|
|
p={1}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
src={
|
|
import.meta.env.VITE_IMAGE_URL+
|
|
item?.icon.iconFilePath
|
|
}
|
|
w={8}
|
|
h={8}
|
|
/>
|
|
<Text fontSize={"xs"} mb={0}>
|
|
{item?.meritsDescription}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={5}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Investment Documents
|
|
</Heading>
|
|
<Box
|
|
bg={"#f5f8f6"}
|
|
w={"150px"}
|
|
p={3}
|
|
borderRadius={"10px"}
|
|
>
|
|
<Box display={"flex"} alignItems={"center"} mb={2}>
|
|
{/* <Image
|
|
me={1}
|
|
src="https://tanami.betadelivery.com/public/icons/icon8.svg"
|
|
/> */}
|
|
<BsFileText color="forestGreen" fontSize="18px" />
|
|
<Text fontSize={"xs"} mb={0} ml={2}>
|
|
{IObyID?.data?.documents?.[0]?.documentName}
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
justifyContent={"space-between"}
|
|
>
|
|
<Text mb={0} fontSize={"sm"}>
|
|
{IObyID?.data?.documents?.[0]?.documentSize}
|
|
</Text>
|
|
<GrDownload fontSize={"15px"} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={4}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Videos
|
|
</Heading>
|
|
<video
|
|
autoPlay
|
|
loop
|
|
controls
|
|
style={{
|
|
borderRadius: "18px",
|
|
width: "100%",
|
|
height: "auto",
|
|
}}
|
|
>
|
|
<source
|
|
src={
|
|
import.meta.env.VITE_IMAGE_URL+IObyID?.data?.artifactsVideo?.[0]
|
|
?.artifactStreamingURL
|
|
}
|
|
type="video/mp4"
|
|
style={{ height: "200px" }}
|
|
/>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
position={"relative"}
|
|
p={4}
|
|
background={"#fff"}
|
|
padding={"24px"}
|
|
paddingBottom={"3px"}
|
|
borderBottomLeftRadius={"30px"}
|
|
borderBottomRightRadius="30px"
|
|
>
|
|
<Button
|
|
margin={"auto"}
|
|
width={"85%"}
|
|
bottom="10px"
|
|
left="0"
|
|
colorScheme="forestGreen"
|
|
mr={3}
|
|
w={"100%"}
|
|
fontWeight={500}
|
|
borderRadius={"20px"}
|
|
>
|
|
Invest
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</HStack>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default MobileView;
|