Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vouchers

Browse Source
This commit is contained in:
npcdazai
2024-10-01 18:22:13 +05:30
parent c8898ebd32
commit d754fd7479
2 changed files with 163 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
View File

@@ -1,5 +1,5 @@
import { Box, Button, Image, Text } from "@chakra-ui/react";
import React from "react";
import React, { useState } from "react";
import parkeAvenue from "../../assets/parkeAvenue.png";
import bewakoof from "../../assets/bewakoof.png";
import hm from "../../assets/HM.png";
@@ -25,25 +25,7 @@ import {
FaPlane,
FaHeart,
} from "react-icons/fa";
const tabData = [
{ label: "All", icon: FaTv, content: <Cards /> },
{ label: "Electronics", icon: FaTv, content: "Content for Electronics" },
{
label: "Ecommerce",
icon: FaShoppingCart,
content: "Content for Ecommerce",
},
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
{
label: "Food & Beverages",
icon: FaUtensils,
content: "Content for Food & Beverages",
},
{ label: "Clothing", icon: FaTshirt, content: "Content for Clothing" },
{ label: "Travel", icon: FaPlane, content: "Content for Travel" },
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
];
import { useNavigate } from "react-router-dom";
const brands = [
{
@@ -81,6 +63,38 @@ const brands = [
];
const BuyVoucher = () => {
const [selectedCard, setSelectedCard] = useState(null);
const navigate = useNavigate();
const handleSelectCard = (index) => {
setSelectedCard(index);
};
const handleProceed = () => {
if (selectedCard !== null) {
navigate("/buy-voucher-card"); // Proceed with the selected card
}
};
const tabData = [
{ label: "All", icon: FaTv, content: <Cards handleSelectCard={handleSelectCard} handleProceed={handleProceed} selectedCard={selectedCard} setSelectedCard={setSelectedCard} navigate={navigate} /> },
{ label: "Electronics", icon: FaTv, content: "Content for Electronics" },
{
label: "Ecommerce",
icon: FaShoppingCart,
content: "Content for Ecommerce",
},
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
{
label: "Food & Beverages",
icon: FaUtensils,
content: "Content for Food & Beverages",
},
{ label: "Clothing", icon: FaTshirt, content: "Content for Clothing" },
{ label: "Travel", icon: FaPlane, content: "Content for Travel" },
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
];
return (
<Box
bgColor="#F3F3F9"
@@ -129,7 +143,16 @@ const BuyVoucher = () => {
</TabPanels>
</Tabs>
<Button bgColor="#6311CB" color="white" px="3rem" _hover={{bgColor:"#6311CB"}}>Proceed to add</Button>
<Button
bgColor="#6311CB"
color="white"
px="3rem"
_hover={{ bgColor: "#6311CB" }}
onClick={handleProceed}
mt={"3rem"}
>
Proceed to add
</Button>
</Box>
</Box>
);

260
src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
View File

@@ -1,4 +1,4 @@
import { Box, HStack, Text, VStack, Link } from "@chakra-ui/layout";
import { Box, HStack, Text, VStack, Link , Grid} from "@chakra-ui/layout";
import React, { useEffect, useRef, useState } from "react";
import { OPACITY_ON_LOAD, SLIDE_IN_BOTTOM } from "../../../Layout/animations";
import amazonVoucher from "../../../assets/amazonlogo.png";
@@ -107,154 +107,132 @@ const brandData = [
},
];
const MyVoucher = () => {
const [selectedCard, setSelectedCard] = useState(null);
const navigate = useNavigate();
const handleSelectCard = (index) => {
setSelectedCard(index);
};
const handleProceed = () => {
if (selectedCard !== null) {
navigate("/buy-voucher-card"); // Proceed with the selected card
}
};
const MyVoucher = ({handleSelectCard,handleProceed, selectedCard , setSelectedCard }) => {
const navigate = useNavigate();
return (
<RadioGroup onChange={handleSelectCard} value={selectedCard}>
<HStack
{...SLIDE_IN_BOTTOM}
mt={2}
gap={4}
flexWrap={"wrap"}
justifyContent={"center"}
w={"100%"}
h="100%"
>
{brandData?.map(
(
{
brandColor,
brandLogo,
cardWorth,
brandName,
caption,
dateTime,
brandColor1,
textColor,
capColor,
},
index
) => {
const tiltRef = useRef(null);
useEffect(() => {
const node = tiltRef.current;
if (node) {
VanillaTilt.init(node, {
max: 13,
speed: 700,
glare: true,
scale: 1.05,
"max-glare": 0.5,
onEnter: () => {
node.style.zIndex = 10; // Bring to top on hover
},
onLeave: () => {
node.style.zIndex = 1; // Reset zIndex after hover
},
});
<RadioGroup onChange={handleSelectCard} value={selectedCard}>
<Grid
{...SLIDE_IN_BOTTOM}
mt={2}
gap={4}
w="100%"
h="100%"
// gridTemplateColumns="repeat(auto-fit, minmax(250px, 1fr))"
gridTemplateColumns="repeat(4, 1fr)"
justifyContent="center"
>
{brandData?.map(
(
{
brandColor,
brandLogo,
cardWorth,
brandName,
caption,
dateTime,
brandColor1,
textColor,
capColor,
},
index
) => {
const tiltRef = useRef(null);
useEffect(() => {
const node = tiltRef.current;
if (node) {
VanillaTilt.init(node, {
max: 13,
speed: 700,
glare: true,
scale: 1.05,
"max-glare": 0.5,
onEnter: () => {
node.style.zIndex = 10; // Bring to top on hover
},
onLeave: () => {
node.style.zIndex = 1; // Reset zIndex after hover
},
});
}
return () => {
if (node && node.vanillaTilt) {
node.vanillaTilt.destroy();
}
return () => {
if (node && node.vanillaTilt) {
node.vanillaTilt.destroy();
}
};
}, [tiltRef]);
return (
<Box
cursor={"grab"}
key={index}
ref={tiltRef}
overflow={"hidden"}
shadow={"md"}
w={{ base: "30%" }}
h={"100%"}
bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
rounded={10}
p={2}
};
}, [tiltRef]);
return (
<Box
cursor="grab"
key={index}
ref={tiltRef}
overflow="hidden"
shadow="md"
w="100%"
h="100%"
bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
rounded={10}
p={2}
>
<HStack
pb={1}
justifyContent="space-between"
pt={3}
ps={3}
pe={3}
>
<HStack
pb={1}
justifyContent={"space-between"}
pt={3}
ps={3}
pe={3}
<Radio value={index} />
{/* <Image src={optifiiLogo} /> */}
</HStack>
<VStack
color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
gap={1}
>
<Image src={brandLogo} h="43px" />
<Text
fontWeight={600}
color={`${textColor}`}
as="span"
fontSize="sm"
>
<Radio value={index} />
{/* <Image src={optifiiLogo} /> */}
</HStack>
<VStack
color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
gap={1}
30% cashback
</Text>
{/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
$ {cardWorth}
</Text> */}
<Text
align="center"
as="span"
fontWeight={600}
fontSize="x-small"
color={`${capColor}`}
>
<Image src={brandLogo} h="43px" />
<Text
fontWeight={600}
color={`${textColor}`}
as={"span"}
fontSize={"sm"}
>
30% cashback
{caption}
</Text>
<Box
display="flex"
flexDirection="row"
alignItems="center"
w="100%"
justifyContent="space-between"
>
<Text color={`${textColor}`} fontSize="x-small">
{brandName}
</Text>
{/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
$ {cardWorth}
</Text> */}
<Text
align="center"
as={"span"}
fontWeight={600}
fontSize={"x-small"}
color={`${capColor}`}
>
{caption}
<Text color={`${textColor}`} fontSize="x-small">
{dateTime}
</Text>
<Box
display="flex"
flexDirection="row"
alignItems="center"
w="100%"
justifyContent="space-between"
>
<Text color={`${textColor}`} fontSize={"x-small"}>
{brandName}
</Text>
<Text color={`${textColor}`} fontSize={"x-small"}>
{dateTime}
</Text>
</Box>{" "}
{/* Radio button for selecting the card */}
{/* <Button
bg={"#fff"}
mt={2}
px={5}
py={1}
border={"1px solid purple"}
size={"xs"}
onClick={handleProceed}
isDisabled={selectedCard !== index}
>
Buy Voucher
</Button> */}
</VStack>
</Box>
);
}
)}
</HStack>
</RadioGroup>
</Box>
</VStack>
</Box>
);
}
)}
</Grid>
</RadioGroup>
);
};