From ec6b028dae29477bf8e3f989b8bf5f3e8ef055c3 Mon Sep 17 00:00:00 2001 From: shakir Date: Sat, 6 Sep 2025 13:47:18 +0545 Subject: [PATCH 1/7] feat(appointment): create services service + type --- src/data/services/servicesService.ts | 39 ++++++++++++++++++++++++++++ src/data/types/service.ts | 12 +++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/data/services/servicesService.ts create mode 100644 src/data/types/service.ts diff --git a/src/data/services/servicesService.ts b/src/data/services/servicesService.ts new file mode 100644 index 00000000..51700f92 --- /dev/null +++ b/src/data/services/servicesService.ts @@ -0,0 +1,39 @@ +import { Service } from "../types/service"; + +/** + * Mock services service + */ +export const servicesService = { + /** + * Get all services + */ + async getServices(): Promise { + // Simulate API delay + await new Promise((resolve) => setTimeout(resolve, 1000)); + return [ + { + id: "1", + name: "Haircut", + price: 30.0, + description: "A stylish haircut", + durationInMinutes: 30, + }, + { + id: "2", + name: "Haircut w/ Foil Razor & Beard Trim", + price: 50.0, + description: "A stylish haircut with a foil razor and beard trim", + durationInMinutes: 45, + signatureCuts: ["tapered cut", "foil razor finish"], + }, + { + id: "1", + name: "Beard Trim(no haircut)", + price: 25.0, + description: "A stylish beard trim without a haircut", + durationInMinutes: 30, + imageUrl: "https://images.unsplash.com/photo-1503951914875-452162b0f3f1?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + }, + ]; + } +}; diff --git a/src/data/types/service.ts b/src/data/types/service.ts new file mode 100644 index 00000000..a1df05a3 --- /dev/null +++ b/src/data/types/service.ts @@ -0,0 +1,12 @@ +/** + * Service types + */ +export type Service = { + id: string; + name: string; + description: string; + price: number; + durationInMinutes: number; + imageUrl?: string; + signatureCuts?: string[]; +}; From b3101fd0d3ee5268fc748613aecb83e68c3e23ee Mon Sep 17 00:00:00 2001 From: shakir Date: Sat, 6 Sep 2025 13:47:46 +0545 Subject: [PATCH 2/7] (feat appointment): create service item card --- src/ui/compositions/Cards/Cards.tsx | 134 +++++++++++++++++++++++++++- 1 file changed, 133 insertions(+), 1 deletion(-) diff --git a/src/ui/compositions/Cards/Cards.tsx b/src/ui/compositions/Cards/Cards.tsx index 7bb6ee02..a0acbc4c 100644 --- a/src/ui/compositions/Cards/Cards.tsx +++ b/src/ui/compositions/Cards/Cards.tsx @@ -1,7 +1,8 @@ import clsx from "clsx"; import { PricingPlan, Product } from "data"; import { useMediaQuery } from "hooks"; -import { IconStar } from "icons"; +import { IconInfo, IconStar } from "icons"; +import { placeholder } from "images"; import { Flex } from "layout"; import { Avatar, @@ -10,6 +11,8 @@ import { Button, ButtonGroup, ButtonProps, + DialogTrigger, + IconButton, Image, Text, TextHeading, @@ -20,6 +23,7 @@ import { TextSmall, TextStrong, TextSubheading, + Tooltip, } from "primitives"; import { ComponentPropsWithoutRef, ReactNode } from "react"; import { AnchorOrButton, AnchorOrButtonProps } from "utils"; @@ -552,3 +556,131 @@ export function TestimonialCard({ ); } + +export type ServiceItemCardProps = Pick & { + /** + * The service id for booking + */ + id: string; + /** + * The service name + */ + heading: string; + /** + * The price excluding currency + */ + price: number; + /** + * The duration of the service excluding units (e.g. "30 minutes") + */ + duration: number; + /** + * The signature cuts offered + */ + signatureCuts?: string; + /** + * The image url for the service + */ + imageUrl?: string; +}; + +/** + * This is used to show a loading state for ServiceItemCard. + * It has no props, but accepts a size prop to determine the size of the card. + */ + +export function ServiceItemCardSkeleton({}: {}) { + return ( + + } + > + +   +   +   + + + ); +} + +/** + * A card that demonstrates service item + */ +export function ServiceItemCard({ + asset, + heading, + price, + signatureCuts, + id, + duration, + ...props +}: ServiceItemCardProps) { + return ( + + } + > + + + + {heading} + {signatureCuts && ( + + + + + + Our signature cut + {signatureCuts} + + + )} + + + ${price} – {duration} minutes + + + + + + + + + + ); +} From c9621013feb96ffcb9dafa85496971f27b7a2e4b Mon Sep 17 00:00:00 2001 From: shakir Date: Sat, 6 Sep 2025 13:48:16 +0545 Subject: [PATCH 3/7] feat(appointments): add appointment services list + its styling --- src/App.tsx | 16 +------- src/examples/AppointmentBooking.tsx | 61 +++++++++++++++++++++++++++++ src/examples/appointmentbooking.css | 27 +++++++++++++ 3 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 src/examples/AppointmentBooking.tsx create mode 100644 src/examples/appointmentbooking.css diff --git a/src/App.tsx b/src/App.tsx index b7ca42c1..6827c58a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,12 @@ import { Footer, Header } from "compositions"; import { AllProviders } from "data"; -import { Demo } from "./examples/Demo"; -import { FAQs } from "./examples/FAQs"; -import { PanelSections } from "./examples/PanelSections"; -import { PricingGrid } from "./examples/PricingGrid"; -import { ProductDetails } from "./examples/ProductDetails"; -import { ProductGrid } from "./examples/ProductGrid"; -import { WelcomeHero } from "./examples/WelcomeHero"; +import AppointmentBooking from "./examples/AppointmentBooking"; function App() { return (
- - - - - - - +