Fix React Server Components CVE vulnerabilities

.env.example

@@ -1,7 +1,9 @@
 COMPANY_NAME="Vercel Inc."
-TWITTER_CREATOR="@vercel"
-TWITTER_SITE="https://nextjs.org/commerce"
-SITE_NAME="Next.js Commerce"
-SHOPIFY_REVALIDATION_SECRET=""
-SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
-SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
+NEXT_PUBLIC_VERCEL_URL="http://localhost:3000"
+SFCC_CLIENT_ID=""
+SFCC_ORGANIZATIONID="f_ecom_0000_000"
+SFCC_SECRET=""
+SFCC_SHORTCODE="000123"
+SFCC_SITEID="RefArch"
+SITE_NAME="ACME Store"
+SFCC_REVALIDATION_SECRET=""

.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env*.local
+
+# editors
+.cursor

.vscode/settings.json

@@ -2,8 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.sortMembers": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
   }
 }

README.md

@@ -1,76 +1,66 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce-sfcc&env=COMPANY_NAME,NEXT_PUBLIC_VERCEL_URL,SFCC_CLIENT_ID,SFCC_ORGANIZATIONID,SFCC_SECRET,SFCC_SHORTCODE,SFCC_SITEID,SITE_NAME,SFCC_REVALIDATION_SECRET&project-name=nextjs-commerce-sfcc&repository-name=nextjs-commerce-sfcc&demo-title=ACME%20Store&demo-description=A%20high-performance%20ecommerce%20store%20built%20with%20Next.js%2C%20Vercel%2C%20and%20Salesforce%20Commerce%20Cloud&demo-url=https%3A%2F%2Fnextjs-salesforce-commerce-cloud.vercel.app%2F)
 
-# Next.js Commerce
+# Next.js Commerce + Salesforce Commerce Cloud
 
-A Next.js 14 and App Router-ready ecommerce template featuring:
+A high-perfomance, server-rendered Next.js App Router ecommerce application.
 
-- Next.js App Router
-- Optimized for SEO using Next.js's Metadata
-- React Server Components (RSCs) and Suspense
-- Server Actions for mutations
-- Edge Runtime
-- New fetching and caching paradigms
-- Dynamic OG images
-- Styling with Tailwind CSS
-- Checkout and payments with Shopify
-- Automatic light/dark mode based on system settings
+This template uses React Server Components, Server Actions, _Suspense_, _useOptimistic_, _use cache_ and more.
 
-<h3 id="v1-note"></h3>
+## Providers
 
-> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
+This version of Next.js Commerce is integrated with Salesforce Commerce Cloud. The integration code for Salesforce Commerce Cloud can be found in the _lib/sfcc_ directory.
 
