Untitled
unknown
plain_text
12 days ago
15 kB
2
Indexable
Never
import Image from 'next/image'; import React, { useState } from 'react'; import bldLogo from '@/public/marketing/The-Big-Learning-Days.svg'; import { useRouter } from 'next/router'; import axios from 'axios'; export async function getServerSideProps(context: { params: { id: string }; }) { const { id } = context.params; try { const { data } = await axios.get( `${process.env.NEXT_PUBLIC_BASE_API}masterclasses/${id}`, { headers: { "Accept-Encoding": "gzip", }, } ); return { props: { masterClass: data.data, }, }; } catch (err) { return { props: { masterclass: {}, }, }; } } function BigLearningDays({ masterClass }: any) { const router = useRouter(); const [currentStep, setCurrentStep] = useState(0); const slotInfo = masterClass?.slots.find( (slot: any) => slot.active === true ); const [collectedData, setCollectedData] = useState({ experience: '', tradingStyle: '', phoneNumber: '', source: router.query.source || "direct", comment: router.query.comment || "default_comment", masterclassSlotId: slotInfo?.id, masterclassId: masterClass?.id, }); async function createLead(phoneNumber: any) { if (collectedData.masterclassSlotId != '' && collectedData.masterclassId != '') { try { await axios.post(`${process.env.NEXT_PUBLIC_BASE_API}leads`, { name: "Tradewise User", email: "default", phone: phoneNumber, source: collectedData.source, comment: collectedData.comment, masteclassSlotId: collectedData.masterclassSlotId, masterclassId: collectedData.masterclassId, }) } catch (error) { console.error(error); } } } function joinWhatsAppGroup() { const whatsappLink = slotInfo?.whatsappGroupLink; if (whatsappLink) { window.location.href = whatsappLink; } else { alert('WhatsApp group link not available'); } } async function exportToExcel(phoneNumber: any) { const formData = new FormData(); formData.append('experience', collectedData.experience); formData.append('tradingStyle', collectedData.tradingStyle); formData.append('phoneNumber', phoneNumber); formData.append('source', collectedData.source as string); formData.append('comment', collectedData.comment as string); try { await axios.post(process.env.NEXT_PUBLIC_GOOGLE_SHEET_BIG_LEARNING_DAYS!, formData, { headers: { "Content-Type": "multipart/form-data" }, }) } catch (error) { console.error(error); } } const handleExperienceSelected = (experience: string) => { setCollectedData((prev) => ({ ...prev, experience })); setCurrentStep(1); }; const handleTradingStyleSelected = (tradingStyle: string) => { setCollectedData((prev) => ({ ...prev, tradingStyle })); setCurrentStep(2); }; const handlePhoneNumberEntered = (phoneNumber: string) => { setCollectedData((prev) => ({ ...prev, phoneNumber })); createLead(phoneNumber); exportToExcel(phoneNumber); setCurrentStep(3); }; const handleWhatsAppGroupJoined = () => { joinWhatsAppGroup(); setCurrentStep(4); }; const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; return ( <div> {currentStep === 0 && ( <ExperienceForm onExperienceSelected={handleExperienceSelected} /> )} {currentStep === 1 && ( <TradingStyleForm onTradingStyleSelected={handleTradingStyleSelected} /> )} {currentStep === 2 && ( <PhoneNumberForm onPhoneNumberEntered={handlePhoneNumberEntered} onBack={handleBack} /> )} {currentStep === 3 && ( <ConfirmationForm onWhatsAppGroupJoined={handleWhatsAppGroupJoined} onBack={handleBack} /> )} </div> ); } export default BigLearningDays; interface ExperienceFormProps { onExperienceSelected: (experience: string) => void; } const ExperienceForm: React.FC<ExperienceFormProps> = ({ onExperienceSelected }) => { const [selectedExperience, setSelectedExperience] = useState<string | null>(null); const handleExperienceChange = (experience: string) => { setSelectedExperience(experience); onExperienceSelected(experience); }; return ( <div className=" w-full max-w-md mx-auto rounded-lg flex flex-col justify-center items-center h-screen bg-[#f6f7fb] "> <div className="h-72 max-w-md w-full bg-[#f6f7fb] flex justify-center items-center flex-col"> <Image src={bldLogo} alt="Big Learning Days Logo" width={150} height={150} priority className='relative bottom-14' /> <div className="font-bold relative bottom-14 text-xl">28<sup>th</sup> Sep to 2<sup>nd</sup> Oct</div> <div className="w-60 text-center text-lg relative bottom-14"> Register for India’s largest learning festival. </div> </div> <div className="bg-white p-2 rounded max-w-[410px] relative bottom-14 shadow-lg flex flex-col items-center justify-center"> <h2 className="text-xl font-bold text-center mb-4 mt-14 relative bottom-14 border-b-2 py-2 w-full">STEP 1</h2> <p className="text-center mb-4 border-slate-300 p-5 relative bottom-20 w-72 text-lg"> How many years of trading experience do you have? </p> <div className="space-y-6 relative bottom-24 h-32 "> <button onClick={() => handleExperienceChange('0-1 years')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded px-4 py-3 border w-full text-lg border-blue-500 ${selectedExperience === '0-1 years' ? 'bg-blue-600 text-white' : '' }`} > 0 to 1 years </button> <button onClick={() => handleExperienceChange('1-3 years')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded px-4 py-3 border w-full border-blue-500 text-lg ${selectedExperience === '1-3 years' ? 'bg-blue-600 text-white' : '' }`} > 1 to 3 years </button> <button onClick={() => handleExperienceChange('more than 3 years')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded px-4 py-3 w-full border border-blue-500 text-lg ${selectedExperience === 'more than 3 years' ? 'bg-blue-600 text-white' : '' }`} > More than 3 years </button> </div> </div> </div> ); }; interface TradingStyleFormProps { onTradingStyleSelected: (tradingStyle: string) => void; } const TradingStyleForm: React.FC<TradingStyleFormProps> = ({ onTradingStyleSelected }) => { const [selectedTradingStyle, setSelectedTradingStyle] = useState<string | null>(null); const handleTradingStyleChange = (tradingStyle: string) => { setSelectedTradingStyle(tradingStyle); onTradingStyleSelected(tradingStyle); }; return ( <div className=" w-full max-w-md mx-auto h-screen rounded-lg flex flex-col justify-center items-center bg-[#f6f7fb]"> <div className="h-72 w-full bg-[#f6f7fb] flex justify-center items-center relative bottom-14 flex-col"> <Image src={bldLogo} alt="Big Learning Days Logo" width={150} height={150} priority /> <div className="font-bold text-xl">28<sup>th</sup> Sep to 2<sup>nd</sup> Oct</div> <div className="w-60 text-center text-lg "> Register for India’s largest learning festival. </div> </div> <div className="bg-white p-2 rounded w-full flex flex-col justify-center items-center max-w-[410px] relative bottom-16"> <h2 className="text-xl font-bold text-center mb-4 border-b-2 w-full py-2">STEP 2</h2> <p className="text-center mb-4 text-lg">What is your Favorite Trading style?</p> <div className="space-y-6 max-w-[410px] shadow-xl w-full my-2 mb-5"> <button onClick={() => handleTradingStyleChange('Swing Trading')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded-lg px-4 py-3 w-full border border-blue-500 text-lg ${selectedTradingStyle === 'Swing Trading' ? 'bg-blue-600' : '' }`} > Swing Trading </button> <button onClick={() => handleTradingStyleChange('Intraday Trading')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded-lg px-4 py-3 w-full border border-blue-500 text-lg ${selectedTradingStyle === 'Intraday Trading' ? 'bg-blue-600' : '' }`} > Intraday Trading </button> <button onClick={() => handleTradingStyleChange('Forex and Commodities')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded-lg px-4 py-3 w-full border border-blue-500 text-lg ${selectedTradingStyle === 'Forex and Commodities' ? 'bg-blue-600' : '' }`} > Forex and Commodities </button> <button onClick={() => handleTradingStyleChange('Options Trading')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded-lg px-4 py-3 w-full border border-blue-500 text-lg ${selectedTradingStyle === 'Options Trading' ? 'bg-blue-600' : '' }`} > Options Trading </button> <button onClick={() => handleTradingStyleChange('Long-term Investing')} className={`text-blue-500 active:text-white active:bg-blue-600 rounded-lg px-4 py-3 w-full border border-blue-500 text-lg ${selectedTradingStyle === 'Long-term Investing' ? 'bg-blue-600' : '' }`} > Long-term Investing </button> </div> </div> </div> ); }; interface PhoneNumberFormProps { onPhoneNumberEntered: (phoneNumber: string) => void; onBack: () => void; } const PhoneNumberForm: React.FC<PhoneNumberFormProps> = ({ onPhoneNumberEntered, onBack }) => { const [phoneNumber, setPhoneNumber] = useState('+91 '); const [error, setError] = useState(''); const handleNumberClick = (num: string) => { if (num === '<-') { setPhoneNumber((prev) => (prev.length > 3 ? prev.slice(0, -1) : prev)); } else if (num === 'Clear') { setPhoneNumber('+91 '); } else { if (phoneNumber.length < 14) { setPhoneNumber((prev) => prev + num); } } }; const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; if ((/^\+91 \d*$/.test(value)) && phoneNumber.length < 14) { setPhoneNumber(value); } }; const handleConfirm = () => { const updatedPhoneNumber = phoneNumber; const regex = /^(6|7|8|9)\d{9}$/; const testvalue = updatedPhoneNumber.split(' ')[1]; if (regex.test(testvalue)) { onPhoneNumberEntered(phoneNumber.split(' ')[1]); } else { setError('Invalid number '); console.error('Invalid number format'); } }; const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'Clear', 0, '<-']; return ( <div className=" max-w-md w-full mx-auto h-screen rounded-lg flex flex-col justify-center items-center bg-[#f6f7fb]"> <div className="h-40 max-w-[410px] flex justify-center items-center relative bottom-16"> <Image src={bldLogo} alt="Big Learning Days Logo" width={120} height={120} priority /> </div> <div className='w-full border'> <div className='px-4 bg-white relative bottom-14'> <h2 className="text-xl font-bold text-center mb-4 border-b-2 py-2">STEP 3</h2> <p className="text-center mb-4">Please enter your phone number</p> <div className="flex flex-col items-center w-full max-w-[410px]"> <input type="text" value={phoneNumber} onChange={handleInputChange} className="border rounded-lg px-4 h-[54px] w-[80%] " maxLength={14} placeholder='Enter Phone Number' required /> {error && <p className="text-red-500 text-sm">{error}</p>} </div> <div className="flex items-center justify-center mt-4 "> <input type="checkbox" id="whatsappUpdates" className="mr-2 mb-10 rounded-4xxl" defaultChecked /> <label htmlFor="whatsappUpdates" className='text-xs text-gray-500 mb-10'>Get updates on WhatsApp</label> </div> </div> <div className="grid grid-cols-3 mt-4 "> {nums.map((num) => ( <button key={num} className={`active:text-white active:bg-blue-600 rounded-lg px-4 py-4 w-full border flex-grow text-2xl ${num === 'Clear' || num === '<-' ? 'bg-slate-300' : '' }`} onClick={() => handleNumberClick(num.toString())} > {num} </button> ))} </div> <button className="text-white bg-green-500 active:text-white active:bg-green-600 px-4 py-6 w-full mt-14 max-w-md absolute bottom-0 text-xl font-bold" type='submit' onClick={() => { if (phoneNumber?.split(' ')[1]?.length != 10) { setError("Not a valid number"); } else { handleConfirm(); } }} > Complete Your Registration </button> <br /> </div> </div> ); }; interface ConfirmationFormProps { onWhatsAppGroupJoined: () => void; onBack: () => void; } const ConfirmationForm: React.FC<ConfirmationFormProps> = ({ onWhatsAppGroupJoined, onBack }) => { return ( <div className="w-full max-w-md mx-auto h-screen rounded-lg p-4 flex flex-col justify-center items-center bg-[#f6f7fb]"> <div className="h-96 max-w-[410px] bg-[#f6f7fb] flex justify-center items-center flex-col relative bottom-40"> <Image src={bldLogo} alt="Big Learning Days Logo" width={150} height={150} priority /> <div className="font-bold text-xl">28<sup>th</sup> Sep to 2<sup>nd</sup> Oct</div> </div> <div className="max-w-[410px] w-full relative bottom-40 bg-white"> <h2 className="text-xl font-bold text-center mb-4 border-b-2 py-3">STEP 4</h2> <p className="text-center mb-4 p-4 text-xl"> Thank you for confirming your registration. Please join the WhatsApp group for further details. </p> <button className="text-white bg-green-500 active:bg-green-600 rounded-lg px-4 py-4 w-full max-w-[410px] active:text-white text-xl " onClick={onWhatsAppGroupJoined} > <Image src={"/whatsapp-logo.png"} alt="" width={30} height={30} className="mx-1 " /> Join WhatsApp </button> </div> </div> ); };
Leave a Comment