Merge Dev to main

applications/dotnet/src/WebUI/otel-collector-config.yml

@@ -13,8 +13,8 @@ exporters:
       authenticator: sigv4auth
   awsxray:
     region: us-east-1
-  logging:
-    loglevel: debug
+  debug:
+    verbosity: detailed
 extensions:
   sigv4auth:
     region: us-east-1

applications/next-js/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -9,11 +9,11 @@ WORKDIR /app
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
 
 
 # Rebuild the source code only when needed
@@ -28,11 +28,11 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN \
-  if [ -f yarn.lock ]; then yarn run build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+    if [ -f yarn.lock ]; then yarn run build; \
+    elif [ -f package-lock.json ]; then npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
 
 # Production image, copy all the files and run next
 FROM base AS runner
@@ -65,4 +65,4 @@ ENV PORT=8080
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
 ENV HOSTNAME="0.0.0.0"
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

applications/next-js/app/[page]/page.tsx

@@ -1,15 +1,11 @@
-import Prose from "components/prose";
-import { getPage } from "lib/dynamo";
-import { notFound } from "next/navigation";
+import Prose from 'components/prose';
+import { getPage } from 'lib/dynamo';
+import { notFound } from 'next/navigation';
 
 export default async function Page({ params }: { params: { page: string } }) {
   const page = await getPage(params.page);
 
-  if (!page) return notFound();
+  if (!page || page instanceof Error) return notFound();
 
-  return (
-    <>
-
-    </>
-  );
+  return <></>;
 }

applications/next-js/app/backend-down.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white">
+      <div className="flex max-w-md flex-col items-center px-4 py-8">
+        <div className="mb-8 flex items-center">
+          <h1 className="mr-4 text-5xl font-bold text-gray-800">500</h1>
+          <div className="h-12 border-l border-gray-300"></div>
+          <p className="ml-4 text-xl text-gray-600">
+            Looks like the backend is down, please deploy it and try again!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

applications/next-js/app/page.tsx

