Skip to content

Commit

Permalink
Merge pull request #59 from EventoryHost/feature/item50
Browse files Browse the repository at this point in the history 
Bring back router changes on businessDetails
  • Loading branch information
@PrathmeshRRDOMIN8
PrathmeshRRDOMIN8 authored Sep 15, 2024
2 parents cddd6c2 + b8ae1a4 commit 63df7de
Show file tree
Hide file tree
Showing 8 changed files with 286 additions and 123 deletions.
36 changes: 17 additions & 19 deletions src/app/(vendor onboarding)/businessDetails/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
"use client";

import { useState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import jwt from "jsonwebtoken";

import { addBusinessDetails } from "@/services/auth";
import tajmahal from "/public/tajmahal.png";
import { Combobox } from "@/components/ui/combobox";
import Router from "next/router";

const frameworks = [
{ value: "next.js", label: "Next.js" },
Expand All @@ -19,11 +19,11 @@ const frameworks = [

const categories = [
{ value: "venue-provider", label: "Venue Provider" },
{ value: "pav", label: "Photography & Videography" },
{ value: "pav", label: "PaV" },
{ value: "caterer", label: "Caterers" },
{ value: "decorators", label: "Decorator" },
{ value: "propRentals", label: "Prop Rentals" },
{ value: "makeupArtist", label: "Makeup Artist" },
{ value: "decorator", label: "Decorator" },
{ value: "prop-rental", label: "Prop Rental" },
{ value: "makeup-artist", label: "Makeup Artist" },
];

const yearsInOperation = [
Expand All @@ -34,10 +34,10 @@ const yearsInOperation = [
];

const operationalCities = [
{ value: "del", label: "Delhi" },
{ value: "kol", label: "Kolkata" },
{ value: "mum", label: "Mumbai" },
{ value: "ban", label: "bangalore" },
{ value: "ny", label: "New York" },
{ value: "sf", label: "San Francisco" },
{ value: "la", label: "Los Angeles" },
{ value: "chi", label: "Chicago" },
];

export type businessDetails = {
Expand All @@ -52,6 +52,7 @@ export type businessDetails = {
};

const BusinessDetails = () => {
const router = useRouter();
const [businessDetails, setBusinessDetails] = useState<businessDetails>(
{} as businessDetails,
);
Expand Down Expand Up @@ -115,7 +116,7 @@ const BusinessDetails = () => {
addBusinessDetails(userId, newDetails);

// Redirect to the selected category's page
Router.push(`/${businessDetails.category}`);
router.push(`/${businessDetails.category}`);
};

return (
Expand Down Expand Up @@ -248,16 +249,13 @@ const BusinessDetails = () => {
</div>
<div className="flex min-w-[40%] flex-col gap-4">
<label htmlFor="cities">Operational Cities</label>
<label htmlFor="gstin">GSTIN</label>
<input
id="cities"
type="text"
className="w-full rounded-xl border-2 bg-white p-5 py-3 outline-none"
placeholder="Enter your cities"
ref={(el) => {
refs.current.gstin = el;
<Combobox
options={operationalCities}
placeholder="Select Operational Cities"
setFunction={(val) => {
setBusinessDetails({ ...businessDetails, cities: [val] });
}}
required
className="flex items-center justify-between rounded-xl border-2 py-6 hover:text-[#2E3192]"
/>
</div>
</div>
Expand Down
59 changes: 26 additions & 33 deletions src/app/(vendor onboarding)/invitation/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Page1 from "./page1/page1";
import Page2 from "./page2/page2";
import Page3 from "./page3/page3";
Expand Down Expand Up @@ -45,6 +45,9 @@ interface FormState {
clienttestimonials: string;
extracharges: boolean;
deposit: boolean;

currentPage: number;
setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}

const Invitation: React.FC = () => {
Expand Down Expand Up @@ -81,8 +84,14 @@ const Invitation: React.FC = () => {
clienttestimonials: "",
extracharges: false,
deposit: false,
currentPage,
setCurrentPage,
});

useEffect(() => {
console.log("Current Page: ", currentPage);
}, [currentPage]);

const updateFormState = (newState: Partial<FormState>) => {
setFormState((prev) => ({ ...prev, ...newState }));
};
Expand Down Expand Up @@ -254,6 +263,8 @@ const Invitation: React.FC = () => {
updateFormState={updateFormState}
paperType={paperType}
setPaperType={setPaperType}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
);
case 3:
Expand All @@ -263,11 +274,18 @@ const Invitation: React.FC = () => {
updateFormState={updateFormState}
envelopeTypes={envelopTypes}
setEnvelopeTypes={setEnvelopTypes}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
);
case 4:
return (
<Page4 formState={formState} updateFormState={updateFormState} />
<Page4
formState={formState}
updateFormState={updateFormState}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
);
case 5:
return (
Expand All @@ -280,6 +298,8 @@ const Invitation: React.FC = () => {
setAdvancePayment={setAdvancePayment}
handlePackageChange={handlePackageChange}
addPackage={addPackage}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
);
default:
Expand Down Expand Up @@ -319,42 +339,15 @@ const Invitation: React.FC = () => {
setAdvancePayment={setAdvancePayment}
handlePackageChange={handlePackageChange}
addPackage={addPackage}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
handleSubmit={handleSubmit}
/>
);
}
};

return (
<div>
{renderPage()}
<div className="my-9 mr-[5%] flex flex-row justify-end gap-7">
{currentPage > 1 && (
<button
className="rounded-xl border-2 border-[#2E3192] text-[#2E3192] xs:w-fit xs:px-3 xs:py-2 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
onClick={() => setCurrentPage(currentPage - 1)}
>
Previous
</button>
)}
{currentPage < 6 && (
<button
onClick={() => setCurrentPage(currentPage + 1)}
className="rounded-xl bg-[#2E3192] text-white xs:w-fit xs:px-4 xs:py-3 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
>
Next
</button>
)}
{currentPage === 6 && (
<button
onClick={handleSubmit}
className="rounded-xl bg-[#2E3192] text-white xs:w-fit xs:px-4 xs:py-3 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
>
Submit
</button>
)}
</div>
</div>
);
return <div>{renderPage()}</div>;
};

export default Invitation;
40 changes: 34 additions & 6 deletions src/app/(vendor onboarding)/invitation/page1/page1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ interface FormState {
references: boolean;
portfolio: string;
experience: string;
currentPage: number;
setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}

interface Page1Props {
Expand Down Expand Up @@ -179,7 +181,8 @@ const Page = ({
otherInvitation,
setOtherInvitation,
}: Page1Props) => {
const { references, portfolio, experience } = formState;
const { references, portfolio, experience, currentPage, setCurrentPage } =
formState;

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
Expand All @@ -189,25 +192,40 @@ const Page = ({
<div className="flex h-full min-h-[calc(100vh-5.2rem)] w-full flex-col overflow-hidden lg:flex-row">
<div className="flex flex-col items-start justify-between bg-[#FFFFFF] xs:gap-7 xs:pt-4 md:min-w-[30%] lg:max-w-[30%]">
<div className="flex items-center justify-start gap-1 xs:self-start xs:pl-5 md:px-11 lg:mt-[2rem]">
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white">
<button
onClick={() => setCurrentPage(1)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white"
>
1
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(2)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
2
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(3)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
3
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
</div>
<div className="flex items-center justify-start gap-1 xs:self-start xs:pl-5 md:px-11 lg:mt-[1rem]">
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(4)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
4
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(5)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
5
</button>
</div>
Expand Down Expand Up @@ -425,6 +443,16 @@ const Page = ({
Continue
</button>
</div> */}

{/* Navigation Buttons */}
<div className="mr-[5%] flex w-full justify-end">
<button
onClick={() => setCurrentPage(currentPage + 1)}
className="rounded-xl bg-[#2E3192] text-white xs:w-fit xs:px-4 xs:py-3 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
>
Next
</button>
</div>
</div>
</div>
</div>
Expand Down
53 changes: 42 additions & 11 deletions src/app/(vendor onboarding)/invitation/page2/page2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,17 @@ interface Page2Props {
updateFormState: (newState: Partial<FormState>) => void;
paperType: string[];
setPaperType: React.Dispatch<React.SetStateAction<string[]>>;
currentPage: number;
setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}

const Page: React.FC<Page2Props> = ({
formState,
updateFormState,
paperType,
setPaperType,
currentPage,
setCurrentPage,
}) => {
const {
customInvitationsFromScratch,
Expand All @@ -50,35 +54,44 @@ const Page: React.FC<Page2Props> = ({
letterPressPrinting,
} = formState;

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log(formState);
console.log(paperType);
};

return (
<div className="flex h-full min-h-[calc(100vh-5.2rem)] w-full flex-col overflow-hidden lg:flex-row">
<div className="flex flex-col items-start justify-between bg-[#FFFFFF] xs:gap-7 xs:pt-4 md:min-w-[30%] lg:max-w-[30%]">
<div className="flex items-center justify-start gap-1 xs:self-start xs:pl-5 md:px-11 lg:mt-[2rem]">
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white">
<button
onClick={() => setCurrentPage(1)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white"
>
1
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-[#2E3192]"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white">
<button
onClick={() => setCurrentPage(2)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2E3192] p-5 text-white"
>
2
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(3)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
3
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
</div>
<div className="flex items-center justify-start gap-1 xs:self-start xs:pl-5 md:px-11 lg:mt-[1rem]">
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(4)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
4
</button>
<div className="h-[0.3rem] w-[4rem] rounded-xl bg-gray-300"></div>
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5">
<button
onClick={() => setCurrentPage(5)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 p-5"
>
5
</button>
</div>
Expand Down Expand Up @@ -344,6 +357,24 @@ const Page: React.FC<Page2Props> = ({
Continue
</button>
</div> */}
{/* Button container */}
<div className="mr-[5%] flex w-full justify-end gap-[32px]">
{/* Previous Button */}
<button
onClick={() => setCurrentPage(currentPage - 1)}
className="rounded-xl border-2 border-[#2E3192] text-[#2E3192] xs:w-fit xs:px-4 xs:py-3 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
>
Previous
</button>

{/* Next Button */}
<button
onClick={() => setCurrentPage(currentPage + 1)}
className="rounded-xl bg-[#2E3192] text-white xs:w-fit xs:px-4 xs:py-3 md:w-fit md:min-w-[10rem] md:px-4 md:py-3"
>
Next
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 63df7de

Please sign in to comment.