fix checkout error & empty views (#1012)

src/app/checkout/page.tsx

@@ -17,16 +17,16 @@ export default function CheckoutPage({
 	}
 
 	return (
-		<div className="checkout-bg min-h-[100dvh]">
-			<section className="mx-auto max-w-7xl p-8">
+		<div className="min-h-[100dvh] bg-white">
+			<section className="mx-auto flex min-h-[100dvh] max-w-7xl flex-col p-8">
 				<div className="flex items-center font-bold">
 					<a aria-label="homepage" href="/">
 						ACME
 					</a>
 				</div>
 				<h1 className="mt-8 text-3xl font-bold text-neutral-900">Checkout</h1>
 
-				<section className="mb-12 mt-6">
+				<section className="mb-12 mt-6 flex-1">
 					<RootWrapper saleorApiUrl={process.env.NEXT_PUBLIC_SALEOR_API_URL} />
 				</section>
 			</section>

src/checkout/assets/images/SaleorLogo.tsx

@@ -1,6 +1,13 @@
 export function SaleorLogo() {
 	return (
-		<svg width="697" height="240" viewBox="0 0 697 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			width="697"
+			height="240"
+			viewBox="0 0 697 240"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className="h-auto w-full"
+		>
 			<mask
 				id="mask0_1015_2366"
 				style={{ maskType: "alpha" }}

src/checkout/components/Button.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	label: ReactNode;
-	variant?: "primary" | "secondary" | "tertiary" | "";
+	variant?: "primary" | "secondary" | "tertiary";
 	ariaLabel?: string;
 	ariaDisabled?: boolean;
 }

src/checkout/components/ErrorContentWrapper.tsx

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+
+type Props = {
+	children: ReactNode;
+};
+
+export const ErrorContentWrapper = ({ children }: Props) => {
+	return (
+		<div className="mx-auto flex max-w-screen-sm flex-col items-center gap-y-4 bg-neutral-50 px-8 py-16 text-center">
+			<>{children}</>
+		</div>
+	);
+};

src/checkout/components/LinkAsButton.tsx

@@ -0,0 +1,27 @@
+import { type ReactNode, type AnchorHTMLAttributes } from "react";
+import clsx from "clsx";
+
+type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+	children: ReactNode;
+	href: string;
+	variant?: "primary" | "secondary" | "tertiary";
+};
+
+export const LinkAsButton = ({ children, href, variant = "primary" }: Props) => {
+	const classes = clsx(
+		"inline-flex h-10 items-center justify-center whitespace-nowrap rounded border active:outline-none font-bold",
+		{
+			"bg-neutral-900 hover:bg-neutral-800 disabled:bg-neutral-700 text-white px-4 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 hover:aria-disabled:bg-neutral-700":
+				variant === "primary",
+			"border-neutral-600 hover:border-neutral-700 hover:bg-neutral-300 active:bg-neutral-300 disabled:border-neutral-300 aria-disabled:border-neutral-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent px-4":
+				variant === "secondary",
+			"h-auto border-none bg-transparent p-0": variant === "tertiary",
+		},
+	);
+
+	return (
+		<a href={href} className={classes}>
+			{children}
+		</a>
+	);
+};

src/checkout/sections/Summary/Summary.tsx

@@ -1,4 +1,5 @@
 import { type FC } from "react";
+import clsx from "clsx";
 import { SummaryItem, type SummaryLine } from "./SummaryItem";
 import { PromoCodeAdd } from "./PromoCodeAdd";
 import { SummaryMoneyRow } from "./SummaryMoneyRow";
@@ -39,7 +40,12 @@ export const Summary: FC<SummaryProps> = ({
 	discount,
 }) => {
 	return (
-		<div className="flex h-fit w-full flex-col overflow-hidden rounded lg:overflow-visible">
+		<div
+			className={clsx(
+				"z-0 flex h-fit w-full flex-col overflow-hidden rounded lg:overflow-visible",
+				"before:bottom-0 before:left-auto before:right-0 before:top-0 before:z-[-1] before:w-1/2 before:border-l before:border-neutral-200 before:bg-neutral-50 before:content-[''] before:lg:fixed",
+			)}
+		>
 			<details open className="group">
 				<summary className="-mb-2 flex cursor-pointer flex-row items-center pt-4">
 					<Title>Summary</Title>

src/checkout/views/Checkout/Checkout.tsx

@@ -28,20 +28,18 @@ export const Checkout = () => {
 		<ErrorBoundary FallbackComponent={PageNotFound}>
 			<div className="page" id={PAGE_ID}>
 				<PageHeader />
-				<div className="grid min-h-screen grid-cols-1 gap-x-16 lg:grid-cols-2">
-					{isEmptyCart ? (
-						<EmptyCartPage />
-					) : (
-						<>
-							<Suspense fallback={<CheckoutFormSkeleton />}>
-								<CheckoutForm />
-							</Suspense>
-							<Suspense fallback={<SummarySkeleton />}>
-								<Summary {...checkout} />
-							</Suspense>
-						</>
-					)}
-				</div>
+				{isEmptyCart ? (
+					<EmptyCartPage />
+				) : (
+					<div className="grid min-h-screen grid-cols-1 gap-x-16 lg:grid-cols-2">
+						<Suspense fallback={<CheckoutFormSkeleton />}>
+							<CheckoutForm />
+						</Suspense>
+						<Suspense fallback={<SummarySkeleton />}>
+							<Summary {...checkout} />
+						</Suspense>
+					</div>
+				)}
 			</div>
 		</ErrorBoundary>
 	);

src/checkout/views/EmptyCartPage/EmptyCartPage.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { Title } from "@/checkout/components";
+import { LinkAsButton } from "@/checkout/components/LinkAsButton";
+import { ErrorContentWrapper } from "@/checkout/components/ErrorContentWrapper";
 
 export const EmptyCartPage = () => {
 	return (
-		<div className="flex w-full flex-row justify-center lg:mt-10">
-			<div className="flex flex-col justify-start rounded-lg border border-neutral-400 py-6">
-				<Title>Your cart is empty</Title>
-				<p>Add anything to the cart to continue</p>
-				<a className="mt-3 md:self-end" href="/">
-					Go back to store
-				</a>
-			</div>
-		</div>
+		<ErrorContentWrapper>
+			<Title className="mb-0 text-xl">Your cart is empty</Title>
+			<p>Add anything to the cart to continue.</p>
+			<LinkAsButton href="/" variant="secondary">
+				Go back to store
+			</LinkAsButton>
+		</ErrorContentWrapper>
 	);
 };

src/checkout/views/PageNotFound/PageNotFound.tsx

@@ -1,6 +1,7 @@
 import { type FallbackProps } from "react-error-boundary";
 import { SaleorLogo } from "@/checkout/assets/images/SaleorLogo";
 import { Button } from "@/checkout/components/Button";
+import { ErrorContentWrapper } from "@/checkout/components/ErrorContentWrapper";
 
 export const PageNotFound = ({ error }: Partial<FallbackProps>) => {
 	console.error(error);
@@ -9,16 +10,12 @@ export const PageNotFound = ({ error }: Partial<FallbackProps>) => {
 	const goBack = () => history.back();
 
 	return (
-		<div className="flex h-screen w-full flex-col items-center justify-center pt-12">
-			<div className="flex w-full justify-center">
+		<ErrorContentWrapper>
+			<div className="mb-4 flex w-28 flex-col">
 				<SaleorLogo />
 			</div>
-			<div className="mb-22 flex h-full flex-col items-center justify-center">
-				<p className="max-w-85 mb-6 text-center">
-					We couldn&apos;t fetch information about your checkout. Go back to the store and try again.
-				</p>
-				<Button ariaLabel="Go back to store" onClick={goBack} variant="secondary" label="Go back to store" />
-			</div>
-		</div>
+			<p>We couldn&apos;t fetch information about your checkout. Go back to the store and try again.</p>
+			<Button ariaLabel="Go back to store" onClick={goBack} variant="secondary" label="Go back to store" />
+		</ErrorContentWrapper>
 	);
 };