diff --git a/package-lock.json b/package-lock.json
index 888f23b..a8d9428 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
"react-router-dom": "^6.22.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
+ "swiper": "^11.1.12",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
@@ -6005,6 +6006,24 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/swiper": {
+ "version": "11.1.12",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.12.tgz",
+ "integrity": "sha512-PUkCToYAZMB4kP7z+YfPnkMHOMwMO71g8vUhz2o5INGIgIMb6Sb0XiP6cEJFsiFTd7FRDn5XCbg+KVKPDZqXLw==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index 4c8b075..2ee0f0e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
"react-router-dom": "^6.22.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
+ "swiper": "^11.1.12",
"uuid": "^10.0.0",
"vanilla-tilt": "^1.8.1",
"xlsx": "^0.18.5",
diff --git a/src/Components/Swiper/SwiperSlider.css b/src/Components/Swiper/SwiperSlider.css
new file mode 100644
index 0000000..ae587b4
--- /dev/null
+++ b/src/Components/Swiper/SwiperSlider.css
@@ -0,0 +1,74 @@
+.swiper{
+ position: relative;
+}
+
+.swiper-slide {
+ width: 50% !important;
+ display: flex !important;
+}
+
+.swiper-slide-active {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+
+.swiper-slide-next,
+.swiper-slide-prev {
+ opacity: 0.7;
+}
+.swiper-slide-active{
+ transform: translate3d(-5px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(0.8) !important;
+}
+
+.swiper-slide-prev {
+ transform: translate3d(60px, 0px, -500px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+
+.swiper-slide-next {
+ transform: translate3d(-40px, 0px, -533.578px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+
+
+.slider-controler {
+ position: relative;
+ bottom: 12rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 5px 0 6px;
+}
+
+.slider-controler .swiper-button-next,
+.slider-controler .swiper-button-prev {
+ background: #fff;
+ color: #3725EA;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ box-shadow: 0px 2px 4px 0px #666666CC;
+
+}
+
+.slider-controler .slider-arrow::after {
+ content: '';
+}
+
+.swiper-pagination {
+ display: none !important;
+}
+
+@media screen and (max-width: 1366px) {
+ .slider-controler .swiper-button-next {
+ margin-right: 10px;
+ }
+ }
+
+ @media screen and (max-width: 1440px) {
+ .slider-controler .swiper-button-next {
+ margin-right: 0px;
+ }
+ }
+
+
+
\ No newline at end of file
diff --git a/src/Components/Swiper/SwiperSlider.jsx b/src/Components/Swiper/SwiperSlider.jsx
new file mode 100644
index 0000000..e2b9b62
--- /dev/null
+++ b/src/Components/Swiper/SwiperSlider.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Box, Image, IconButton } from '@chakra-ui/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import RupayCard from "../../Components/PayCards/RupayCard";
+import Platinium from "../../Components/PayCards/Platinium";
+import PlatiniumGift from "../../Components/PayCards/PlatiniumGift";
+import './SwiperSlider.css';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+// Import required modules
+import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
+
+function SwiperSlider() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+ );
+}
+
+export default SwiperSlider;
diff --git a/src/Pages/AllTicketsModal/AllTicketsModal.jsx b/src/Pages/AllTicketsModal/AllTicketsModal.jsx
new file mode 100644
index 0000000..92ced30
--- /dev/null
+++ b/src/Pages/AllTicketsModal/AllTicketsModal.jsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalCloseButton,
+ Text,
+ Box,
+ HStack,
+ Icon,
+ Divider,
+ Badge,
+ Button,
+ Image,
+ ModalFooter
+} from '@chakra-ui/react';
+import { FiDownload } from "react-icons/fi";
+import NoInternet from "../../assets/noInternet.jpg";
+import { HiOutlineMail } from 'react-icons/hi';
+
+// FileButton component
+const FileButton = ({ fileName, fileSize, imageUrl }) => {
+ return (
+
+ );
+};
+
+// AllTicketsModal component
+const AllTicketsModal = ({ isOpen, onClose }) => {
+ return (
+
+
+
+
+ TA-97868
+
+
+ App loading issue
+
+ In Progress
+
+
+
+
+
+
+ Subtype of the ticket
+
+
+ Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
+
+
+ Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
+
+
+ 2 Attachments
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Assigned to:
+
+
+ Siddhesh
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AllTicketsModal;
diff --git a/src/Pages/Gifts/MyGiftCardsTab.jsx b/src/Pages/Gifts/MyGiftCardsTab.jsx
index f222b55..b38b6ee 100644
--- a/src/Pages/Gifts/MyGiftCardsTab.jsx
+++ b/src/Pages/Gifts/MyGiftCardsTab.jsx
@@ -13,6 +13,7 @@ import { AiOutlineEdit } from "react-icons/ai";
import { RiDeleteBin5Line } from "react-icons/ri";
import { CalendarIcon, PhoneIcon, Search2Icon } from "@chakra-ui/icons";
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
+import SwiperSlider from "../../Components/Swiper/SwiperSlider";
const MyGiftCardsTab = () => {
const { requestsTable } = useContext(GlobalStateContext);
@@ -34,6 +35,38 @@ const MyGiftCardsTab = () => {
"Amount Spent",
];
+ const InternalCard = ({ title1, subTitle1, title2, subbTitle2 }) => {
+ return (
+
+
+
+ {title1}
+
+
+
+ {subTitle1}
+
+
+
+
+
+ {title2}
+
+
+
+ {subbTitle2}
+
+
+
+ );
+ };
+
// Extracted data for table
const extractedArray = requestsTable.map((item, index) => ({
"Transaction Type": (
@@ -154,63 +187,93 @@ const MyGiftCardsTab = () => {
return (
-
-
+
+
+
-
-
-
-
-
-
-
-
- Transactions
-
-
-
-
-
-
-
-
-
-
-
- }
- colorScheme="gray"
- color={"gray.700"}
- variant="outline"
- fontSize={"xs"}
+
+
- Select Date Range
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Transactions
+
+
+
+
+
+
+
+
+
+
+
+ }
+ colorScheme="gray"
+ color={"gray.700"}
+ variant="outline"
+ fontSize={"xs"}
+ >
+ Select Date Range
+
+
+
+
+
+
);
};
diff --git a/src/Pages/HelpAndSupport/HelpAndSupport.jsx b/src/Pages/HelpAndSupport/HelpAndSupport.jsx
index 88b46fe..d0309c9 100644
--- a/src/Pages/HelpAndSupport/HelpAndSupport.jsx
+++ b/src/Pages/HelpAndSupport/HelpAndSupport.jsx
@@ -1,14 +1,597 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import React, { useState, useRef } from "react";
+import {
+ Box,
+ Tabs,
+ Tab,
+ TabList,
+ TabPanels,
+ TabPanel,
+ Accordion,
+ AccordionItem,
+ AccordionButton,
+ AccordionPanel,
+ AccordionIcon,
+ HStack,
+ Text,
+ Input,
+ Textarea,
+ Select,
+ Button,
+ TabIndicator,
+ VStack,
+ Icon,
+ Badge,
+ useDisclosure,
+ Link,
+} from "@chakra-ui/react";
import MiniHeader from "../../Components/MiniHeader";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { CiCalendarDate } from "react-icons/ci";
+import { HiOutlineMail } from "react-icons/hi";
+import AllTicketsModal from "../AllTicketsModal/AllTicketsModal";
const HelpAndSupport = () => {
+ const [value, setValue] = useState(""); // State to store the textarea value
+ const handleInputChange = (event) => setValue(event.target.value); // Update the state with the textarea input value
+
+ const inputRef = useRef(null);
+ const handleFileUpload = () => inputRef.current.click(); // Trigger click on hidden input
+
+ // For controlling the modal
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
+ const faqItems = [
+ { title: "How to create new account?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry' Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry'" },
+ { title: "How to reset password?", content: "Description for resetting password." },
+ { title: "How to manage expenses?", content: "Description for managing expenses." },
+ { title: "How to redeem gift cards?", content: "Description for redeeming gift cards." },
+ { title: "How to submit tickets?", content: "Description for submitting tickets." },
+ ];
+
return (
-
+
+
+ {/* Ticket Creation Box */}
+
+
+ Raise a Ticket
+
+
+
+ {/* Subject Input */}
+
+
+ Subject
+
+
+
+
+ {/* Type of Issue Select */}
+
+
+ Type of Issue
+
+
+
+
+
+
+
+
+ Add Screenshot
+
+
+
+
+
+
+ {/* Subtype Select */}
+
+
+ Subtype
+
+
+
+
+
+
+
+ Summarize your issue
+
+
+
+
+
+
+
+
+ {/* Tabs for FAQ */}
+
+
+
+
+ FAQ
+
+
+
+
+ All
+
+
+ Expense
+
+
+ Benefits
+
+
+ Gift Cards
+
+
+
+
+ {/* Tab Panels */}
+
+
+
+ {faqItems.map((item, index) => (
+
+ {({ isExpanded }) => (
+ <>
+
+
+ {item.title}
+
+
+
+
+ {item.content}
+
+
+ )}
+
+ ))}
+
+
+
+ Reimbursement content
+
+
+
+ {faqItems.map((item, index) => (
+
+ {({ isExpanded }) => (
+ <>
+
+
+ {item.title}
+
+
+
+
+ {item.content}
+
+
+ )}
+
+ ))}
+
+
+
+ Reimbursement content
+
+
+
+
+
+
+
+ All Tickets
+
+
+
+ Date
+
+
+
+
+
+
+
+
+ In Progress
+
+
+ Completed
+
+
+ Terminated
+
+
+
+
+
+
+
+
+
+
+ TA-97868
+
+
+
+
+
+
+ App loading issue
+
+
+ {" "}
+ ❯ Lorem ipsum dolor
+
+
+ 17 Jan 2023
+
+
+
+
+ Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+ Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+ sollicitudin, ultrices quam eget, dapibus elit.
+
+
+ In Progress
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TA-97868
+
+
+
+
+
+
+ App loading issue
+
+
+ {" "}
+ ❯ Lorem ipsum dolor
+
+
+ 17 Jan 2023
+
+
+
+
+ Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+ Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+ sollicitudin, ultrices quam eget, dapibus elit.
+
+
+ Completed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TA-97868
+
+
+
+
+
+
+ App loading issue
+
+
+ {" "}
+ ❯ Lorem ipsum dolor
+
+
+ 17 Jan 2023
+
+
+
+
+ Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+ Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+ sollicitudin, ultrices quam eget, dapibus elit.
+
+
+ Terminated
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Include the Notifications modal */}
+
);
};
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index f1771b6..8ea4e04 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -29,5 +29,4 @@ export const RouteLink = [
{ path: "/profile", Component: Profile },
{ path: "/profile/edit-profile", Component: EditProfile },
{ path: "/contact-us", Component: ContactUs },
- { path: "/your-wallet", Component: YourWallet },
];