feat:update payment section in register page

src/app/register/page.jsx

@@ -10,6 +10,8 @@ import {
   UndertakingLink,
   PaymentPolicyInfo,
   PaymentHeading,
+  DisclaimerPara,
+  Heading,
 } from './register.styles';
 import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
@@ -26,7 +28,13 @@ 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';
+// import { QrButton } from '@/components/Register/PaymentComponents/QrButton';
+import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
+import { Qr } from '@/components/Register/PaymentComponents/Qr';
+import { Heading3 } from '../events/page.style';
+// import { Paragraph, SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+// import { Heading1 } from '@/components/shared/Typography/Headings';
+// import { Heading3 } from '../codeofconduct/page.styles';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
@@ -160,13 +168,26 @@ function Page() {
             error={errors[field.id]}
           />
         );
-      case 'button':
+
+      case 'Head':
+        return <PaymentHeading>{field.content}</PaymentHeading>;
+
+      case 'or':
+        return <Heading>{field.content}</Heading>;
+
+      case 'Title':
         return (
           <>
-            <PaymentHeading>Payment Section </PaymentHeading>
-            <QrButton label={field.label} />
+            {/* <PaymentHeading>Payment Section </PaymentHeading> */}
+            <MerchantInfo label={field.label} labelInfo={field.labelInfo} />
           </>
         );
+      case 'Image':
+        return <Qr QrUrl={field.QrUrl} />;
+
+      case 'Disclaimer':
+        return <DisclaimerPara>{field.content}</DisclaimerPara>;
+
       case 'checkbox':
         return (
           <CheckBox
@@ -196,7 +217,7 @@ function Page() {
     <RegisterContainer>
       <Moon />
 
-      {!isLoggedIn ? (
+      {isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>

src/app/register/register.styles.jsx

@@ -2,16 +2,28 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 import { Heading1, Heading2 } from '@/components/shared/Typography/Headings';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+import { Heading3 } from '../events/page.style';
 
 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`}
+`;
+
+export const Heading = styled(Heading3)`
+  ${tw`pb-0 mb-0`}
+`;
+export const MerchantLabel = styled(Heading2)`
+  ${tw`text-left text-[#00FFD1] p-0 m-0`}
+`;
+export const MerchantLabelInfo = styled(Heading2)`
+  ${tw`text-left text-gray-200 m-0 p-0 `}
+`;
+export const DisclaimerPara = styled(SmallParagraph)`
+  ${tw`text-red-500 `}
 `;
 
 export const RegisterContainer = styled.div`

src/components/Register/PaymentComponents/MerchantInfo.jsx

@@ -0,0 +1,13 @@
+// import { Heading3 } from '@/app/events/page.style';
+import { MerchantLabel, MerchantLabelInfo, PaymentHeading } from '@/app/register/register.styles';
+
+export const MerchantInfo = ({ label, labelInfo }) => {
+  return (
+    <>
+      <div className='flex gap-2'>
+        <MerchantLabel>{label}:</MerchantLabel>
+        <MerchantLabelInfo>{labelInfo}</MerchantLabelInfo>
+      </div>
+    </>
+  );
+};

src/components/Register/PaymentComponents/Qr.jsx

@@ -0,0 +1,11 @@
+import Image from 'next/image';
+
+export const Qr = ({ QrUrl }) => {
+  return (
+    <>
+      <div className='flex justify-center'>
+        <Image src={QrUrl} alt='Qr' width={200} height={200} />
+      </div>
+    </>
+  );
+};

src/config/content/Registration/details.js

@@ -222,12 +222,48 @@ export const formFields = [
     id: 'gender',
     className: 'oneliner',
   },
+
+  { type: 'Head', content: 'pay via Qr' },
+
   {
-    label: 'Click to Pay',
-    type: 'button',
-    id: 'qr',
-    className: 'w-full',
+    label: 'Merchant Name',
+    type: 'Title',
+    labelInfo: 'PLAN FUND NIT ROURKELA',
+  },
+  {
+    label: 'UPI ID',
+    type: 'Title',
+    labelInfo: '85002429435@sbi',
+  },
+  {
+    type: 'Image',
+    QrUrl:
+      'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729940616/Pay_for_Registration_oqdgsq.png',
+  },
+  {
+    type: 'Disclaimer',
+    content: '{Please ensure the amount is exactly INR 899}',
   },
+  { type: 'or', content: 'or' },
+
+  { type: 'Head', content: 'pay through bank' },
+
+  {
+    label: 'Bank Account Name',
+    type: 'Title',
+    labelInfo: 'STUDENT ACTIVITY CENTRE NIT - ROURKELA',
+  },
+  {
+    label: 'Bank Account Number',
+    type: 'Title',
+    labelInfo: '_00000037377186107',
+  },
+  {
+    label: 'IFSC Code',
+    type: 'Title',
+    labelInfo: 'SBIN0002109',
+  },
+
   {
     label: 'Upload Payment Screenshot',
     type: 'file',