From 4c0dcbec15412eb102d5cd83533b9aa011b37775 Mon Sep 17 00:00:00 2001
From: Ayan <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 02:10:40 +0530
Subject: [PATCH] Feat:add Payment Section to register form (#222)

* Feat: improved Upper Slider,lower Slider,fix Responsiveness of EventPage

* Feat:fix minor changes

* feat:add payment Section in Register Form
---
 src/app/register/page.jsx                     | 11 +++++-
 src/app/register/register.styles.jsx          |  9 ++++-
 .../Register/Qrscanner/QrButton.jsx           | 17 ++++++++
 src/components/Register/Qrscanner/QrModal.jsx | 39 +++++++++++++++++++
 src/config/content/Registration/details.js    | 22 +++++++++++
 5 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Register/Qrscanner/QrButton.jsx
 create mode 100644 src/components/Register/Qrscanner/QrModal.jsx

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 7e7cfca7..9899b352 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -9,6 +9,7 @@ import {
   Moon,
   UndertakingLink,
   PaymentPolicyInfo,
+  PaymentHeading,
 } from './register.styles';
 import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
@@ -25,6 +26,7 @@ import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
 import { RegistrationModal } from './RegistrationModal';
 import toast from 'react-hot-toast';
+import { QrButton } from '@/components/Register/Qrscanner/QrButton';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
@@ -158,6 +160,13 @@ function Page() {
             error={errors[field.id]}
           />
         );
+      case 'button':
+        return (
+          <>
+            <PaymentHeading>Payment Section </PaymentHeading>
+            <QrButton label={field.label} />
+          </>
+        );
       case 'checkbox':
         return (
           <CheckBox
@@ -187,7 +196,7 @@ function Page() {
     <RegisterContainer>
       <Moon />
 
-      {isLoggedIn ? (
+      {!isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
diff --git a/src/app/register/register.styles.jsx b/src/app/register/register.styles.jsx
index 83411542..57af1929 100644
--- a/src/app/register/register.styles.jsx
+++ b/src/app/register/register.styles.jsx
@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 import tw from 'twin.macro';
-import { Heading1 } from '@/components/shared/Typography/Headings';
+import { Heading1, Heading2 } from '@/components/shared/Typography/Headings';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 
 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`}
+`;
+
 export const RegisterContainer = styled.div`
   ${tw`min-h-screen flex flex-col items-center w-full justify-center pt-20 pb-16 px-2 xxs:px-5 xsm:px-10 md:px-20`};
   background: url('https://res.cloudinary.com/dmvdbpyqk/image/upload/v1728797925/registration_si85oa.png');
diff --git a/src/components/Register/Qrscanner/QrButton.jsx b/src/components/Register/Qrscanner/QrButton.jsx
new file mode 100644
index 00000000..72f7ff83
--- /dev/null
+++ b/src/components/Register/Qrscanner/QrButton.jsx
@@ -0,0 +1,17 @@
+import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { useState } from 'react';
+import { QrModal } from './QrModal';
+
+export const QrButton = ({ label }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+  return (
+    <>
+      <PrimaryButton onClick={handleModal}>{label}</PrimaryButton>
+      <QrModal isOpen={isModalOpen} onClose={handleModal} />
+    </>
+  );
+};
diff --git a/src/components/Register/Qrscanner/QrModal.jsx b/src/components/Register/Qrscanner/QrModal.jsx
new file mode 100644
index 00000000..2795b822
--- /dev/null
+++ b/src/components/Register/Qrscanner/QrModal.jsx
@@ -0,0 +1,39 @@
+import { closeIcon } from '@/config/content/Footer';
+import { QrImgUrl } from '@/config/content/Registration/details';
+import { Button, Modal, ModalBody, ModalContent } from '@nextui-org/react';
+import Image from 'next/image';
+
+export const QrModal = ({ onClose, isOpen }) => {
+  return (
+    <>
+      <Modal
+        size='xl'
+        isOpen={isOpen}
+        onClose={onClose}
+        backdrop='blur'
+        hideCloseButton={true}
+        placement='center'
+        className='backdrop-blur-lg'
+      >
+        <ModalContent className='relative bg-[#0000002a] h-[60vh] xxs:h-[70vh] md:h-[90vh] md:mt-48 focus:outline-none focus:border-0'>
+          <Button
+            color='danger'
+            variant='light'
+            onPress={onClose}
+            className='absolute top-1 right-0 z-10 focus:outline-none focus:border-0'
+          >
+            <Image src={closeIcon} alt='close' width={30} height={30} />
+          </Button>
+          <ModalBody className='h-full flex flex-col justify-center items-center'>
+            <Image
+              src={QrImgUrl}
+              alt='Qr'
+              fill
+              style={{ objectFit: 'fill', borderRadius: '16px' }}
+            />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index c2011d44..21888285 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -182,6 +182,7 @@ export const formFields = [
     id: 'institute',
     className: 'w-full',
   },
+
   {
     label: 'Name of the University (Full Name) ',
     type: 'text',
@@ -199,6 +200,7 @@ export const formFields = [
     type: 'file',
     id: 'idCard',
   },
+
   {
     label: 'Referral Code',
     type: 'text',
@@ -220,6 +222,23 @@ export const formFields = [
     id: 'gender',
     className: 'oneliner',
   },
+  {
+    label: 'Click to Pay',
+    type: 'button',
+    id: 'qr',
+    className: 'w-full',
+  },
+  {
+    label: 'Upload Payment Screenshot',
+    type: 'file',
+    id: 'idCard',
+  },
+  {
+    label: 'Transaction ID',
+    type: 'text',
+    id: 'TranscId',
+    className: 'w-full',
+  },
   {
     label: 'By proceeding, you agree to our terms and conditions.',
     type: 'checkbox',
@@ -259,3 +278,6 @@ export const undertakingContent = {
   link: 'https://drive.google.com/file/d/1rHV-eF4Z5ihY1VwqYg97FAEiVAYQ3g8E/view?usp=sharing',
   text: 'Undertaking Form for Authorization/Permission Letter',
 };
+
+export const QrImgUrl =
+  'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729884328/85002429435_sbi_gt1in2.webp';