clean up unused code and create login callback api endpoints

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/(auth)/authorize/page.tsx

@@ -1,27 +0,0 @@
-import { headers } from 'next/headers';
-
-export const runtime = 'edge';
-
-export default async function AuthorizationPage() {
-  const headersList = headers();
-  const access = headersList.get('x-shop-access');
-  if (!access) {
-    console.log('ERROR: No access header');
-    throw new Error('No access header');
-  }
-  console.log('Authorize Access code header:', access);
-  if (access === 'denied') {
-    console.log('Access Denied for Auth');
-    throw new Error('No access allowed');
-  }
-
-  return (
-    <>
-      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
-          <div className="h-full w-full">Loading...</div>
-        </div>
-      </div>
-    </>
-  );
-}

app/(auth)/login/page.tsx

@@ -1,17 +0,0 @@
-import { LoginMessage } from 'components/auth/login-message';
-
-export const runtime = 'edge';
-
-export default async function LoginPage() {
-  return (
-    <>
-      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
-          <div className="h-full w-full">
-            <LoginMessage />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

app/(auth)/logout/page.tsx

@@ -1,13 +0,0 @@
-export const runtime = 'edge';
-
-export default async function LogoutPage() {
-  return (
-    <>
-      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
-          <div className="h-full w-full">Loading...</div>
-        </div>
-      </div>
-    </>
-  );
-}

app/account/orders/[id]/page.tsx

@@ -1,20 +1,17 @@
-import { CheckCircleIcon, TruckIcon, ArrowLeftIcon } from '@heroicons/react/24/outline';
-import Image from 'next/image';
+import { ArrowLeftIcon, CheckCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
 import { Button } from 'components/button';
+import OrderSummary from 'components/orders/order-summary';
+import OrderSummaryMobile from 'components/orders/order-summary-mobile';
+import Price from 'components/price';
+import Badge from 'components/ui/badge';
 import { Card } from 'components/ui/card';
 import Heading from 'components/ui/heading';
 import Label from 'components/ui/label';
+import Text from 'components/ui/text';
 import { getCustomerOrder } from 'lib/shopify';
 import { Fulfillment, Order } from 'lib/shopify/types';
-import Text from 'components/ui/text';
-import Price from 'components/price';
-import Badge from 'components/ui/badge';
+import Image from 'next/image';
 import Link from 'next/link';
-import OrderSummaryMobile from 'components/account/orders/order-summary-mobile';
-import { Suspense } from 'react';
-import OrderSummary from 'components/account/orders/order-summary';
-
-export const runtime = 'edge';
 
 function toPrintDate(date: string) {
   return new Date(date).toLocaleDateString('en-US', {
@@ -242,9 +239,7 @@ export default async function OrderPage({ params }: { params: { id: string } })
 
   return (
     <>
-      <Suspense>
-        <OrderSummaryMobile order={order} />
-      </Suspense>
+      <OrderSummaryMobile order={order} />
       <div className="mx-auto max-w-6xl p-6">
         <div className="mb-6 flex justify-between">
           <div className="flex items-start gap-2">

app/account/page.tsx

@@ -1,16 +1,14 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { getCustomerOrders } from 'lib/shopify';
-import Text from 'components/ui/text';
-import Price from 'components/price';
-import Divider from 'components/divider';
 import { Button } from 'components/button';
-import Heading from 'components/ui/heading';
-import Label from 'components/ui/label';
+import Divider from 'components/divider';
+import Price from 'components/price';
 import Badge from 'components/ui/badge';
 import { Card } from 'components/ui/card';
-
-export const runtime = 'edge';
+import Heading from 'components/ui/heading';
+import Label from 'components/ui/label';
+import Text from 'components/ui/text';
+import { getCustomerOrders } from 'lib/shopify';
+import Image from 'next/image';
+import Link from 'next/link';
 
 export default async function AccountPage() {
   const orders = await getCustomerOrders();

app/api/authorize/route.ts

@@ -0,0 +1,9 @@
+import { authorize, getOrigin } from 'lib/shopify/auth';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const origin = getOrigin(request);
+  return await authorize(request, origin);
+}

app/layout.tsx

@@ -1,10 +1,10 @@
 import Banner from 'components/banner';
 import Navbar from 'components/layout/navbar';
+import { AuthProvider } from 'contexts/auth-context';
 import { GeistSans } from 'geist/font/sans';
 import { ensureStartsWith } from 'lib/utils';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
-import { AuthProvider } from 'contexts/auth-context';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
@@ -36,7 +36,7 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.variable}>
-      <body className="min-h-screen bg-white text-black selection:bg-primary-muted dark:bg-neutral-900 dark:text-white dark:selection:bg-primary-emphasis dark:selection:text-white">
+      <body className="min-h-screen bg-white text-black selection:bg-primary-muted">
         <AuthProvider>
           {/* We need to have this wrapper div because the headless ui popover clickaway event is not working properly */}
           {/* https://github.com/tailwindlabs/headlessui/issues/2752#issuecomment-1724096430 */}
@@ -46,7 +46,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
               <Navbar />
             </header>
             <Suspense>
-              <main className="main group flex-1">{children}</main>
+              <main>{children}</main>
             </Suspense>
           </div>
         </AuthProvider>

app/product/[handle]/page.tsx

@@ -11,8 +11,6 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {

app/search/[collection]/page.tsx

@@ -20,8 +20,6 @@ import ProductsGridPlaceholder from 'components/layout/search/placeholder';
 import SortingMenu from 'components/layout/search/sorting-menu';
 import { Suspense } from 'react';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {

app/search/page.tsx

@@ -4,7 +4,6 @@ import ProductsList from 'components/layout/products-list';
 import { searchProducts } from 'components/layout/products-list/actions';
 import SortingMenu from 'components/layout/search/sorting-menu';
 import { Suspense } from 'react';
-export const runtime = 'edge';
 
 export const metadata = {
   title: 'Search',