created v2/register page and implemented their respective api's

package.json

@@ -43,6 +43,7 @@
     "cors": "^2.8.5",
     "cross-fetch": "^4.0.0",
     "crypto-js": "^4.2.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.11",
     "dotenv": "^16.3.1",
     "emoji-picker-react": "^4.9.3",
@@ -59,6 +60,7 @@
     "postcss": "8.4.30",
     "promises": "^0.2.5",
     "react": "18.2.0",
+    "react-date-range": "^2.0.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
     "react-icons": "^4.11.0",
@@ -93,6 +95,7 @@
     "@types/cookie": "^0.6.0",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.11",
+    "@types/react-date-range": "^1.4.9",
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",

src/app/v2/register/loading.tsx

@@ -0,0 +1,11 @@
+export default function Loading() {
+  return (
+    <div className="h-screen flex items-center justify-center w-full">
+      <div className="flex justify-center items-center">
+        <svg width={50} height={50} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" className="animate-spin">
+          <circle cx="25" cy="25" r="20" fill="none" stroke="#6647FF" strokeWidth="5" strokeLinecap="round" strokeDasharray="80, 200" />
+        </svg>
+      </div>
+    </div>
+  )
+}

src/app/v2/register/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+import FormContainer from '@/components/organism/Register/formContainer/FormContainer'
+import RegisterSIdebar from '@/components/organism/Register/sidebar/RegisterSIdebar'
+import React, { useEffect, useState } from 'react'
+import Loading from './loading'
+
+const Register = () => {
+  const [step, setStep] = useState<number>(0)
+  const [subStep, setSubStep] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const registerData = localStorage.getItem('registerData') ? JSON.parse(localStorage.getItem('registerData') || '') : null
+
+      if (registerData) {
+        setStep(registerData.step || 0)
+        setSubStep(registerData.subStep || 0)
+      }
+      setLoading(false)
+    }
+  }, [])
+  return (
+    <div className="flex h-screen ">
+      {loading ? (
+        <Loading />
+      ) : (
+        <>
+          <RegisterSIdebar step={step} subStep={subStep} />
+          <FormContainer step={step} setStep={setStep} subStep={subStep} setSubStep={setSubStep} />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default Register

src/components/atoms/DateSelect/DateSelect.tsx

@@ -0,0 +1,75 @@
+'use client'
+import { useEffect, useRef, useState } from 'react'
+import { Calendar } from 'react-date-range'
+import { addYears } from 'date-fns'
+import { enGB } from 'date-fns/locale'
+import 'react-date-range/dist/styles.css' // main style file
+import 'react-date-range/dist/theme/default.css' // theme css file
+import { motion, AnimatePresence } from 'framer-motion'
+import { CiCalendar } from 'react-icons/ci'
+interface SelectDropdownProps {
+  onChange: (value: string) => void
+  value: any
+  placeholder?: string
+
+  err: boolean
+}
+
+const DateSelect = ({ onChange, value, placeholder, err }: SelectDropdownProps) => {
+  const [show, setShow] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const handleDateChange = (data: Date) => {
+    onChange(new Date(data).toLocaleDateString())
+    setShow(false)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShow(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <motion.div ref={dropdownRef} className="relative">
+      <div
+        onClick={() => setShow(!show)}
+        className={`${
+          err ? 'border-red-400' : 'border-neutral-200'
+        } flex justify-between items-center py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm   h-10 outline-none`}
+      >
+        <p className={`${value ? 'text-neutral-900' : 'text-neutral-400'}`}> {value ? value : placeholder}</p>
+        <CiCalendar size={22} />
+      </div>
+      <AnimatePresence>
+        {show && (
+          <motion.div
+            className="shadow-lg absolute top-2 z-10  left-[5%] max-xl:left-0"
+            initial={{ opacity: 0, y: '-10%' }}
+            animate={{ opacity: 1, y: '5%' }}
+            exit={{ opacity: 0, y: '-10%', transition: { duration: '0.35' } }}
+            transition={{ type: 'spring', stiffness: '100', duration: '0.75' }}
+          >
+            <Calendar
+              date={value}
+              onChange={(item) => handleDateChange(item)}
+              locale={enGB}
+              minDate={addYears(new Date(), -100)}
+              maxDate={new Date()}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  )
+}
+
+export default DateSelect

src/components/atoms/Input/InputBox.tsx

@@ -4,11 +4,14 @@ type Props = {
   placeholder?: string
   className?: string
   type: string
+  err: boolean
 }
-const InputBox = forwardRef<HTMLInputElement, Props>(({ placeholder, className, type, ...rest }, ref) => {
+const InputBox = forwardRef<HTMLInputElement, Props>(({ placeholder, className, type, err, ...rest }, ref) => {
   return (
     <input
-      className={`${className} py-2 px-3 border rounded-lg drop-shadow-sm border-neutral-200 text-neutral-400 h-10 outline-none`}
+      className={`${className} ${
+        err ? 'border-red-400' : 'border-neutral-200'
+      } py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm  text-neutral-900 placeholder:text-neutral-400 h-10 outline-none`}
       type={type}
       placeholder={placeholder}
       ref={ref}

src/components/atoms/LoginButtons/index.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 interface LoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
-  variant?: 'primary' | 'secondary' | 'danger' | 'shade'
+  variant?: 'primary' | 'secondary' | 'danger' | 'shade' | 'border' | 'border_primary'
 }
 
 const LoginButtons: React.FC<LoginButtonProps> = ({ className = '', variant = 'primary', children, ...props }) => {
   const variantClasses = {
     primary: 'bg-primary-500 text-white',
     secondary: 'bg-gray-500 text-white',
+    border: 'border border-neutral-200 text-neutral-800 ',
+    border_primary: 'border border-primary text-primary ',
     danger: 'bg-red-500 text-white',
     shade: 'bg-secondary border border-shade-button-border text-primary-500 drop-shadow-sm',
   }

src/components/atoms/OTP-Input/OTP_Input.tsx

@@ -0,0 +1,82 @@
+import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react'
+
+interface OTPInputProps {
+  length: number
+  value: string
+  onChange: (otp: string) => void
+}
+
+const OTPInput: React.FC<OTPInputProps> = ({ length, value, onChange }) => {
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(''))
+  const inputRefs = useRef<(HTMLInputElement | null)[]>(Array(length).fill(null))
+
+  useEffect(() => {
+    const formattedValue = value.padEnd(length, ' ').slice(0, length)
+    setOtp(Array.from(formattedValue))
+  }, [value, length])
+
+  const handleChange = (newOtp: string[]) => {
+    onChange(newOtp.join(''))
+  }
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>, index: number) => {
+    const newValue = e.target.value.slice(-1)
+    if (/[^0-9]/.test(newValue)) return
+
+    setOtp((prevOtp) => {
+      const newOtp = [...prevOtp]
+      newOtp[index] = newValue
+
+      handleChange(newOtp)
+
+      return newOtp
+    })
+
+    if (index < length - 1) {
+      inputRefs.current[index + 1]?.focus()
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Backspace') {
+      e.preventDefault()
+
+      setOtp((prevOtp) => {
+        const newOtp = [...prevOtp]
+        newOtp[index] = ''
+
+        handleChange(newOtp)
+
+        return newOtp
+      })
+
+      if (index > 0) {
+        inputRefs.current[index - 1]?.focus()
+      }
+    }
+  }
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.currentTarget.select()
+  }
+
+  return (
+    <div className="flex justify-center gap-2">
+      {otp.map((data, index) => (
+        <input
+          key={index}
+          ref={(el) => (inputRefs.current[index] = el)}
+          type="text"
+          maxLength={1}
+          value={data}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => handleInput(e, index)}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => handleKeyDown(e, index)}
+          onFocus={handleFocus}
+          className="w-10 h-12 px-3 py-1 text-2xl text-neutral-400 font-semibold text-center border border-neutral-200 rounded-lg focus:outline-none focus:ring-2"
+        />
+      ))}
+    </div>
+  )
+}
+
+export default OTPInput