34 |
35 |
36 |
37 |
41 |
34 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/app/routes/pages/($locale).cart.$lines.tsx:
--------------------------------------------------------------------------------
1 | import { href, redirect } from "react-router";
2 | import type { Route } from "./+types/($locale).cart.$lines";
3 |
4 | /**
5 | * Automatically creates a new cart based on the URL and redirects straight to checkout.
6 | * Expected URL structure:
7 | * ```js
8 | * /cart/
39 |
58 |
59 |
49 |
50 | {collection.title}
51 |
52 |
53 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/app/components/ui/blur-image.tsx:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useRef, useState } from "react";
2 | import { Image as HydrogenImage } from "@shopify/hydrogen";
3 | import { clsx } from "clsx";
4 | import type { ProductImageFragment } from "storefrontapi.generated";
5 |
6 | // I hate this, why can't I just get the props from HydrogenImage? Why is data optional?
7 | type BlurImageProps = Parameters
56 | {/* Blurred preview image */}
57 | 
67 | {/* Full image */}
68 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/app/components/page-title.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { cn } from "~/lib/cn";
3 | import { useScrollPercentage } from "~/lib/hooks";
4 |
5 | interface PageTitleProps {
6 | children: string;
7 | className?: string;
8 | }
9 |
10 | export function PageTitle({ children, className }: PageTitleProps) {
11 | let ref = useRef
23 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remix-store",
3 | "private": true,
4 | "sideEffects": false,
5 | "version": "2024.4.7",
6 | "type": "module",
7 | "scripts": {
8 | "build": "shopify hydrogen build --codegen",
9 | "dev": "shopify hydrogen dev --codegen",
10 | "preview": "shopify hydrogen preview --build",
11 | "lint": "eslint --no-error-on-unmatched-pattern .",
12 | "typecheck": "react-router typegen && tsc --noEmit",
13 | "codegen": "shopify hydrogen codegen",
14 | "format": "prettier --write .",
15 | "test": "vitest",
16 | "test:ui": "vitest --ui",
17 | "test:coverage": "vitest run --coverage"
18 | },
19 | "dependencies": {
20 | "@radix-ui/react-dropdown-menu": "^2.1.15",
21 | "@radix-ui/react-popover": "^1.1.14",
22 | "@shopify/cli-hydrogen": "^11.1.5",
23 | "@shopify/hydrogen": "^2025.7.0",
24 | "@tailwindcss/vite": "^4.1.11",
25 | "class-variance-authority": "^0.7.1",
26 | "clsx": "^2.1.1",
27 | "embla-carousel": "^8.6.0",
28 | "embla-carousel-react": "^8.6.0",
29 | "graphql": "^16.12.0",
30 | "graphql-tag": "^2.12.6",
31 | "isbot": "^5.1.32",
32 | "react": "^18.3.1",
33 | "react-dom": "^18.3.1",
34 | "react-router": "7.9.6",
35 | "tailwind-merge": "^3.3.1",
36 | "zod": "^4.0.15"
37 | },
38 | "devDependencies": {
39 | "@eslint/compat": "^1.3.1",
40 | "@eslint/eslintrc": "^3.3.3",
41 | "@eslint/js": "^9.39.1",
42 | "@graphql-codegen/cli": "5.0.7",
43 | "@react-router/dev": "7.9.6",
44 | "@react-router/fs-routes": "7.9.6",
45 | "@shopify/cli": "^3.87.4",
46 | "@shopify/hydrogen-codegen": "^0.3.3",
47 | "@shopify/mini-oxygen": "^4.0.0",
48 | "@shopify/oxygen-workers-types": "^4.2.0",
49 | "@testing-library/dom": "^10.4.1",
50 | "@testing-library/jest-dom": "^6.9.1",
51 | "@testing-library/react": "^16.3.0",
52 | "@testing-library/user-event": "^14.6.1",
53 | "@total-typescript/ts-reset": "^0.6.1",
54 | "@types/eslint": "^9.6.1",
55 | "@types/node": "^24.10.1",
56 | "@types/react": "^18.3.21",
57 | "@types/react-dom": "^18.3.7",
58 | "@typescript-eslint/eslint-plugin": "^8.49.0",
59 | "@typescript-eslint/parser": "^8.49.0",
60 | "@vitest/coverage-v8": "^4.0.15",
61 | "@vitest/ui": "^4.0.15",
62 | "eslint": "^9.39.1",
63 | "eslint-config-prettier": "^10.1.8",
64 | "eslint-import-resolver-typescript": "^4.4.4",
65 | "eslint-plugin-eslint-comments": "^3.2.0",
66 | "eslint-plugin-import": "^2.32.0",
67 | "eslint-plugin-jest": "^29.2.1",
68 | "eslint-plugin-jsx-a11y": "^6.10.2",
69 | "eslint-plugin-react": "^7.37.5",
70 | "eslint-plugin-react-hooks": "^5.2.0",
71 | "globals": "^16.5.0",
72 | "happy-dom": "^20.0.11",
73 | "prettier": "^3.7.4",
74 | "tailwindcss": "^4.1.11",
75 | "tw-animate-css": "^1.3.6",
76 | "typescript": "^5.9.3",
77 | "vite": "^6.3.5",
78 | "vite-plugin-icons-spritesheet": "^3.0.1",
79 | "vite-tsconfig-paths": "^5.1.4",
80 | "vitest": "^4.0.15"
81 | },
82 | "engines": {
83 | "node": ">=20.0.0"
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/app/lib/filters/query-variables.server.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "react-router";
2 | import { type CollectionQueryVariables } from "storefrontapi.generated";
3 | import { type ProductFilter } from "@shopify/hydrogen/storefront-api-types";
4 | import {
5 | type SortKey,
6 | SORT_KEY,
7 | FILTER,
8 | getSort,
9 | getAvailable,
10 | getPrice,
11 | getProductTypes,
12 | } from ".";
13 |
14 | /**
15 | * Parses the search params, redirecting if invalid
16 | * If the search params are valid, returns filters as query variables for the
17 | * collection query
18 | */
19 | export function getFilterQueryVariables(
20 | searchParams: URLSearchParams,
21 | ): Omit
24 |
73 | 25 | {children} 26 |
27 | 36 | 45 | 54 | 63 | 72 |
55 |
80 |
84 | );
85 | }
86 |
87 | export const shouldRevalidate = () => true;
88 |
89 | export function Section({
90 | title,
91 | className,
92 | children,
93 | }: {
94 | title: string;
95 | className?: string;
96 | children: React.ReactNode;
97 | }) {
98 | return (
99 |
81 |
83 | {title}
101 |{children}
102 |
8 |
9 |
25 |
26 |
30 |
65 |
66 |
70 |
107 |
108 |
112 |
140 |
141 | );
142 | }
143 |
--------------------------------------------------------------------------------
/app/assets/icons/remix-glyphs.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/app/routes/resources/load-more-products.tsx:
--------------------------------------------------------------------------------
1 | import { type FormProps, useFetcher } from "react-router";
2 | import {
3 | getCollectionQuery,
4 | type CollectionProductData,
5 | } from "~/lib/data/collection.server";
6 | import { useState, useEffect, useCallback } from "react";
7 | import type { Route } from "./+types/load-more-products";
8 |
9 | export async function loader({ request, context }: Route.LoaderArgs) {
10 | let url = new URL(request.url);
11 | let searchParams = new URLSearchParams(url.search);
12 |
13 | let numberOfProducts = Number(searchParams.get("numberOfProducts"));
14 | let endCursor = searchParams.get("endCursor")?.toString();
15 | let collectionHandle = searchParams.get("collectionHandle")?.toString();
16 |
17 | let { storefront } = context;
18 |
19 | if (!collectionHandle) {
20 | throw new Response("Collection handle is required", { status: 400 });
21 | }
22 |
23 | if (!numberOfProducts || isNaN(numberOfProducts)) {
24 | throw new Response("Number of products is required and must be a number", {
25 | status: 400,
26 | });
27 | }
28 |
29 | let { products, productsPageInfo } = await getCollectionQuery(storefront, {
30 | variables: {
31 | handle: collectionHandle,
32 | first: numberOfProducts,
33 | endCursor,
34 | },
35 | });
36 |
37 | return { products, productsPageInfo };
38 | }
39 |
40 | export type LoadMoreProductsOptions = {
41 | initialProducts: CollectionProductData[];
42 | numberOfProducts: number;
43 | collectionHandle: string;
44 | endCursor?: string;
45 | hasNextPage: boolean;
46 | };
47 |
48 | // RSC would be nice right about now
49 |
50 | /**
51 | * This hook is used to load more products from the collection.
52 | * It's used in the ProductGrid component to load more products when the user scrolls to the bottom of the grid.
53 | * It doesn't persist the products as a search param or anything, but for the number of products we have this is probably fine.
54 | */
55 | export function useLoadMoreProducts({
56 | numberOfProducts,
57 | endCursor: initialEndCursor,
58 | collectionHandle,
59 | initialProducts,
60 | hasNextPage: initialHasNextPage,
61 | }: LoadMoreProductsOptions) {
62 | let fetcher = useFetcher10 | The AnimatedLink component provides three animation types with 11 | customizable options: 12 |
13 |-
14 |
- 15 | Icon Animation - Animates an icon on hover 16 | 17 |
- 18 | Text Animation - Reveals additional text on hover 19 | 20 |
- 21 | Both - Combines icon and text animations 22 | 23 |
31 | The icon animation shows a smooth transition when hovering. Required
32 | props: iconName
33 |
36 |
42 | Shop Now
43 |
44 |
45 |
52 | View More
53 |
54 |
55 |
61 | Learn More
62 |
63 |
64 |
71 | The text animation reveals additional text on hover. Required props:{" "}
72 | expandedText
73 |
76 |
82 | Browse
83 |
84 |
85 |
92 | Explore
93 |
94 |
95 |
103 | More
104 |
105 |
106 |
113 | Combines both icon and text animations. Required props:{" "}
114 | iconName and expandedText
115 |
118 |
125 | Shop
126 |
127 |
128 |
136 | View
137 |
138 |
139 |
165 | {children}
166 |
167 |
168 | );
169 | }
170 |
--------------------------------------------------------------------------------
/app/tailwind.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @import "tw-animate-css";
3 |
4 | @custom-variant dark (&:where(.dark, .dark *));
5 |
6 | @theme {
7 | --font-*: initial;
8 | --font-sans:
9 | "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
10 | "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
11 | --font-mono:
12 | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
13 | "Liberation Mono", "Courier New", monospace;
14 | --font-title: "Lexend Zetta", ui-sans-serif, system-ui, sans-serif;
15 |
16 | --breakpoint-*: initial;
17 | --breakpoint-sm: 430px;
18 | --breakpoint-md: 810px;
19 | --breakpoint-lg: 1400px;
20 | --breakpoint-xl: 1640px;
21 | --breakpoint-2xl: 2000px;
22 | --breakpoint-3xl: 2700px;
23 |
24 | --color-*: initial;
25 | --color-inherit: inherit;
26 | --color-current: currentColor;
27 | --color-transparent: transparent;
28 |
29 | --color-blue-400: #54bbff;
30 | --color-blue-brand: #3992ff;
31 | --color-blue-600: #367cff;
32 |
33 | --color-green-brand: #6bd968;
34 |
35 | --color-yellow-brand: #fecc1b;
36 |
37 | --color-pink-brand: #d83bd2;
38 |
39 | --color-red-brand: #f44250;
40 |
41 | --color-black: #000000;
42 | --color-white: #ffffff;
43 |
44 | --color-gray-50: #f7f7f7;
45 | --color-gray-100: #e3e3e3;
46 | --color-gray-200: #c8c8c8;
47 | --color-gray-300: #a4a4a4;
48 | --color-gray-400: #818181;
49 | --color-gray-500: #666666;
50 | --color-gray-600: #515151;
51 | --color-gray-700: #434343;
52 | --color-gray-800: #212121;
53 | --color-gray-900: #111111;
54 |
55 | --text-*: initial;
56 | --text-xs: 0.75rem;
57 | --text-xs--line-height: 1rem;
58 | --text-sm: 0.875rem;
59 | --text-sm--line-height: 1.25rem;
60 | --text-base: 1rem;
61 | --text-base--line-height: 1.4rem;
62 | --text-lg: 1.125rem;
63 | --text-lg--line-height: 1.75rem;
64 | --text-xl: 1.25rem;
65 | --text-xl--line-height: 1.75rem;
66 | --text-2xl: 1.5rem;
67 | --text-2xl--line-height: 2rem;
68 | --text-3xl: 1.875rem;
69 | --text-3xl--line-height: 2.25rem;
70 | --text-4xl: 2.25rem;
71 | --text-4xl--line-height: 2.5rem;
72 | --text-5xl: 3rem;
73 | --text-5xl--line-height: 1;
74 | --text-6xl: 4rem;
75 | --text-6xl--line-height: 1;
76 | --text-7xl: 4.5rem;
77 | --text-7xl--line-height: 1;
78 | --text-8xl: 5.25rem;
79 | --text-8xl--line-height: 1;
80 | --text-9xl: 8rem;
81 | --text-9xl--line-height: 1;
82 |
83 | --ease-snap: cubic-bezier(0.13, 0.74, 0.41, 0.92);
84 |
85 | --animate-pulse-radial: pulse-radial 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
86 | --animate-spin: spin 3s linear infinite;
87 | --animate-marquee: marquee 25s linear infinite;
88 |
89 | @keyframes pulse-radial {
90 | 0%,
91 | 100% {
92 | background-size: 20% 20%;
93 | }
94 | 50% {
95 | background-size: 80% 80%;
96 | }
97 | }
98 |
99 | @keyframes marquee {
100 | 0% {
101 | transform: translateX(-0%);
102 | }
103 | 100% {
104 | transform: translateX(-50%);
105 | }
106 | }
107 | }
108 |
109 | @font-face {
110 | font-family: "Inter";
111 | font-weight: 100 900;
112 | font-display: swap;
113 | font-style: normal;
114 | src: url("/font/inter-roman-latin-var.woff2") format("woff2");
115 | }
116 |
117 | @font-face {
118 | font-family: "Inter";
119 | font-weight: 100 900;
120 | font-display: swap;
121 | font-style: italic;
122 | src: url("/font/inter-italic-latin-var.woff2") format("woff2");
123 | }
124 |
125 | @font-face {
126 | font-family: "JetBrains Mono";
127 | font-weight: 100 900;
128 | font-display: swap;
129 | font-style: normal;
130 | src: url("/font/jet-brains-mono.woff2") format("woff2");
131 | }
132 |
133 | @font-face {
134 | font-family: "Lexend Zetta";
135 | font-weight: 900;
136 | font-display: swap;
137 | font-style: normal;
138 | src: url("/font/lexend-zetta-black.woff2") format("woff2");
139 | }
140 |
141 | :root {
142 | --header-height: 80px;
143 |
144 | @media (width >= theme(--breakpoint-md)) {
145 | --header-height: 136px;
146 | }
147 |
148 | @media (prefers-reduced-motion: reduce) {
149 | --animate-marquee: none;
150 | }
151 | }
152 |
153 | @layer base {
154 | html,
155 | body {
156 | @apply font-sans text-white scheme-dark;
157 | }
158 |
159 | a {
160 | @apply text-white transition-colors duration-300 ease-in-out hover:text-blue-600;
161 | }
162 | }
163 |
164 | @utility icon-animation {
165 | --animated-link-duration: 200ms;
166 | --animated-link-delay: 150ms;
167 |
168 | transition:
169 | max-width var(--animated-link-duration) var(--ease-snap)
170 | var(--animated-link-delay),
171 | margin var(--animated-link-duration) var(--ease-snap)
172 | var(--animated-link-delay),
173 | scale var(--animated-link-duration) var(--ease-snap),
174 | opacity var(--animated-link-duration) var(--ease-snap);
175 |
176 | @variant group-hover {
177 | transition:
178 | max-width var(--animated-link-duration) var(--ease-snap),
179 | margin var(--animated-link-duration) var(--ease-snap),
180 | scale var(--animated-link-duration) var(--ease-snap)
181 | var(--animated-link-delay),
182 | opacity var(--animated-link-duration) var(--ease-snap)
183 | var(--animated-link-delay);
184 | }
185 | }
186 |
187 | @keyframes check-appear {
188 | 0% {
189 | transform: scale(0.75) rotate(-12deg);
190 | }
191 |
192 | 30% {
193 | transform: rotate(10deg);
194 | }
195 |
196 | 100% {
197 | transform: scale(1) rotate(0);
198 | }
199 | }
200 |
201 | @utility add-to-cart-icon {
202 | transform: scale(0.75) rotate(-12deg);
203 | animation: check-appear 400ms var(--ease-snap) 200ms forwards;
204 | }
205 |
206 | @utility rich-text {
207 | ul {
208 | list-style: none;
209 | }
210 | ul li {
211 | position: relative;
212 | padding-left: 1em;
213 | line-height: 1.6em;
214 | }
215 | ul li::before {
216 | content: "•";
217 | position: absolute;
218 | left: 0;
219 | }
220 |
221 | a {
222 | @apply hover:text-blue-brand text-blue-400 transition-none hover:underline;
223 | }
224 | }
225 |
226 | @utility policy-container {
227 | @apply -mt-12 px-9;
228 |
229 | & h2 {
230 | @apply mt-12 text-2xl/tight font-bold md:text-4xl/tight lg:text-[2.5rem]/tight;
231 | }
232 |
233 | & p {
234 | @apply mt-6 text-sm lg:text-base;
235 | }
236 |
237 | & a {
238 | @apply hover:text-blue-brand text-blue-400 transition-none hover:underline;
239 | }
240 |
241 | & blockquote {
242 | @apply mt-6 bg-gray-800 p-6;
243 | }
244 |
245 | & blockquote p:first-child {
246 | @apply mt-0;
247 | }
248 |
249 | & ul {
250 | @apply list-disc pl-6;
251 | }
252 |
253 | & ol {
254 | @apply list-decimal pl-6;
255 | }
256 |
257 | & li {
258 | @apply static mt-4 pl-0;
259 | }
260 | }
261 |
--------------------------------------------------------------------------------
/app/lib/filters/index.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { useNavigation, useSearchParams, useSubmit } from "react-router";
3 |
4 | export const SORT_KEY = "sort";
5 |
6 | export type SortKey =
7 | | "best-selling"
8 | | "price-high-to-low"
9 | | "price-low-to-high"
10 | | "newest";
11 |
12 | /**
13 | * The available product types for filtering.
14 | *
15 | * I have not found a way to get these from the storefront API, so hardcoded here.
16 | */
17 | const PRODUCT_TYPES = [
18 | "apparel",
19 | "accessories",
20 | "stationery",
21 | "stickers",
22 | "toys",
23 | ] as const;
24 |
25 | export const SORT_OPTIONS = [
26 | { value: "best-selling", label: "Best Selling" },
27 | { value: "price-high-to-low", label: "Price: High To Low" },
28 | { value: "price-low-to-high", label: "Price: Low To High" },
29 | { value: "newest", label: "Newest" },
30 | ] satisfies { value: SortKey; label: string }[];
31 |
32 | export const FILTER = {
33 | AVAILABLE: "available",
34 | PRICE_MIN: "price.min",
35 | PRICE_MAX: "price.max",
36 | PRODUCT_TYPE: "product-type",
37 | } as const;
38 |
39 | export type FilterKey = (typeof FILTER)[keyof typeof FILTER];
40 |
41 | type ProductType = (typeof PRODUCT_TYPES)[number];
42 |
43 | function usePendingSearchParams() {
44 | let [searchParams] = useSearchParams();
45 |
46 | const navigation = useNavigation();
47 | if (navigation.state === "loading") {
48 | searchParams = new URLSearchParams(navigation.location.search);
49 | }
50 |
51 | return searchParams;
52 | }
53 |
54 | const sortOptionMap = new Map(
55 | SORT_OPTIONS.map((option) => [option.value, option]),
56 | );
57 | export function useCurrentSort() {
58 | const searchParams = usePendingSearchParams();
59 | const { value } = getSort(searchParams);
60 | const sortOption = value && sortOptionMap.get(value);
61 | return sortOption ?? SORT_OPTIONS[0];
62 | }
63 |
64 | export function useFiltersSubmit() {
65 | const formRef = useRef
43 | {"then" in products ? (
44 |
74 | );
75 | }
76 |
77 | function ProductGridSkeleton({
78 | loadingProductCount = defaultLoadingProductCount,
79 | }: Pick
69 |
70 |
71 |
72 | )}
73 |
106 |
111 |
112 | {title}
113 |
114 |
116 |
183 |
190 |
192 |
200 | );
201 | }
202 |
203 | return
214 | {children}
215 |
216 | );
217 | }
218 |
219 | function ImageLayout({ children, className }: LayoutProps) {
220 | return (
221 |
227 | {children}
228 |
229 | );
230 | }
231 |
--------------------------------------------------------------------------------
/app/components/product-images.tsx:
--------------------------------------------------------------------------------
1 | import useEmblaCarousel from "embla-carousel-react";
2 | import { DotButton, useDotButton } from "~/components/carousel/dot-button";
3 | import {
4 | NextButton,
5 | PrevButton,
6 | usePrevNextButtons,
7 | } from "~/components/carousel/arrow-buttons";
8 | import { cn } from "~/lib/cn";
9 | import { useRef, useState } from "react";
10 | import { useLayoutEffect, usePrefersReducedMotion } from "~/lib/hooks";
11 | import { Icon } from "./icon";
12 | import BlurImage from "./ui/blur-image";
13 |
14 | import type { ProductVariantFragment } from "storefrontapi.generated";
15 |
16 | export function ProductImages({
17 | images,
18 | }: {
19 | images: Array
42 | {images.map((image, index) => {
43 | if (!image || !image.id) return null;
44 |
45 | let defaultOpacity = index === 0 ? 1 : 0;
46 |
47 | return (
48 |
65 | );
66 | }
67 |
68 | function ImageCarousel({
69 | images,
70 | }: {
71 | images: ProductVariantFragment["image"][];
72 | }) {
73 | let [emblaRef, emblaApi] = useEmblaCarousel();
74 |
75 | let { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);
76 |
77 | let {
78 | prevBtnDisabled,
79 | nextBtnDisabled,
80 | onPrevButtonClick,
81 | onNextButtonClick,
82 | } = usePrevNextButtons(emblaApi);
83 |
84 | return (
85 |
54 |
62 | );
63 | })}
64 |
87 |
108 |
109 | {/* Only show the carousel controls if there's more than one image */}
110 | {images.length > 1 && (
111 |
88 | {images.map((image, index) => {
89 | if (!image) return null;
90 |
91 | return (
92 |
107 |
96 |
104 | );
105 | })}
106 |
112 |
118 |
120 |
140 |
142 |
143 | )}
144 |
121 | {scrollSnaps.map((btnIndex, index) => {
122 | return (
123 | onDotButtonClick(index)}
126 | className={cn("h-2 w-2 rounded-full bg-white", {
127 | "bg-white/50": index !== selectedIndex,
128 | })}
129 | aria-label={`Skip to image ${index + 1}`}
130 | />
131 | );
132 | })}
133 |
134 | 30 | {totalQuantity} item(s) in cart 31 |
32 | ); 33 | } 34 | 35 | export function CheckoutLink({ 36 | to, 37 | disabled = false, 38 | className, 39 | ...props 40 | }: { 41 | to: string; 42 | disabled?: boolean; 43 | } & Omit
129 |
137 |
138 | {product.title}
130 |{title !== "Default Title" && title}
131 |
167 | {quantity === 1 ? (
168 |
169 |
176 |
177 | ) : (
178 |
179 |
188 |
189 | )}
190 |
194 | {quantity}
195 |
196 |
197 |
206 |
207 |
208 | );
209 | }
210 |
211 | function CartLineUpdateButton({
212 | children,
213 | lines,
214 | }: {
215 | children: React.ReactNode;
216 | lines: { id: string; quantity: number }[];
217 | }) {
218 | return (
219 |
170 |
236 |
171 |
180 |
226 |
227 |
235 | 172 | Stay up to date with our latest products, special offers, and news. 173 | Enter your email below to subscribe. 174 |
175 | 176 |
181 |
184 | {
192 | if (isSuccess) {
193 | fetcher.unstable_reset();
194 | }
195 | }}
196 | className={cn(
197 | "focus-visible:ring-blue-brand w-full rounded-[54px] border-[3px] px-6 py-4 text-lg font-semibold outline-none placeholder:text-xl placeholder:text-white/60 focus-visible:ring-2",
198 | isSuccess
199 | ? "border-green-brand text-green-brand autofill:text-green-brand"
200 | : "border-white text-white",
201 | )}
202 | />
203 |
204 |
205 |
225 |
228 | {isSuccess ? (
229 |
234 | {successMessage}
230 | ) : errorMessage ? ( 231 |{errorMessage}
232 | ) : null} 233 |