-## Providers
+For information on other commerce providers, additional details, and the core Next.js Commerce template, please refer to the official [Next.js Commerce repository](https://github.com/vercel/commerce).
+
+## Enviroment variables
 
-Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
+This project requires the following environment variables for connecting to Salesforce Commerce Cloud:
+
+```
+SFCC_ORGANIZATIONID=""
+SFCC_SHORTCODE=""
+SFCC_SITEID="RefArch"
+SFCC_CLIENT_ID=""
+SFCC_SECRET=""
+SITE_NAME="ACME Store"
+SFCC_REVALIDATION_SECRET=""
+```
 
-Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
+- _SFCC_ORGANIZATIONID_: Salesforce Commerce Cloud Organization ID
+- _SFCC_SHORTCODE_: Salesforce Commerce Cloud instance short code
+- _SFCC_SITEID_: ID of the target site
+- _SFCC_CLIENT_ID_: SLAS API Client ID
+- _SFCC_SECRET_: SLAS API Client Secret
+- _SITE_NAME_: User-defined name for the site
+- _SFCC_REVALIDATION_SECRET_: User-defined string for on-demand revalidation
 
-- Shopify (this repository)
-- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
-- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
-- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
-- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
-- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
-- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
-- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
+Please refer to the official Salesforce Commerce API documentation for details on how to retrieve these values:
 
-> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
+- [Base URL Configuration](https://developer.salesforce.com/docs/commerce/commerce-api/guide/base-url.html)
+- [SLAS Authorization](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html)
 
-## Integrations
+## Store configuration
 
-Integrations enable upgraded or additional functionality for Next.js Commerce
+This project works with a standard Salesforce Commerce Cloud _RefArch_ site with minimal modifications. However, for the homepage to display content correctly, two product categories must be created:
 
-- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
-  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
-  - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
+- _hidden-homepage-carousel_: This category populates the main carousel on the homepage
+- _hidden-homepage-featured-items_: This category populates the featured products section on the homepage
+
+Create these two categories and assign products to them within Business Manager.
 
 ## Running locally
 
-You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+You will need to use the environment variables defined in _.env.example_ to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a _.env_ file is all that is necessary.
 
-> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
+> Note: You should not commit your _.env_ file or it will expose secrets that will allow others to control your Salesforce Commerce Cloud store.
 
-1. Install Vercel CLI: `npm i -g vercel`
-2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
-3. Download your environment variables: `vercel env pull`
+1. Install Vercel CLI: _npm i -g vercel_
+2. Link local instance with Vercel and GitHub accounts (creates _.vercel_ directory): _vercel link_
+3. Download your environment variables: _vercel env pull_
 
 ```bash
 pnpm install
 pnpm dev
 ```
 
 Your app should now be running on [localhost:3000](http://localhost:3000/).
-
-<details>
-  <summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
-
-1. Run `vc link`.
-1. Select the `Vercel Solutions` scope.
-1. Connect to the existing `commerce-shopify` project.
-1. Run `vc env pull` to get environment variables.
-1. Run `pnpm dev` to ensure everything is working correctly.
-</details>
-
-## Vercel, Next.js Commerce, and Shopify Integration Guide
-
-You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.

app/[page]/layout.tsx

@@ -1,15 +1,12 @@
-import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
+import Footer from "components/layout/footer";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="w-full">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }

app/[page]/opengraph-image.tsx

@@ -1,10 +1,11 @@
-import OpengraphImage from 'components/opengraph-image';
-import { getPage } from 'lib/shopify';
-
-export const runtime = 'edge';
+import OpengraphImage from "components/opengraph-image";
+import { getPage } from "lib/sfcc/content";
 
 export default async function Image({ params }: { params: { page: string } }) {
-  const page = await getPage(params.page);
+  const page = getPage(params.page);
+
+  if (!page) return;
+
   const title = page.seo?.title || page.title;
 
   return await OpengraphImage({ title });

app/[page]/page.tsx

@@ -1,18 +1,13 @@
-import type { Metadata } from 'next';
+import type { Metadata } from "next";
 
-import Prose from 'components/prose';
-import { getPage } from 'lib/shopify';
-import { notFound } from 'next/navigation';
+import Prose from "components/prose";
+import { getPage } from "lib/sfcc/content";
+import { notFound } from "next/navigation";
 
-export const runtime = 'edge';
-
-export const revalidate = 43200; // 12 hours in seconds
-
-export async function generateMetadata({
-  params
-}: {
-  params: { page: string };
+export async function generateMetadata(props: {
+  params: Promise<{ page: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const page = await getPage(params.page);
 
   if (!page) return notFound();
@@ -23,26 +18,32 @@ export async function generateMetadata({
     openGraph: {
       publishedTime: page.createdAt,
       modifiedTime: page.updatedAt,
-      type: 'article'
-    }
+      type: "article",
+    },
   };
 }
 
-export default async function Page({ params }: { params: { page: string } }) {
+export default async function Page(props: {
+  params: Promise<{ page: string }>;
+}) {
+  const params = await props.params;
   const page = await getPage(params.page);
 
   if (!page) return notFound();
 
   return (
     <>
       <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body as string} />
+      <Prose className="mb-8" html={page.body} />
       <p className="text-sm italic">
-        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        }).format(new Date(page.updatedAt))}.`}
+        {`This document was last updated on ${new Intl.DateTimeFormat(
+          undefined,
+          {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          },
+        ).format(new Date(page.updatedAt))}.`}
       </p>
     </>
   );

app/api/revalidate/route.ts

@@ -1,7 +1,5 @@
-import { revalidate } from 'lib/shopify';
-import { NextRequest, NextResponse } from 'next/server';
-
-export const runtime = 'edge';
+import { revalidate } from "lib/sfcc";
+import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(req: NextRequest): Promise<NextResponse> {
   return revalidate(req);

app/checkout/(main)/information/page.tsx

@@ -0,0 +1,13 @@
+import { InformationForm } from "@/components/checkout/information-form";
+import { getCart } from "@/lib/sfcc";
+import { redirect } from "next/navigation";
+
+export default async function InformationPage() {
+  const cart = await getCart();
+
+  if (!cart || cart.lines.length === 0) {
+    redirect("/");
+  }
+
+  return <InformationForm />;
+}