From 02eced475bb31846a92953a6dc685c9dfb0e3416 Mon Sep 17 00:00:00 2001
From: jordanarldt <jordan.arldt@bigcommerce.com>
Date: Fri, 3 Jan 2025 12:59:09 -0600
Subject: [PATCH] feat: add Error page and ErrorBoundary

---
 core/app/[locale]/(default)/error.tsx    | 16 +++++++++++
 core/app/[locale]/_components/error.tsx  | 16 -----------
 core/app/[locale]/error.tsx              | 15 +++++++++--
 core/vibes/soul/sections/error/index.tsx | 34 ++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 core/app/[locale]/(default)/error.tsx
 delete mode 100644 core/app/[locale]/_components/error.tsx
 create mode 100644 core/vibes/soul/sections/error/index.tsx

diff --git a/core/app/[locale]/(default)/error.tsx b/core/app/[locale]/(default)/error.tsx
new file mode 100644
index 0000000000..12f1d61278
--- /dev/null
+++ b/core/app/[locale]/(default)/error.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+import { Error as ErrorSection } from '@/vibes/soul/sections/error';
+
+interface Props {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ reset }: Props) {
+  const t = useTranslations('Error');
+
+  return <ErrorSection ctaAction={reset} subtitle={t('message')} title={t('heading')} />;
+}
diff --git a/core/app/[locale]/_components/error.tsx b/core/app/[locale]/_components/error.tsx
deleted file mode 100644
index 1acdd0b303..0000000000
--- a/core/app/[locale]/_components/error.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-
-export default function Error() {
-  const t = useTranslations('Error');
-
-  return (
-    <div className="h-full px-10 py-12 lg:py-24">
-      <div className="mx-auto max-w-3xl">
-        <h1 className="mb-8 text-3xl font-black lg:text-5xl">{t('heading')}</h1>
-        <p className="text-base">{t('message')}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/core/app/[locale]/error.tsx b/core/app/[locale]/error.tsx
index 941dca5c14..12f1d61278 100644
--- a/core/app/[locale]/error.tsx
+++ b/core/app/[locale]/error.tsx
@@ -1,5 +1,16 @@
 'use client';
 
-import { lazy } from 'react';
+import { useTranslations } from 'next-intl';
 
-export default lazy(() => import('./_components/error'));
+import { Error as ErrorSection } from '@/vibes/soul/sections/error';
+
+interface Props {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ reset }: Props) {
+  const t = useTranslations('Error');
+
+  return <ErrorSection ctaAction={reset} subtitle={t('message')} title={t('heading')} />;
+}
diff --git a/core/vibes/soul/sections/error/index.tsx b/core/vibes/soul/sections/error/index.tsx
new file mode 100644
index 0000000000..674a2fab14
--- /dev/null
+++ b/core/vibes/soul/sections/error/index.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@/vibes/soul/primitives/button';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  ctaLabel?: string;
+  ctaAction?: () => void | Promise<void>;
+}
+
+export function Error({
+  title = 'Something went wrong!',
+  subtitle = 'Please try again or contact our support team for assistance.',
+  ctaLabel = 'Try again',
+  ctaAction,
+}: Props) {
+  return (
+    <section className="@container">
+      <div className="mx-auto max-w-3xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
+        <h1 className="mb-3 font-heading text-3xl font-medium leading-none @xl:text-4xl @4xl:text-5xl">
+          {title}
+        </h1>
+        <p className="text-lg text-contrast-500">{subtitle}</p>
+
+        {ctaAction && (
+          <form action={ctaAction}>
+            <Button className="mt-8" size="large" type="submit" variant="primary">
+              {ctaLabel}
+            </Button>
+          </form>
+        )}
+      </div>
+    </section>
+  );
+}