Merge pull request #10 from ildecimo/develop

dev -> main

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ai-app-foundation",
+  "name": "bc-ai-ildecimo-app",
   "version": "0.0.1",
   "author": "BigCommerce",
   "description": "BigCommerce Single-click App for enabling AI capabilities in CP",
@@ -78,4 +78,4 @@
     "tls": false,
     "child_process": false
   }
-}
+}

src/app/api/app/auth/route.ts

@@ -1,10 +1,10 @@
 import jwt from 'jsonwebtoken';
-import { type NextRequest, NextResponse } from 'next/server';
+import { NextResponse, type NextRequest } from 'next/server';
 import { z } from 'zod';
-import * as db from '~/lib/db';
+import { AUTH_COOKIE_NAME, BIGCOMMERCE_LOGIN_URL } from '~/constants';
 import { env } from '~/env.mjs';
 import { createAppExtension } from '~/lib/appExtensions';
-import { BIGCOMMERCE_LOGIN_URL } from '~/constants';
+import * as db from '~/lib/db';
 
 const queryParamSchema = z.object({
   code: z.string(),
@@ -106,7 +106,7 @@ export async function GET(req: NextRequest) {
     status: 302,
     statusText: 'Found',
     headers: {
-      'set-cookie': `ai-app-foundation-token=${clientToken}; SameSite=None; Secure; Path=/; Partitioned; HttpOnly; Max-Age=3600;`,
+      'set-cookie': `${AUTH_COOKIE_NAME}=${clientToken}; SameSite=None; Secure; Path=/; Partitioned; HttpOnly; Max-Age=3600;`,
     },
   });
 }

src/app/api/app/load/route.ts

@@ -1,6 +1,7 @@
 import jwt from 'jsonwebtoken';
-import { z } from 'zod';
 import { NextResponse, type NextRequest } from 'next/server';
+import { z } from 'zod';
+import { AUTH_COOKIE_NAME } from '~/constants';
 import { env } from '~/env.mjs';
 
 const queryParamSchema = z.object({
@@ -60,7 +61,7 @@ export function GET(request: NextRequest) {
     status: 302,
     statusText: 'Found',
     headers: {
-      'set-cookie': `ai-app-foundation-token=${clientToken}; SameSite=None; Secure; Path=/; Partitioned; HttpOnly; Max-Age=3600;`,
+      'set-cookie': `${AUTH_COOKIE_NAME}=${clientToken}; SameSite=None; Secure; Path=/; Partitioned; HttpOnly; Max-Age=3600;`,
     },
   });
 }

src/app/page.tsx

@@ -1,24 +1,5 @@
-import { authorize } from '~/lib/authorize';
-import * as db from '~/lib/db';
+import { HomePage } from '~/components/HomePage';
 
-import { fetchAllProducts } from '~/server/bigcommerce-api';
-
-import ProductList from '~/components/ProductList';
-
-export default async function Page() {
-  const authorized = authorize();
-
-  if (!authorized) {
-    throw new Error('Token is not valid. Try to re-open the app.');
-  }
-
-  const accessToken = await db.getStoreToken(authorized.storeHash);
-
-  if (!accessToken) {
-    throw new Error('Access token not found. Try to re-install the app.');
-  }
-
-  const products = await fetchAllProducts(accessToken, authorized.storeHash);
-
-  return <ProductList products={products} />;
+export default function Page() {
+  return <HomePage />;
 }

src/app/products/loading.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import Loader from '~/components/Loader';
+
+export default function Loading() {
+  return <Loader minHeight="90vh" />;
+}

src/app/products/page.tsx

@@ -0,0 +1,24 @@
+import { authorize } from '~/lib/authorize';
+import * as db from '~/lib/db';
+
+import { fetchAllProducts } from '~/server/bigcommerce-api';
+
+import ProductList from '~/components/ProductList';
+
+export default async function Page() {
+  const authorized = authorize();
+
+  if (!authorized) {
+    throw new Error('Token is not valid. Try to re-open the app.');
+  }
+
+  const accessToken = await db.getStoreToken(authorized.storeHash);
+
+  if (!accessToken) {
+    throw new Error('Access token not found. Try to re-install the app.');
+  }
+
+  const products = await fetchAllProducts(accessToken, authorized.storeHash);
+
+  return <ProductList products={products} />;
+}

src/components/HomePage.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Flex } from '@bigcommerce/big-design';
+import { NextLink } from '~/components/NextLink';
+
+export const HomePage = () => {
+  return (
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      style={{ minHeight: '90vh' }}
+    >
+      <h2 className="text-2xl">Home Page TBD</h2>
+
+      <span className="my-4 max-w-[350px] rounded-md border bg-orange-100 p-2 text-center">
+        Accessing the products page for the first time without visiting the
+        product review through the app extension will result in access token
+        error.
+      </span>
+      <div className="mt-4">
+        <NextLink href="/products">All Products</NextLink>
+      </div>
+    </Flex>
+  );
+};

src/components/ProductReviewList.tsx

@@ -43,7 +43,7 @@ export const ProductReviewList = ({
     <div>
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.Link href="/">All Products</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/products">All Products</Breadcrumbs.Link>
           <Breadcrumbs.Divider />
           <Breadcrumbs.Text>{product.name}</Breadcrumbs.Text>
         </Breadcrumbs>

src/constants.ts

@@ -21,3 +21,5 @@ export const STYLE_OPTIONS = [
 
 export const BIGCOMMERCE_LOGIN_URL = 'https://login.bigcommerce.com';
 export const BIGCOMMERCE_API_URL = 'https://api.bigcommerce.com';
+
+export const AUTH_COOKIE_NAME = 'bc-ai-app-auth-token';

src/lib/authorize.ts

@@ -1,15 +1,16 @@
 import jwt from 'jsonwebtoken';
 import { cookies } from 'next/headers';
-import { z } from 'zod';
 import { env } from 'src/env.mjs';
+import { z } from 'zod';
+import { AUTH_COOKIE_NAME } from '~/constants';
 
 const jwtPayloadSchema = z.object({
   storeUser: z.number(),
   storeHash: z.string(),
 });
 
 export function authorize() {
-  const token = cookies().get('ai-app-foundation-token');
+  const token = cookies().get(AUTH_COOKIE_NAME);
 
   if (!token) {
     return null;