feat:update payment section in registration page

src/app/events/page.jsx

@@ -1,9 +1,5 @@
 'use client';
-// import {
-//   GL_descriptionItems,
-//   GL_previewItems,
-// } from '@/config/content/EventsPage/GuestLecture/Data';
-// import { Heading3 } from '@/components/shared/Typography/Headings';
+
 import { EventsContainer, Heading3 } from './page.style';
 import MainCarousel from '@/components/EventsPage/index';
 import {
@@ -14,7 +10,6 @@ import {
   Exhibition_descriptionItems,
   Exhibition_previewItems,
 } from '@/config/content/EventsPage/Exhibition/Data';
-// import { DTS_previewItems, DTS_descriptionItems } from '@/config/content/EventsPage/DTS_Shows/Data';
 import { ME_descriptionItems, ME_previewItems } from '@/config/content/EventsPage/MainEvents/Data';
 
 import {
@@ -23,8 +18,6 @@ import {
 } from '@/config/content/EventsPage/FunEvents/Data';
 import { ComingSoon } from '@/components/EventsPage/ComingSoon';
 import { GalleryWrapper } from '@/components/EventsPage/Gallery/CardWrapper';
-// import { GalleryWrapper, Gallerywrapper } from '@/components/EventsPage/Gallery/CardWrapper';
-// import { GalleryWrapper } from '@/components/EventsPage/Gallery/CardWrapper';
 
 export default function Page() {
   return (
@@ -45,10 +38,8 @@ export default function Page() {
           descriptionItems={Exhibition_descriptionItems}
         />
         <Heading3>SHOWS AT DTS</Heading3>
-        {/* <MainCarousel previewItems={DTS_previewItems} descriptionItems={GL_descriptionItems} /> */}
         <ComingSoon />
         <Heading3>GUEST LECTURES</Heading3>
-        {/* <MainCarousel previewItems={GL_previewItems} descriptionItems={GL_descriptionItems} /> */}
         <ComingSoon />
         <Heading3>GALLERY</Heading3>
         <GalleryWrapper />

src/app/register/page.jsx

@@ -7,6 +7,8 @@ import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 import { v4 } from 'uuid';
 
+import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
+import { Qr } from '@/components/Register/PaymentComponents/Qr';
 import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
 import FileInput from '@/components/Register/FileInput/FileInput';
 import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
@@ -33,6 +35,8 @@ import {
   RegisterInnerContainer,
   RegsiterButton,
   UndertakingLink,
+  PaymentHeading,
+  DisclaimerPara,
 } from './register.styles';
 
 function Page() {
@@ -160,6 +164,17 @@ function Page() {
           />
         );
 
+      case 'head':
+        return <PaymentHeading>{field.content}</PaymentHeading>;
+
+      case 'title':
+        return <MerchantInfo label={field.label} labelInfo={field.content} />;
+      case 'image':
+        return <Qr QrUrl={field.QrUrl} />;
+
+      case 'disclaimer':
+        return <DisclaimerPara>{field.content}</DisclaimerPara>;
+
       case 'checkbox':
         return (
           <CheckBox
@@ -268,7 +283,7 @@ function Page() {
           <PaymentPolicyInfo>
             <Link href='/refundPolicy'>Please review the Payment Policy before registering.</Link>
             <br />
-            (NOTE: Registration Fees (₹899) + Convenience Fees + GST will be applied)
+            NOTE: Registration Fees (₹899)
           </PaymentPolicyInfo>
           <CampusAmbassador
             handleChange={handleChange}

src/app/register/register.styles.jsx

@@ -2,17 +2,31 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+
+import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+import { Heading3 } from '../events/page.style';
+
 import { Heading1, Heading2 } from '@/components/shared/Typography/Headings';
 
 export const RegisterHeading = styled(Heading1)`
   ${tw`text-center text-2xl xxs:text-3xl ssm:text-4xl md:text-5xl lg:text-6xl my-0 py-0 font-spaceX text-white`}
 `;
 
-export const PaymentContainer = styled.div`
-  ${tw`w-auto h-auto p-5 border-[#00FFD1] border-2`}
-`;
 export const PaymentHeading = styled(Heading2)`
-  ${tw`text-left`}
+  ${tw`m-0 p-3 border-[#00FFD1] border-2 rounded-lg font-prompt`}
+`;
+
+export const Heading = styled(Heading3)`
+  ${tw`pb-0 mb-0 font-prompt`}
+`;
+export const MerchantLabel = styled(Heading2)`
+  ${tw`text-left text-[#00FFD1] p-0 m-0 font-prompt`}
+`;
+export const MerchantLabelInfo = styled(Heading2)`
+  ${tw`text-left text-gray-200 m-0 p-0 font-prompt`}
+`;
+export const DisclaimerPara = styled(SmallParagraph)`
+  ${tw`text-red-500 font-prompt w-full md:max-w-[50%]`}
 `;
 
 export const RegisterContainer = styled.div`

src/components/Carousel/Carousel.jsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useAnimate } from 'framer-motion';
+import { Swiper } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { ScreenViewContainer, SliderContainer, Wrapper } from './Carousel.styles';
+import { LeftArrowButton, RightArrowButton } from '../EventsPage/Shared/ArrowButton';
+import DescriptionCarousel from '../EventsPage/Carousel/DescriptionCarousel';
+import '../EventsPage/Carousel/swiper.css';
+
+export const SwiperCarousel = ({
+  mapFunction,
+  mobileViewClassName,
+  desktopViewClassname,
+  descriptionItems,
+  onIndexChange,
+  isEventSection,
+}) => {
+  const [scope, animate] = useAnimate();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const swiperRef = useRef(null);
+  const slideWidth = 456.74;
+
+  useEffect(() => {
+    const updateScreenSize = () => {
+      setIsMobile(typeof window !== 'undefined' && window.innerWidth < 900);
+    };
+
+    updateScreenSize();
+    window.addEventListener('resize', updateScreenSize);
+    return () => window.removeEventListener('resize', updateScreenSize);
+  }, []);
+
+  const handleNext = () => {
+    swiperRef.current?.swiper.slideNext();
+  };
+
+  const handlePrev = () => {
+    swiperRef.current?.swiper.slidePrev();
+  };
+
+  const onSlideChange = (swiper) => {
+    const newIndex = swiper.realIndex;
+    setCurrentIndex(newIndex);
+    if (onIndexChange) {
+      onIndexChange(newIndex);
+    }
+  };
+
+  useEffect(() => {
+    if (scope.current) {
+      const xOffset = -currentIndex * slideWidth;
+      animate(
+        scope.current,
+        { x: xOffset },
+        {
+          duration: 7,
+          ease: [0.42, 0, 0.58, 1],
+          type: 'tween',
+        },
+      );
+    }
+  }, [currentIndex, animate, scope]);
+
+  return (
+    <Wrapper>
+      <ScreenViewContainer>
+        <LeftArrowButton
+          onClick={handlePrev}
+          style={{ position: 'absolute', left: '10px', top: '50%', zIndex: 10 }}
+        />
+        <SliderContainer>
+          <Swiper
+            ref={swiperRef}
+            slidesPerView={isMobile ? 1 : 3}
+            centeredSlides
+            loop
+            spaceBetween={isMobile ? 30 : 0}
+            onSlideChange={onSlideChange}
+            modules={[Pagination, Autoplay]}
+            autoplay={{ delay: isEventSection ? 3000 : 15000, disableOnInteraction: false }}
+            className={isMobile ? mobileViewClassName : desktopViewClassname}
+          >
+            {mapFunction()}
+          </Swiper>
+        </SliderContainer>
+        <RightArrowButton
+          onClick={handleNext}
+          style={{ position: 'absolute', right: '10px', top: '50%', zIndex: 10 }}
+        />
+      </ScreenViewContainer>
+      {!isEventSection && (
+        <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
+      )}
+    </Wrapper>
+  );
+};

src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.styles.jsx → src/components/Carousel/Carousel.styles.jsx

@@ -5,7 +5,7 @@ export const Wrapper = styled.div`
   ${tw`w-full min-h-screen h-auto flex flex-col `}
 `;
 
-export const LargeScreenViewContainer = styled.div`
+export const ScreenViewContainer = styled.div`
   ${tw`relative flex justify-center items-center h-auto`}
 `;
 

src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx → src/components/EventsPage/Carousel/DescriptionCarousel.jsx

@@ -1,5 +1,5 @@
-import { motion, AnimatePresence, easeIn } from 'framer-motion';
-import DetailsCard from '../../CardComponents/DetailsCard';
+import { motion, AnimatePresence } from 'framer-motion';
+import DetailsCard from '../CardComponents/DetailsCard';
 import tw, { styled } from 'twin.macro';
 import { memo } from 'react';
 

src/components/EventsPage/Carousel/PreviewCarousel.jsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { SwiperSlide } from 'swiper/react';
+import PreviewCard from '../CardComponents/PreviewCard';
+import { SwiperCarousel } from '@/components/Carousel/Carousel';
+import { useState } from 'react';
+
+export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const renderSlides = () =>
+    previewItems.map((item, index) => (
+      <SwiperSlide key={index} className={`slide ${index === currentIndex ? 'active-slide' : ''}`}>
+        <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
+      </SwiperSlide>
+    ));
+
+  return (
+    <SwiperCarousel
+      mapFunction={renderSlides}
+      desktopViewClassname='mySwiper'
+      mobileViewClassName='mySwiper2'
+      descriptionItems={descriptionItems}
+      onIndexChange={setCurrentIndex}
+    />
+  );
+};