Skip to content

Commit 398cc4d

Browse files
Ase020Ase020
committed
parse data to enrollment page
1 parent 1f0f550 commit 398cc4d

File tree

5 files changed

+40
-17
lines changed

5 files changed

+40
-17
lines changed

‎src/pages/mastercraft-enroll/MastercraftEnroll.jsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1+
import { useLocation } from "react-router-dom";
12
import SeoMetadata from "../../components/SeoMetadata";
23
import { Header as MastercraftHeader } from "../mastercraft/sections";
4+
import { programs } from "../mastercraft/sections/data";
35
import MastercraftEnrollmentComponent from "./sections/MastercraftEnrollmentComponent";
46

57
function MastercraftEnroll() {
8+
const { pathname } = useLocation();
9+
const program = pathname.split("/")[2];
10+
11+
const programRender = programs.find(({ slug }) => slug === program);
12+
613
return (
714
<>
815
<SeoMetadata
@@ -15,9 +22,18 @@ function MastercraftEnroll() {
1522
/>
1623
<div className="bg-[#F5F5F5]">
1724
<main className="py-16 flex items-center flex-col gap-10 lg:gap-20 max-w-1440 mx-auto md:px-8 px-5">
18-
<MastercraftHeader />
25+
<MastercraftHeader
26+
isRegOpen={programRender.isRegOpen}
27+
category={programRender.category}
28+
cover={programRender.cover}
29+
description={programRender.description}
30+
nextCohortDate={programRender.nextCohortDate}
31+
productInfo={programRender.productInfo}
32+
tags={programRender.tags}
33+
title={programRender.title}
34+
/>
1935

20-
<MastercraftEnrollmentComponent />
36+
<MastercraftEnrollmentComponent program={programRender} />
2137
</main>
2238
</div>
2339
</>

‎src/pages/mastercraft-enroll/sections/EnrollmentHeader.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
function EnrollmentHeader() {
1+
/* eslint-disable react/prop-types */
2+
function EnrollmentHeader({ title }) {
23
return (
34
<div className="flex items-start md:items-center justify-between flex-col md:flex-row gap-5">
45
<h4 className="text-lg font-normal text-[#2E2E2E]">
56
I&apos;m enrolling for the Mastercraft program, in{" "}
6-
<span className="font-semibold">Product Design</span>
7+
<span className="font-semibold">{title}</span>
78
</h4>
89

910
<div className="bg-[#2A67583D] rounded-full border-2 border-white p-2.5 flex-center">

‎src/pages/mastercraft-enroll/sections/MastercraftEnrollmentComponent.jsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12
/* eslint-disable no-console */
23
/* eslint-disable no-alert */
34
import { useState, useMemo } from "react";
@@ -11,7 +12,7 @@ import PersonalInformation from "./PersonalInformation";
1112
import Qualifications from "./Qualifications";
1213
import TermsOfUseCheckbox from "./TermsOfUseCheckbox";
1314

14-
function MastercraftEnrollmentComponent() {
15+
function MastercraftEnrollmentComponent({ program }) {
1516
const [index, setIndex] = useState(1);
1617
const [isOpen, setIsOpen] = useState(false);
1718
const [isProcessing, setIsProcessing] = useState(false);
@@ -212,7 +213,12 @@ function MastercraftEnrollmentComponent() {
212213
);
213214
case 3:
214215
return (
215-
<Payment formData={formData} handleInputChange={handleInputChange} />
216+
<Payment
217+
formData={formData}
218+
handleInputChange={handleInputChange}
219+
programTitle={program.title}
220+
pricing={program.pricing}
221+
/>
216222
);
217223
default:
218224
return null;
@@ -222,7 +228,7 @@ function MastercraftEnrollmentComponent() {
222228
return (
223229
<div className="border-t pt-4 w-full">
224230
<section className="border-2 border-white w-full bg-[#E8F4F1] p-8 rounded-2xl flex flex-col gap-6">
225-
<EnrollmentHeader />
231+
<EnrollmentHeader title={program.title} />
226232
<EnrollmentProgressBar currentStep={index} />
227233

228234
{renderFormStep()}

‎src/pages/mastercraft-enroll/sections/Payment.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Palette } from "lucide-react";
44
import PhoneInput from "react-phone-number-input";
55

6-
function Payment({ formData, handleInputChange }) {
6+
function Payment({ formData, handleInputChange, programTitle, pricing }) {
77
return (
88
<div className="flex flex-col gap-6">
99
<h3 className="text-lg font-semibold text-[#2E2E2E]">
@@ -18,20 +18,20 @@ function Payment({ formData, handleInputChange }) {
1818
</div>
1919

2020
<div className="flex flex-col gap-2 items-start font-inter">
21-
<h5 className="text-sm text-black font-medium">UI/UX Designer</h5>
21+
<h5 className="text-sm text-black font-medium">{programTitle}</h5>
2222
<p className="text-xs text-[#686868] font-normal">
23-
Mastercraft Internship ● 8 weeks
23+
Mastercraft Program ● 8 weeks
2424
</p>
2525
</div>
2626
</div>
2727

2828
<div className="md:py-5 md:px-8">
2929
<h4 className="text-green-dark font-semibold text-base font-inter">
30-
<span className="text-xs">KES</span>{" "}
30+
<small className="text-xs">KES</small>{" "}
3131
{new Intl.NumberFormat("en-US", {
3232
maximumFractionDigits: 2,
3333
minimumFractionDigits: 2,
34-
}).format(2800)}
34+
}).format(Number(pricing.fullAmount - pricing.discountedAmount))}
3535
</h4>
3636
</div>
3737
</div>

‎src/pages/mastercraft-enroll/sections/PersonalInformation.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function PersonalInformation({ formData, handleInputChange }) {
2424
value={formData.fullName}
2525
onChange={(e) => handleInputChange("fullName", e.target.value)}
2626
className="border border-[#E5E5E5] bg-[#F4F4F5] rounded-md py-2 px-3 text-sm outline-none text-[#A3A3A3]"
27-
placeholder="Enter your full name"
27+
placeholder="John Doe"
2828
required
2929
/>
3030
</div>
@@ -40,7 +40,7 @@ function PersonalInformation({ formData, handleInputChange }) {
4040
value={formData.email}
4141
onChange={(e) => handleInputChange("email", e.target.value)}
4242
className="border border-[#E5E5E5] bg-[#F4F4F5] rounded-md py-2 px-3 text-sm outline-none text-[#A3A3A3]"
43-
placeholder="Enter your email address"
43+
placeholder="johndoe@gmail.com"
4444
required
4545
/>
4646
</div>
@@ -77,7 +77,7 @@ function PersonalInformation({ formData, handleInputChange }) {
7777
value={formData.github}
7878
onChange={(e) => handleInputChange("github", e.target.value)}
7979
className="border border-[#E5E5E5] bg-[#F4F4F5] rounded-md py-2 px-3 text-sm outline-none text-[#A3A3A3]"
80-
placeholder="Enter your GitHub profile URL"
80+
placeholder="https://github.com/johndoe"
8181
/>
8282
</div>
8383

@@ -92,7 +92,7 @@ function PersonalInformation({ formData, handleInputChange }) {
9292
value={formData.project}
9393
onChange={(e) => handleInputChange("project", e.target.value)}
9494
className="border border-[#E5E5E5] bg-[#F4F4F5] rounded-md py-2 px-3 text-sm outline-none text-[#A3A3A3]"
95-
placeholder="Enter project link"
95+
placeholder="https://johndoe.github.io/my-project"
9696
/>
9797
</div>
9898

@@ -110,7 +110,7 @@ function PersonalInformation({ formData, handleInputChange }) {
110110
value={formData.linkedIn}
111111
onChange={(e) => handleInputChange("linkedIn", e.target.value)}
112112
className="border border-[#E5E5E5] bg-[#F4F4F5] rounded-md py-2 px-3 text-sm outline-none text-[#A3A3A3]"
113-
placeholder="Enter your LinkedIn profile URL"
113+
placeholder="https://www.linkedin.com/in/johndoe"
114114
/>
115115
</div>
116116
</div>

0 commit comments

Comments
 (0)