Small refactor

src/app/globals.css

@@ -5,17 +5,3 @@
 body {
 	overflow-x: hidden;
 }
-
-@media (min-width: theme(screens.lg)) {
-	.checkout-bg {
-		background: linear-gradient(
-			90deg,
-			theme(colors.white) 0%,
-			theme(colors.white) 50%,
-			theme(colors.neutral.200) calc(50%),
-			theme(colors.neutral.200) calc(50% + 1px),
-			theme(colors.neutral.50) calc(50% + 1px),
-			theme(colors.neutral.50) 100%
-		);
-	}
-}

src/checkout/components/ErrorContentWrapper.tsx

@@ -7,7 +7,7 @@ type Props = {
 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}</>
+			{children}
 		</div>
 	);
 };

src/checkout/hooks/useSubmit/utils.ts

@@ -65,14 +65,16 @@ export const extractMutationErrors = <
 	result: MutationData<TMutationFn>,
 	extractCustomErrors?: (result: MutationData<TMutationFn>) => MightNotExist<any[]>,
 ): ExtractedMutationErrors<TData, TErrorCodes> => {
+	const data = result?.data as
+		| null
+		| undefined
+		| Record<string, null | undefined | { errors: ApiErrors<TData, TErrorCodes> }>;
 	const graphqlErrors = result?.error ? [result.error] : [];
 
-	const apiErrors = result?.data
-		? Object.values(result.data as Record<string, { errors: ApiErrors<TData, TErrorCodes> }>).reduce(
-				(result, { errors }) => [...result, ...errors],
-				[] as ApiErrors<TData, TErrorCodes>,
-		  )
-		: [];
+	const apiErrors = Object.values(data ?? {}).reduce<ApiErrors<TData, TErrorCodes>>(
+		(result, value) => [...result, ...(value?.errors ?? [])],
+		[],
+	);
 
 	const customErrors = extractCustomErrors?.(result) || [];
 

src/checkout/sections/PaymentSection/PaymentProcessingScreen.tsx

@@ -53,7 +53,7 @@ export const PaymentProcessingScreen: React.FC<PaymentProcessingScreenProps> = (
 					</div>
 				</div>
 			)}
-			<>{children}</>
+			{children}
 		</Provider>
 	);
 };

src/checkout/sections/Summary/Summary.tsx

@@ -42,8 +42,8 @@ export const Summary: FC<SummaryProps> = ({
 	return (
 		<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",
+				"z-0 flex h-fit w-full flex-col",
+				"before:fixed before:bottom-0 before:left-1/2 before:top-0 before:-z-10 before:w-1/2 before:border-l before:border-neutral-200 before:bg-neutral-50 before:content-none before:lg:content-['']",
 			)}
 		>
 			<details open className="group">