big-learning-days
unknown
jsx
8 days ago
15 kB
1
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-[100dvh] overflow-y-hidden rounded-lg flex flex-col justify-center items-center bg-[#f6f7fb]">
<Image src={bldLogo} alt="Big Learning Days Logo" width={120} height={120} priority className='max-md:pt-8' />
<div className='w-full flex flex-col flex-1 border'>
<div className='px-4 bg-white'>
<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%] disabled:text-black disabled:opacity-100 "
maxLength={14}
placeholder='Enter Phone Number'
disabled
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 flex-1 grid-cols-3">
{nums.map((num) => (
<button
key={num}
className={`active:text-white active:bg-blue-600 rounded-lg p-3 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 sticky 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>
</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