@@ -1,6 +1,6 @@
-import Footer from "components/layout/footer";
-import { Carousel } from "components/carousel";
-import { ThreeItemGrid } from "components/grid/three-items";
+import Footer from 'components/layout/footer';
+import { Carousel } from 'components/carousel';
+import { ThreeItemGrid } from 'components/grid/three-items';
 
 export default async function HomePage() {
   return (

applications/next-js/app/product/[handle]/page.tsx

@@ -1,38 +1,35 @@
-import { notFound } from "next/navigation";
+import { notFound } from 'next/navigation';
 
-import { GridTileImage } from "components/grid/tile";
-import Footer from "components/layout/footer";
-import { Gallery } from "components/product/gallery";
-import { ProductDescription } from "components/product/product-description";
-import { HIDDEN_PRODUCT_TAG } from "lib/constants";
-import { getProduct } from "lib/dynamo";
-import { Image } from "lib/dynamo/types";
-import Link from "next/link";
-import { Suspense } from "react";
+import { GridTileImage } from 'components/grid/tile';
+import Footer from 'components/layout/footer';
+import { Gallery } from 'components/product/gallery';
+import { ProductDescription } from 'components/product/product-description';
+import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { getProduct } from 'lib/dynamo';
+import { Image } from 'lib/dynamo/types';
+import Link from 'next/link';
+import { Suspense } from 'react';
+import NotFound from 'app/backend-down';
 
-export default async function ProductPage({
-  params,
-}: {
-  params: { handle: string };
-}) {
+export default async function ProductPage({ params }: { params: { handle: string } }) {
   const product = await getProduct(params.handle);
 
-  if (!product) return notFound();
+  if (!product || product instanceof Error) return NotFound();
 
   const productJsonLd = {
-    "@context": "https://schema.org",
-    "@type": "Product",
+    '@context': 'https://schema.org',
+    '@type': 'Product',
     name: product.name,
     description: product.description,
-    image: product.images,
+    image: product.images
   };
 
   return (
     <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
-          __html: JSON.stringify(productJsonLd),
+          __html: JSON.stringify(productJsonLd)
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
@@ -46,7 +43,7 @@ export default async function ProductPage({
               <Gallery
                 images={product.images.map((image: Image) => ({
                   src: image.url,
-                  altText: image.altText,
+                  altText: image.altText
                 }))}
               />
             </Suspense>

applications/next-js/app/search/[collection]/page.tsx

@@ -1,21 +1,26 @@
-import { getCategory, getCategoryProducts } from "lib/dynamo";
+import { getCategory, getCategoryProducts } from 'lib/dynamo';
 
-import Grid from "components/grid";
-import ProductGridItems from "components/layout/product-grid-items";
-import { defaultSort, sorting } from "lib/constants";
+import Grid from 'components/grid';
+import ProductGridItems from 'components/layout/product-grid-items';
+import { defaultSort, sorting } from 'lib/constants';
+import { notFound } from 'next/navigation';
+import NotFound from 'app/backend-down';
 
 export default async function CategoryPage({
   params,
-  searchParams,
+  searchParams
 }: {
   params: { collection: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } =
-    sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
   const products = await getCategoryProducts(params.collection);
 
+  if (products instanceof Error) {
+    return NotFound();
+  }
+
   return (
     <section>
       {products.length === 0 ? (

applications/next-js/app/search/page.tsx

@@ -1,26 +1,32 @@
-import Grid from "components/grid";
-import ProductGridItems from "components/layout/product-grid-items";
-import { defaultSort, sorting } from "lib/constants";
-import { getProducts } from "lib/dynamo";
+import NotFound from 'app/backend-down';
+import Grid from 'components/grid';
+import ProductGridItems from 'components/layout/product-grid-items';
+import { defaultSort, sorting } from 'lib/constants';
+import { getProducts } from 'lib/dynamo';
+import { notFound } from 'next/navigation';
 
 export default async function SearchPage({
-  searchParams,
+  searchParams
 }: {
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const { sort, q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } =
-    sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
 
-  const products = await getProducts(searchValue ?? "");
-  const resultsText = products.length > 1 ? "results" : "result";
+  const products = await getProducts(searchValue ?? '');
+
+  if (products instanceof Error) {
+    return NotFound();
+  }
+
+  const resultsText = products.length > 1 ? 'results' : 'result';
 
   return (
     <>
       {searchValue ? (
         <p className="mb-4">
           {products.length === 0
-            ? "There are no products that match "
+            ? 'There are no products that match '
             : `Showing ${products.length} ${resultsText} for `}
           <span className="font-bold">&quot;{searchValue}&quot;</span>
         </p>

applications/next-js/components/carousel.tsx

@@ -1,12 +1,14 @@
-import {getCategoryProducts, getCollection} from "lib/dynamo";
-import Link from "next/link";
-import { GridTileImage } from "./grid/tile";
+import { getCategoryProducts, getCollection } from 'lib/dynamo';
+import Link from 'next/link';
+import { GridTileImage } from './grid/tile';
+import { notFound } from 'next/navigation';
+import NotFound from 'app/backend-down';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollection("FRONT_PAGE");
+  const products = await getCollection('FRONT_PAGE');
 
-  if (!products?.length) return null;
+  if (products instanceof Error || !products?.length) return NotFound();
 
   // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
   const carouselProducts = [...products, ...products, ...products];
@@ -19,16 +21,13 @@ export async function Carousel() {
             key={`${product.id}${i}`}
             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
           >
-            <Link
-              href={`/product/${product.id}`}
-              className="relative h-full w-full"
-            >
+            <Link href={`/product/${product.id}`} className="relative h-full w-full">
               <GridTileImage
                 alt={product.name}
                 label={{
                   title: product.name,
                   amount: product.price,
-                  currencyCode: "USD",
+                  currencyCode: 'USD'
                 }}
                 src={product.images[0]!.url!}
                 fill

applications/next-js/components/cart/actions.ts

@@ -7,61 +7,77 @@ import { cookies } from 'next/headers';
 import { CartProduct, Product, ProductVariants } from '../../lib/dynamo/types';
 
 export async function addItem(prevState: any, cartItem: CartProduct) {
-  let cartId = cookies().get('cartId')?.value;
+  let cartId = (await cookies()).get('cartId')?.value;
   let cart;
 
   if (cartId) {
     cart = await getCart(cartId);
   }
 
-  if (!cartId || !cart) {
-    cart = await createCart();
+  if (!cartId || !cart || cart instanceof Error) {
+    const cartResult = await createCart();
+    if (cartResult instanceof Error) {
+      return 'Error creating cart';
+    }
+    cart = cartResult;
     cartId = cart.id;
-    cookies().set('cartId', cartId);
+    (await cookies()).set('cartId', cartId);
   }
 
   if (!cartItem) {
     return 'Missing product variant ID';
   }
 
   try {
-    await addToCart(cartId, cartItem);
+    const result = await addToCart(cartId, cartItem);
+    if (result instanceof Error) {
+      return 'Error adding item to cart';
+    }
     revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error adding item to cart';
   }
 }
 
 export async function removeItem(prevState: any, productId: string) {
-  const cartId = cookies().get('cartId')?.value;
+  const cartId = (await cookies()).get('cartId')?.value;
 
   if (!cartId) {
     return 'Missing cart ID';
   }
 
   try {
-    await removeFromCart(cartId, productId);
+    const result = await removeFromCart(cartId, productId);
+    if (result instanceof Error) {
+      return 'Error removing item from cart';
+    }
     revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error removing item from cart';
   }
 }
 
 export async function updateItemQuantity(prevState: any, cartItem: CartProduct) {
-  const cartId = cookies().get('cartId')?.value;
+  const cartId = (await cookies()).get('cartId')?.value;
 
   if (!cartId) {
     return 'Missing cart ID';
   }
 
   try {
     if (cartItem.quantity === 0) {
-      await removeFromCart(cartId, cartItem.product.id);
+      const result = await removeFromCart(cartId, cartItem.product.id);
+      if (result instanceof Error) {
+        return 'Error removing item from cart';
+      }
       revalidateTag(TAGS.cart);
       return;
     }
 
-    await updateCart(cartItem);
+    const result = await updateCart(cartItem);
+    if (result instanceof Error) {
+      return 'Error updating item quantity';
+    }
     revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error updating item quantity';

applications/next-js/components/cart/index.tsx

@@ -1,13 +1,16 @@
-import { getCart } from "lib/dynamo";
-import { cookies } from "next/headers";
-import CartModal from "./modal";
+import { getCart } from 'lib/dynamo';
+import { cookies } from 'next/headers';
+import CartModal from './modal';
 
 export default async function Cart() {
-  const cartId = cookies().get("cartId")?.value;
+  const cartId = (await cookies()).get('cartId')?.value;
   let cart;
 
   if (cartId) {
-    cart = await getCart(cartId);
+    const cartResult = await getCart(cartId);
+    if (!(cartResult instanceof Error)) {
+      cart = cartResult;
+    }
   }
 
   return <CartModal cart={cart} />;