Skip to content

Commit

Permalink
Update color & layout
Browse files Browse the repository at this point in the history
  • Loading branch information
taskooh committed Aug 25, 2024
1 parent 49dc5f9 commit 295eb74
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 142 deletions.
121 changes: 64 additions & 57 deletions src/app/customer/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,67 +22,74 @@ export default function CustomerPage() {
}, [selectedStore]);

return (
<main className="p-4 container mx-auto relative">
<div className="absolute top-4 right-4">
<MyConnectButton />
</div>
<main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col items-center justify-center p-8">
<div className="bg-white p-8 rounded-xl shadow-2xl max-w-6xl w-full">
<div className="absolute top-4 right-4">
<MyConnectButton />
</div>

<h1 className="text-2xl font-bold mb-4">Customer Page</h1>
<h2 className="text-xl font-semibold mb-6">Select a store</h2>
<h1 className="text-3xl font-bold mb-8 text-gray-800">Customer Page</h1>
<h2 className="text-xl font-semibold mb-6 text-gray-700">Select a store</h2>

<StoreSelector
selectedStore={selectedStore}
setSelectedStore={setSelectedStore}
/>
{selectedStore !== null && (
<TimeSlotSelector
storeId={selectedStore}
onSelectTimeSlot={(reservationId: number) => {
setSelectedReservationId(reservationId);
}}
<StoreSelector
selectedStore={selectedStore}
setSelectedStore={setSelectedStore}
/>
)}
{selectedStore !== null && selectedReservationId !== null && (
<TransactionButton
transaction={() => {
// TODO: replace with actual reservation ID
const tx = bookReservation(selectedReservationId);
return tx;
}}
onTransactionSent={(result) => {
console.log("Transaction submitted", result.transactionHash);
}}
onTransactionConfirmed={(receipt) => {
console.log("Transaction confirmed", receipt.transactionHash);
window.location.reload();
}}
onError={(error) => {
console.error("Transaction error", error);
}}
>
Make a Reservatinon
</TransactionButton>
)}
<div className="mt-8 flex justify-center">
<Link
href="/store"
className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
{selectedStore !== null && (
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-gray-700">Select a Time Slot</h2>
<TimeSlotSelector
storeId={selectedStore}
onSelectTimeSlot={(reservationId: number) => {
setSelectedReservationId(reservationId);
}}
/>
</svg>
To Store Page
</Link>
</div>
)}
{selectedStore !== null && selectedReservationId !== null && (
<div className="mb-8 flex justify-center">
<TransactionButton
transaction={() => {
// TODO: replace with actual reservation ID
const tx = bookReservation(selectedReservationId);
return tx;
}}
onTransactionSent={(result) => {
console.log("Transaction submitted", result.transactionHash);
}}
onTransactionConfirmed={(receipt) => {
console.log("Transaction confirmed", receipt.transactionHash);
window.location.reload();
}}
onError={(error) => {
console.error("Transaction error", error);
}}
>
Make a Reservatinon
</TransactionButton>
</div>
)}
<div className="mt-12 flex justify-center">
<Link
href="/store"
className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mr-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
To Store Page
</Link>
</div>
</div>
</main>
);
}
}
168 changes: 85 additions & 83 deletions src/app/store/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,96 +34,98 @@ export default function StorePage() {
};

return (
<main className="p-8 container mx-auto relative">
<div className="absolute top-4 right-4">
<MyConnectButton />
</div>
<main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col items-center justify-center p-8">
<div className="bg-white p-8 rounded-xl shadow-2xl max-w-6xl w-full">
<div className="absolute top-4 right-4">
<MyConnectButton />
</div>

<h1 className="text-3xl font-bold mb-8">Store Page</h1>
<h1 className="text-3xl font-bold mb-8 text-gray-800">Store Management Page</h1>

<div className="mb-8 p-4 bg-blue-50 rounded-lg shadow-sm">
<h2 className="text-lg font-semibold text-blue-800 mb-2">
Store of choice
</h2>
{selectedStore ? (
<>
<p className="text-blue-600 text-base mb-1">
Store Name: {selectedStore.storeName}
</p>
<p className="text-blue-600 text-base">
Store ID: {selectedStore.storeId.toString()}
</p>
</>
) : (
<p className="text-gray-600 text-base">Store is not selected.</p>
)}
</div>
<div className="mb-8 p-4 bg-blue-50 rounded-lg shadow-sm">
<h2 className="text-lg font-semibold text-blue-800 mb-2">
Selected Store
</h2>
{selectedStore ? (
<>
<p className="text-blue-600 text-base mb-1">
Store Name: {selectedStore.storeName}
</p>
<p className="text-blue-600 text-base">
Store ID: {selectedStore.storeId.toString()}
</p>
</>
) : (
<p className="text-gray-600 text-base">No store selected.</p>
)}
</div>

<div className="mb-8">
<div className="tabs flex justify-around border-b-2">
<button
onClick={() => setActiveTab("storeList")}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "storeList"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
List of owned stores
</button>
<button
onClick={() => setActiveTab("newService")}
disabled={!selectedStore}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "newService"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
Create new Services
</button>
<button
onClick={() => setActiveTab("serviceList")}
disabled={!selectedStore}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "serviceList"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
List of Services
</button>
<button
onClick={() => setActiveTab("loyaltyProgram")}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "loyaltyProgram"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
Loyalty Program Setting
</button>
<div className="mb-8">
<div className="tabs flex justify-around border-b-2">
<button
onClick={() => setActiveTab("storeList")}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "storeList"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
List of owned stores
</button>
<button
onClick={() => setActiveTab("newService")}
disabled={!selectedStore}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "newService"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
Create new Services
</button>
<button
onClick={() => setActiveTab("serviceList")}
disabled={!selectedStore}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "serviceList"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
List of Services
</button>
<button
onClick={() => setActiveTab("loyaltyProgram")}
className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "loyaltyProgram"
? "border-b-4 border-blue-500 text-blue-500 font-semibold"
: "text-gray-500 hover:text-gray-700"
}`}
>
Loyalty Program Setting
</button>
</div>
</div>
</div>

<div className="tab-content mt-8">{renderTabContent()}</div>
<div className="tab-content mt-8">{renderTabContent()}</div>

<div className="mt-12 flex justify-center">
<Link
href="/customer"
className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mr-3"
viewBox="0 0 20 20"
fill="currentColor"
<div className="mt-12 flex justify-center">
<Link
href="/customer"
className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
To Customer Page
</Link>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mr-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
To Customer Page
</Link>
</div>
</div>
</main>
);
}
}
4 changes: 2 additions & 2 deletions src/components/StoreSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Image from "next/image";
import { Store } from "@/utils/type";
import { useActiveAccount } from "thirdweb/react";
import { listReservations, listStores } from "@/utils/store/management";
import { getContract, readContract } from "thirdweb";
import { ZERO_ADDRESS, getContract, readContract } from "thirdweb";
import { chain, client, erc20Abi, loyaltyLogicContractAbi } from "@/app/client";

export default function StoreSelector({
Expand All @@ -29,7 +29,7 @@ export default function StoreSelector({
store.maxFee = fees.length ? Math.max(...fees) : 0;
store.minFee = fees.length ? Math.min(...fees) : 0;

if (store.loyaltyLogicContractAddress !== "0x0000000000000000000000000000000000000000") {
if (store.loyaltyLogicContractAddress !== ZERO_ADDRESS) {
// TODO: Do this in listStores
// get loyalty logic contract address
const loyaltyLogicContract = getContract({
Expand Down

0 comments on commit 295eb74

Please sign in to comment.