We received your order!
37 |A summary of your order was sent to your email address.
38 |
44 |
49 | );
50 | }
51 |
52 | interface ProductsProps {
53 | collectionId: string;
54 | page: number;
55 | }
56 |
57 | async function Products({ collectionId, page }: ProductsProps) {
58 | const pageSize = 8;
59 |
60 | const collectionProducts = await queryProducts(getWixServerClient(), {
61 | collectionIds: collectionId,
62 | limit: pageSize,
63 | skip: (page - 1) * pageSize,
64 | });
65 |
66 | if (!collectionProducts.length) notFound();
67 |
68 | if (page > (collectionProducts.totalPages || 1)) notFound();
69 |
70 | return (
71 | Products
45 |
72 |
82 | );
83 | }
84 |
85 | function LoadingSkeleton() {
86 | return (
87 |
73 | {collectionProducts.items.map((product) => (
74 |
77 |
88 | {Array.from({ length: 8 }).map((_, i) => (
89 |
92 | );
93 | }
94 |
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codinginflow/nextjs-15-wix-store/11f628c1b80eaf71ad010d2d42167e9bb6da10bf/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @import "~react-medium-image-zoom/dist/styles.css";
6 |
7 | @layer base {
8 | :root {
9 | --background: 0 0% 100%;
10 | --foreground: 20 14.3% 4.1%;
11 | --card: 0 0% 100%;
12 | --card-foreground: 20 14.3% 4.1%;
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 20 14.3% 4.1%;
15 | --primary: 24.6 95% 53.1%;
16 | --primary-foreground: 60 9.1% 97.8%;
17 | --secondary: 60 4.8% 95.9%;
18 | --secondary-foreground: 24 9.8% 10%;
19 | --muted: 60 4.8% 95.9%;
20 | --muted-foreground: 25 5.3% 44.7%;
21 | --accent: 60 4.8% 95.9%;
22 | --accent-foreground: 24 9.8% 10%;
23 | --destructive: 0 84.2% 60.2%;
24 | --destructive-foreground: 60 9.1% 97.8%;
25 | --border: 20 5.9% 90%;
26 | --input: 20 5.9% 90%;
27 | --ring: 24.6 95% 53.1%;
28 | --radius: 0rem;
29 | --chart-1: 12 76% 61%;
30 | --chart-2: 173 58% 39%;
31 | --chart-3: 197 37% 24%;
32 | --chart-4: 43 74% 66%;
33 | --chart-5: 27 87% 67%;
34 | }
35 |
36 | .dark {
37 | --background: 20 14.3% 4.1%;
38 | --foreground: 60 9.1% 97.8%;
39 | --card: 20 14.3% 4.1%;
40 | --card-foreground: 60 9.1% 97.8%;
41 | --popover: 20 14.3% 4.1%;
42 | --popover-foreground: 60 9.1% 97.8%;
43 | --primary: 20.5 90.2% 48.2%;
44 | --primary-foreground: 60 9.1% 97.8%;
45 | --secondary: 12 6.5% 15.1%;
46 | --secondary-foreground: 60 9.1% 97.8%;
47 | --muted: 12 6.5% 15.1%;
48 | --muted-foreground: 24 5.4% 63.9%;
49 | --accent: 12 6.5% 15.1%;
50 | --accent-foreground: 60 9.1% 97.8%;
51 | --destructive: 0 72.2% 50.6%;
52 | --destructive-foreground: 60 9.1% 97.8%;
53 | --border: 12 6.5% 15.1%;
54 | --input: 12 6.5% 15.1%;
55 | --ring: 20.5 90.2% 48.2%;
56 | --chart-1: 220 70% 50%;
57 | --chart-2: 160 60% 45%;
58 | --chart-3: 30 80% 55%;
59 | --chart-4: 280 65% 60%;
60 | --chart-5: 340 75% 55%;
61 |
62 | [data-rmiz-modal-overlay="visible"] {
63 | background-color: black;
64 | }
65 | }
66 | }
67 |
68 | @layer base {
69 | * {
70 | @apply border-border;
71 | }
72 | body {
73 | @apply bg-background text-foreground;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Toaster } from "@/components/ui/toaster";
2 | import type { Metadata } from "next";
3 | import { ThemeProvider } from "next-themes";
4 | import { Lora } from "next/font/google";
5 | import Footer from "./Footer";
6 | import "./globals.css";
7 | import Navbar from "./Navbar";
8 | import ReactQueryProvider from "./ReactQueryProvider";
9 |
10 | const lora = Lora({ subsets: ["latin"] });
11 |
12 | export const metadata: Metadata = {
13 | title: {
14 | template: "%s | Flow Shop",
15 | absolute: "Flow Shop",
16 | },
17 | description: "A full-stack e-commerce application built with Next.js 15",
18 | };
19 |
20 | export default function RootLayout({
21 | children,
22 | }: Readonly<{
23 | children: React.ReactNode;
24 | }>) {
25 | return (
26 |
27 |
28 | {children}
37 |
38 | Not Found
5 |The page you are looking for does not exist.
6 |
17 |
40 |
18 |
31 | 19 | Fill the void in your heart 20 |
21 |22 | Tough day? Credit card maxed out? Buy some expensive stuff and 23 | become happy again! 24 |
25 | 30 |
32 |
39 |
66 |
73 | );
74 | }
75 |
76 | function LoadingSkeleton() {
77 | return (
78 | Featured Products
67 |
68 | {featuredProducts.items.map((product) => (
69 |
72 |
79 | {Array.from({ length: 8 }).map((_, i) => (
80 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/src/app/products/[slug]/ProductDetails.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import AddToCartButton from "@/components/AddToCartButton";
4 | import BackInStockNotificationButton from "@/components/BackInStockNotificationButton";
5 | import BuyNowButton from "@/components/BuyNowButton";
6 | import {
7 | Accordion,
8 | AccordionContent,
9 | AccordionItem,
10 | AccordionTrigger,
11 | } from "@/components/ui/accordion";
12 | import Badge from "@/components/ui/badge";
13 | import { Input } from "@/components/ui/input";
14 | import { Label } from "@/components/ui/label";
15 | import { checkInStock, findVariant } from "@/lib/utils";
16 | import { products } from "@wix/stores";
17 | import { InfoIcon } from "lucide-react";
18 | import { useState } from "react";
19 | import ProductMedia from "./ProductMedia";
20 | import ProductOptions from "./ProductOptions";
21 | import ProductPrice from "./ProductPrice";
22 |
23 | interface ProductDetailsProps {
24 | product: products.Product;
25 | }
26 |
27 | export default function ProductDetails({ product }: ProductDetailsProps) {
28 | const [quantity, setQuantity] = useState(1);
29 |
30 | const [selectedOptions, setSelectedOptions] = useState<
31 | Record
59 |
153 | );
154 | }
155 |
--------------------------------------------------------------------------------
/src/app/products/[slug]/ProductMedia.tsx:
--------------------------------------------------------------------------------
1 | import WixImage from "@/components/WixImage";
2 | import { cn } from "@/lib/utils";
3 | import { products } from "@wix/stores";
4 | import { PlayIcon } from "lucide-react";
5 | import { useEffect, useState } from "react";
6 | import Zoom from "react-medium-image-zoom";
7 |
8 | interface ProductMediaProps {
9 | media: products.MediaItem[] | undefined;
10 | }
11 |
12 | export default function ProductMedia({ media }: ProductMediaProps) {
13 | const [selectedMedia, setSelectedMedia] = useState(media?.[0]);
14 |
15 | useEffect(() => {
16 | setSelectedMedia(media?.[0]);
17 | }, [media]);
18 |
19 | if (!media?.length) return null;
20 |
21 | const selectedImage = selectedMedia?.image;
22 | const selectedVideo = selectedMedia?.video?.files?.[0];
23 |
24 | return (
25 |
67 |
152 |
68 | {product.ribbon} }
73 |
74 | {product.description && (
75 |
79 | )}
80 | {product.name}
69 | {product.brand && ( 70 |{product.brand}
71 | )}
72 | {product.ribbon &&
87 |
88 |
105 | {inStock ? (
106 |
89 | setQuantity(Number(e.target.value))}
94 | className="w-24"
95 | disabled={!inStock}
96 | />
97 | {!!availableQuantity &&
98 | (availableQuantityExceeded || availableQuantity < 10) && (
99 |
100 | Only {availableQuantity} left in stock
101 |
102 | )}
103 |
104 |
107 |
121 | ) : (
122 |
130 |
131 |
135 | {product.additionalInfoSections.map((section) => (
136 |
137 | {section.title}
138 |
139 |
145 |
146 |
147 | ))}
148 |
149 |
150 | )}
151 |
26 |
60 | );
61 | }
62 |
63 | interface MediaPreviewProps {
64 | mediaItem: products.MediaItem;
65 | isSelected: boolean;
66 | onSelect: () => void;
67 | }
68 |
69 | function MediaPreview({ mediaItem, isSelected, onSelect }: MediaPreviewProps) {
70 | const imageUrl = mediaItem.image?.url;
71 | const stillFrameMediaId = mediaItem.video?.stillFrameMediaId;
72 | const thumbnailUrl = mediaItem.thumbnail?.url;
73 | const resolvedThumbnailUrl =
74 | stillFrameMediaId && thumbnailUrl
75 | ? thumbnailUrl.split(stillFrameMediaId)[0] + stillFrameMediaId
76 | : undefined;
77 |
78 | if (!imageUrl && !resolvedThumbnailUrl) return null;
79 |
80 | return (
81 |
27 | {selectedImage?.url ? (
28 |
29 |
36 | ) : selectedVideo?.url ? (
37 |
47 | {media.length > 1 && (
48 |
38 |
44 |
45 | ) : null}
46 |
49 | {media.map((mediaItem) => (
50 | setSelectedMedia(mediaItem)}
55 | />
56 | ))}
57 |
58 | )}
59 |
87 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/app/products/[slug]/ProductOptions.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { checkInStock, cn } from "@/lib/utils";
3 | import { products } from "@wix/stores";
4 |
5 | interface ProductOptionsProps {
6 | product: products.Product;
7 | selectedOptions: Record
18 | {product.productOptions?.map((option) => (
19 |
66 | ))}
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/products/[slug]/ProductPrice.tsx:
--------------------------------------------------------------------------------
1 | import DiscountBadge from "@/components/DiscountBadge";
2 | import { cn } from "@/lib/utils";
3 | import { products } from "@wix/stores";
4 |
5 | interface ProductPriceProps {
6 | product: products.Product;
7 | selectedVariant: products.Variant | null;
8 | }
9 |
10 | export default function ProductPrice({
11 | product,
12 | selectedVariant,
13 | }: ProductPriceProps) {
14 | const priceData = selectedVariant?.variant?.priceData || product.priceData;
15 |
16 | if (!priceData) return null;
17 |
18 | const hasDiscount = priceData.discountedPrice !== priceData.price;
19 |
20 | return (
21 |
22 |
23 | {priceData.formatted?.price}
24 |
25 | {hasDiscount && {priceData.formatted?.discountedPrice}}
26 | {product.discount &&
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/products/[slug]/ProductReviews.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import logo from "@/assets/logo.png";
4 | import LoadingButton from "@/components/LoadingButton";
5 | import { Skeleton } from "@/components/ui/skeleton";
6 | import WixImage from "@/components/WixImage";
7 | import { cn } from "@/lib/utils";
8 | import { wixBrowserClient } from "@/lib/wix-client.browser";
9 | import { getProductReviews } from "@/wix-api/reviews";
10 | import { useInfiniteQuery } from "@tanstack/react-query";
11 | import { reviews } from "@wix/reviews";
12 | import { media as wixMedia } from "@wix/sdk";
13 | import { products } from "@wix/stores";
14 | import { CornerDownRight, StarIcon } from "lucide-react";
15 | import Image from "next/image";
16 | import Zoom from "react-medium-image-zoom";
17 |
18 | interface ProductReviewsProps {
19 | product: products.Product;
20 | }
21 |
22 | export default function ProductReviews({ product }: ProductReviewsProps) {
23 | const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
24 | useInfiniteQuery({
25 | queryKey: ["product-reviews", product._id],
26 | queryFn: async ({ pageParam }) => {
27 | if (!product._id) {
28 | throw Error("Product ID missing");
29 | }
30 |
31 | const pageSize = 2;
32 |
33 | return getProductReviews(wixBrowserClient, {
34 | productId: product._id,
35 | limit: pageSize,
36 | cursor: pageParam,
37 | });
38 | },
39 | select: (data) => ({
40 | ...data,
41 | pages: data.pages.map((page) => ({
42 | ...page,
43 | items: page.items.filter(
44 | (item) =>
45 | item.moderation?.moderationStatus ===
46 | reviews.ModerationModerationStatus.APPROVED,
47 | ),
48 | })),
49 | }),
50 | initialPageParam: null as string | null,
51 | getNextPageParam: (lastPage) => lastPage.cursors.next,
52 | });
53 |
54 | const reviewItems = data?.pages.flatMap((page) => page.items) || [];
55 |
56 | return (
57 |
58 | {status === "pending" && fetchNextPage()}
74 | >
75 | Load more reviews
76 |
77 | )}
78 |
79 | );
80 | }
81 |
82 | interface ReviewProps {
83 | review: reviews.Review;
84 | }
85 |
86 | function Review({
87 | review: { author, reviewDate, content, reply },
88 | }: ReviewProps) {
89 | return (
90 | Error fetching reviews
61 | )} 62 | {status === "success" && !reviewItems.length && !hasNextPage && ( 63 |No reviews yet
64 | )} 65 |
66 | {reviewItems.map((review) => (
67 |
70 | {hasNextPage && (
71 |
91 |
136 | );
137 | }
138 |
139 | export function ProductReviewsLoadingSkeleton() {
140 | return (
141 |
92 |
119 | {reply?.message && (
120 |
93 | {Array.from({ length: 5 }).map((_, i) => (
94 |
104 | {content.title}
} 103 |105 | by {author?.authorName || "Anonymous"} 106 | {reviewDate && <> on {new Date(reviewDate).toLocaleDateString()}} 107 |
108 | {content?.body && ( 109 |{content.body}
110 | )}
111 | {!!content?.media?.length && (
112 |
113 | {content.media.map((media) => (
114 |
117 | )}
118 |
121 |
134 | )}
135 |
122 |
132 | {reply.message}
133 |
142 | {Array.from({ length: 2 }).map((_, i) => (
143 |
150 | );
151 | }
152 |
153 | interface MediaAttachmentProps {
154 | media: reviews.Media;
155 | }
156 |
157 | function MediaAttachment({ media }: MediaAttachmentProps) {
158 | if (media.image) {
159 | return (
160 |
144 |
148 | ))}
149 |
7 |
17 |
8 |
10 |
11 |
16 | 57 |
61 |
62 |
67 | Buyer reviews
63 |
85 |
92 | );
93 | }
94 |
95 | function RelatedProductsLoadingSkeleton() {
96 | return (
97 | Related Products
86 |
87 | {relatedProducts.map((product) => (
88 |
91 |
98 | {Array.from({ length: 4 }).map((_, i) => (
99 |
102 | );
103 | }
104 |
105 | interface ProductReviewsSectionProps {
106 | product: products.Product;
107 | }
108 |
109 | async function ProductReviewsSection({ product }: ProductReviewsSectionProps) {
110 | if (!product._id) return null;
111 |
112 | const wixClient = getWixServerClient();
113 |
114 | const loggedInMember = await getLoggedInMember(wixClient);
115 |
116 | const existingReview = loggedInMember?.contactId
117 | ? (
118 | await getProductReviews(wixClient, {
119 | productId: product._id,
120 | contactId: loggedInMember.contactId,
121 | })
122 | ).items[0]
123 | : null;
124 |
125 | return (
126 |
127 |
134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/src/app/products/id/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { getWixServerClient } from "@/lib/wix-client.server";
2 | import { getProductById } from "@/wix-api/products";
3 | import { notFound, redirect } from "next/navigation";
4 |
5 | interface PageProps {
6 | params: { id: string };
7 | searchParams: any;
8 | }
9 |
10 | export default async function Page({ params, searchParams }: PageProps) {
11 | if (params.id === "someId") {
12 | redirect(`/products/i-m-a-product-1?${new URLSearchParams(searchParams)}`);
13 | }
14 |
15 | const product = await getProductById(getWixServerClient(), params.id);
16 |
17 | if (!product) notFound();
18 |
19 | redirect(`/products/${product.slug}?${new URLSearchParams(searchParams)}`);
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/profile/MemberInfoForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import LoadingButton from "@/components/LoadingButton";
4 | import {
5 | Form,
6 | FormControl,
7 | FormField,
8 | FormItem,
9 | FormLabel,
10 | FormMessage,
11 | } from "@/components/ui/form";
12 | import { Input } from "@/components/ui/input";
13 | import { useUpdateMember } from "@/hooks/members";
14 | import { requiredString } from "@/lib/validation";
15 | import { zodResolver } from "@hookform/resolvers/zod";
16 | import { members } from "@wix/members";
17 | import { useForm } from "react-hook-form";
18 | import { z } from "zod";
19 |
20 | const formSchema = z.object({
21 | loginEmail: requiredString,
22 | firstName: z.string(),
23 | lastName: z.string(),
24 | });
25 |
26 | type FormValues = z.infer
27 | fetchNextPage()}
42 | >
43 | Load more orders
44 |
45 | )}
46 |
47 | );
48 | }
49 |
50 | function OrdersLoadingSkeleton() {
51 | return (
52 | Your orders
28 | {status === "pending" &&Error fetching orders
31 | )} 32 | {status === "success" && !orders.length && !hasNextPage && ( 33 |No orders yet
34 | )} 35 | {orders.map((order) => ( 36 |
53 | {Array.from({ length: 2 }).map((_, i) => (
54 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/profile/page.tsx:
--------------------------------------------------------------------------------
1 | import { getWixServerClient } from "@/lib/wix-client.server";
2 | import { getLoggedInMember } from "@/wix-api/members";
3 | import { Metadata } from "next";
4 | import { notFound } from "next/navigation";
5 | import MemberInfoForm from "./MemberInfoForm";
6 | import Orders from "./Orders";
7 |
8 | export const metadata: Metadata = {
9 | title: "Profile",
10 | description: "Your profile page",
11 | };
12 |
13 | export default async function Page() {
14 | const member = await getLoggedInMember(getWixServerClient());
15 |
16 | if (!member) notFound();
17 |
18 | return (
19 | 21 | Your profile 22 |
23 |
86 |
94 |
87 | updateFilters({ sort })}
90 | />
91 |
92 | {children}
93 |
111 |
149 | );
150 | }
151 |
152 | interface PriceFilterProps {
153 | minDefaultInput: string | undefined;
154 | maxDefaultInput: string | undefined;
155 | updatePriceRange: (min: string | undefined, max: string | undefined) => void;
156 | }
157 |
158 | function PriceFilter({
159 | minDefaultInput,
160 | maxDefaultInput,
161 | updatePriceRange,
162 | }: PriceFilterProps) {
163 | const [minInput, setMinInput] = useState(minDefaultInput);
164 | const [maxInput, setMaxInput] = useState(maxDefaultInput);
165 |
166 | useEffect(() => {
167 | setMinInput(minDefaultInput || "");
168 | setMaxInput(maxDefaultInput || "");
169 | }, [minDefaultInput, maxDefaultInput]);
170 |
171 | function onSubmit(e: React.FormEvent) {
172 | e.preventDefault();
173 | updatePriceRange(minInput, maxInput);
174 | }
175 |
176 | return (
177 | Collections
112 | -
113 | {collections.map((collection) => {
114 | const collectionId = collection._id;
115 | if (!collectionId) return null;
116 | return (
117 |
- 118 | 136 | 137 | ); 138 | })} 139 |
178 |
208 | );
209 | }
210 |
211 | interface SortFilterProps {
212 | sort: string | undefined;
213 | updateSort: (value: ProductsSort) => void;
214 | }
215 |
216 | function SortFilter({ sort, updateSort }: SortFilterProps) {
217 | return (
218 |
230 | );
231 | }
232 |
--------------------------------------------------------------------------------
/src/app/shop/layout.tsx:
--------------------------------------------------------------------------------
1 | import { getWixServerClient } from "@/lib/wix-client.server";
2 | import { getCollections } from "@/wix-api/collections";
3 | import SearchFilterLayout from "./SearchFilterLayout";
4 |
5 | export default async function Layout({
6 | children,
7 | }: {
8 | children: React.ReactNode;
9 | }) {
10 | const collections = await getCollections(getWixServerClient());
11 |
12 | return (
13 | Price range
179 |
199 | {(!!minDefaultInput || !!maxDefaultInput) && (
200 |
206 | )}
207 |
41 |
53 | );
54 | }
55 |
56 | interface ProductResultsProps {
57 | q?: string;
58 | page: number;
59 | collectionIds?: string[];
60 | priceMin?: number;
61 | priceMax?: number;
62 | sort?: ProductsSort;
63 | }
64 |
65 | async function ProductResults({
66 | q,
67 | page,
68 | collectionIds,
69 | priceMin,
70 | priceMax,
71 | sort,
72 | }: ProductResultsProps) {
73 | const pageSize = 8;
74 |
75 | const products = await queryProducts(getWixServerClient(), {
76 | q,
77 | limit: pageSize,
78 | skip: (page - 1) * pageSize,
79 | collectionIds,
80 | priceMin,
81 | priceMax,
82 | sort,
83 | });
84 |
85 | if (page > (products.totalPages || 1)) notFound();
86 |
87 | return (
88 | {title}
42 |
89 |
100 | );
101 | }
102 |
103 | function LoadingSkeleton() {
104 | return (
105 | 90 | {products.totalCount}{" "} 91 | {products.totalCount === 1 ? "product" : "products"} found 92 |
93 |
94 | {products.items.map((product) => (
95 |
98 |
106 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/src/app/terms/page.tsx:
--------------------------------------------------------------------------------
1 | import { Metadata } from "next";
2 |
3 | export const metadata: Metadata = {
4 | title: "Terms and Conditions",
5 | description: "Terms and conditions for using our services",
6 | };
7 |
8 | export default function Page() {
9 | return (
10 |
108 | {Array.from({ length: 8 }).map((_, i) => (
109 |
112 |
12 |
67 | CUSTOMER CARE
13 |14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 15 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 16 | minim veniam, quis nostrud exercitation ullamco laboris nisi ut 17 | aliquip ex ea commodo consequat. Duis aute irure dolor in 18 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 19 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 20 | culpa qui officia deserunt mollit anim id est laborum. 21 |
22 |23 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 24 | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 25 | ab illo inventore veritatis et quasi architecto beatae vitae dicta 26 | sunt explicabo. 27 |
28 |PRIVACY & SAFETY
29 |30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 31 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 32 | minim veniam, quis nostrud exercitation ullamco laboris nisi ut 33 | aliquip ex ea commodo consequat. Duis aute irure dolor in 34 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 35 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 36 | culpa qui officia deserunt mollit anim id est laborum. 37 |
38 |39 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 40 | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 41 | ab illo inventore veritatis et quasi architecto beatae vitae dicta 42 | sunt explicabo. 43 |
44 |WHOLESALE INQUIRIES
45 |46 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 47 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 48 | minim veniam, quis nostrud exercitation ullamco laboris nisi ut 49 | aliquip ex ea commodo consequat. Duis aute irure dolor in 50 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 51 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 52 | culpa qui officia deserunt mollit anim id est laborum. 53 |
54 |55 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 56 | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 57 | ab illo inventore veritatis et quasi architecto beatae vitae dicta 58 | sunt explicabo. 59 |
60 |PAYMENT METHODS
61 |
62 | - Credit / Debit Cards
63 |
- PAYPAL
64 |
- Offline Payments
65 |
43 |
108 | );
109 | }
110 |
111 | interface OrderItemProps {
112 | item: orders.OrderLineItem;
113 | }
114 |
115 | function OrderItem({ item }: OrderItemProps) {
116 | return (
117 |
44 | Order #{order.number}
45 | {order._createdDate && (
46 | {formatDate(order._createdDate, "MMM d, yyyy")}
47 | )}
48 | `)}`}
50 | className="ms-auto text-sm hover:underline"
51 | >
52 | Need help?
53 |
54 |
55 |
56 |
107 |
57 |
84 | {shippingDestination && (
85 |
58 |
78 |
59 |
60 | Subtotal: {order.priceSummary?.subtotal?.formattedAmount}
61 |
62 |
71 | {paymentStatus || "No information"}
72 |
73 |
74 |
75 | {fulfillmentStatus || "No information"}
76 |
77 |
79 | {order.lineItems?.map((item) => (
80 |
83 |
86 |
105 | )}
106 | Delivery address:
87 | 88 | {shippingDestination.contactDetails?.firstName}{" "} 89 | {shippingDestination.contactDetails?.lastName} 90 |
91 |92 | {shippingDestination.address?.streetAddress?.name}{" "} 93 | {shippingDestination.address?.streetAddress?.number} 94 |
95 |96 | {shippingDestination.address?.postalCode}{" "} 97 | {shippingDestination.address?.city} 98 |
99 |100 | {shippingDestination.address?.subdivision || 101 | shippingDestination.address?.country} 102 |
103 |{order.shippingInfo?.title}
104 |
118 |
142 | );
143 | }
144 |
--------------------------------------------------------------------------------
/src/components/PaginationBar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { useSearchParams } from "next/navigation";
5 | import {
6 | Pagination,
7 | PaginationContent,
8 | PaginationEllipsis,
9 | PaginationItem,
10 | PaginationLink,
11 | PaginationNext,
12 | PaginationPrevious,
13 | } from "./ui/pagination";
14 |
15 | interface PaginationBarProps {
16 | currentPage: number;
17 | totalPages: number;
18 | }
19 |
20 | export default function PaginationBar({
21 | currentPage,
22 | totalPages,
23 | }: PaginationBarProps) {
24 | const searchParams = useSearchParams();
25 |
26 | function getLink(page: number) {
27 | const newSearchParams = new URLSearchParams(searchParams);
28 | newSearchParams.set("page", page.toString());
29 | return `?${newSearchParams.toString()}`;
30 | }
31 |
32 | if (totalPages <= 1) {
33 | return null;
34 | }
35 |
36 | return (
37 |
126 |
141 | {item.productName?.translated}
127 |128 | {item.quantity} x {item.price?.formattedAmount} 129 |
130 | {!!item.descriptionLines?.length && ( 131 |132 | {item.descriptionLines 133 | .map( 134 | (line) => 135 | line.colorInfo?.translated || line.plainText?.translated, 136 | ) 137 | .join(", ")} 138 |
139 | )} 140 |
18 |
33 |
26 | {product.ribbon && {product.ribbon} }
27 | {product.discount &&
29 | {getFormattedPrice(product)}
30 |
31 |
32 |
34 |
40 |
41 | );
42 | }
43 |
44 | function getFormattedPrice(product: products.Product) {
45 | const minPrice = product.priceRange?.minValue;
46 | const maxPrice = product.priceRange?.maxValue;
47 |
48 | if (minPrice && maxPrice && minPrice !== maxPrice) {
49 | return `from ${formatCurrency(minPrice, product.priceData?.currency)}`;
50 | } else {
51 | return (
52 | product.priceData?.formatted?.discountedPrice ||
53 | product.priceData?.formatted?.price ||
54 | "n/a"
55 | );
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/SearchField.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { SearchIcon } from "lucide-react";
5 | import { useRouter } from "next/navigation";
6 | import { Input } from "./ui/input";
7 |
8 | interface SearchFieldProps {
9 | className?: string;
10 | }
11 |
12 | export default function SearchField({ className }: SearchFieldProps) {
13 | const router = useRouter();
14 |
15 | function handleSubmit(e: React.FormEvent{product.name}
35 | 39 |
269 | {file.type.startsWith("image") ? (
270 |
310 | );
311 | }
312 |
--------------------------------------------------------------------------------
/src/components/reviews/StarRatingInput.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { StarIcon } from "lucide-react";
3 |
4 | interface StarRatingInputProps {
5 | value: number;
6 | onChange: (value: number) => void;
7 | }
8 |
9 | export default function StarRatingInput({
10 | value,
11 | onChange,
12 | }: StarRatingInputProps) {
13 | const ratingsText = ["Terrible", "Bad", "Okay", "Good", "Great"];
14 |
15 | return (
16 |
290 |
292 | )}
293 | {state === "failed" && (
294 |
298 |
300 | )}
301 |
309 |
17 | {Array.from({ length: 5 }).map((_, i) => (
18 |
23 | ))}
24 | {ratingsText[value - 1]}
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/reviews/useMediaUpload.ts:
--------------------------------------------------------------------------------
1 | import { useToast } from "@/hooks/use-toast";
2 | import ky from "ky";
3 | import { useState } from "react";
4 |
5 | export interface MediaAttachment {
6 | id: string;
7 | file: File;
8 | url?: string;
9 | state: "uploading" | "uploaded" | "failed";
10 | }
11 |
12 | export default function useMediaUpload() {
13 | const { toast } = useToast();
14 |
15 | const [attachments, setAttachments] = useState{children}
53 | 163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |