working sample

https://coveord.atlassian.net/browse/KIT-3708
coveo · Nov 7, 2024 · a0cb3f7 · a0cb3f7
1 parent bea208b
commit a0cb3f7
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 51 deletions.
diff --git a/packages/samples/headless-ssr-commerce/app/(listing)/[category]/page.tsx b/packages/samples/headless-ssr-commerce/app/(listing)/[category]/page.tsx
@@ -12,6 +12,7 @@ import StandaloneSearchBox from '@/components/standalone-search-box';
 import Summary from '@/components/summary';
 import {listingEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
+import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
 import {notFound} from 'next/navigation';
 
@@ -51,9 +52,9 @@ export default async function Listing({params}: {params: {category: string}}) {
     controllers: {
       cart: {initialState: {items}},
       context: {
-        language: 'en',
-        country: 'US',
-        currency: 'USD',
+        language: defaultContext.language,
+        country: defaultContext.country,
+        currency: defaultContext.currency,
         view: {
           url: `https://sports.barca.group/browse/promotions/${matchedCategory}`,
         },
@@ -66,7 +67,7 @@ export default async function Listing({params}: {params: {category: string}}) {
       staticState={staticState}
       navigatorContext={navigatorContext.marshal}
     >
-      <ContextDropdown />
+      <ContextDropdown useCase="listing" />
       <div style={{display: 'flex', flexDirection: 'row'}}>
         <div style={{flex: 1}}>
           <FacetGenerator />

diff --git a/packages/samples/headless-ssr-commerce/app/cart/page.tsx b/packages/samples/headless-ssr-commerce/app/cart/page.tsx
@@ -4,6 +4,7 @@ import ContextDropdown from '@/components/context-dropdown';
 import SearchProvider from '@/components/providers/search-provider';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
+import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
 
 export default async function Search() {
@@ -19,9 +20,9 @@ export default async function Search() {
     controllers: {
       cart: {initialState: {items}},
       context: {
-        language: 'en',
-        country: 'US',
-        currency: 'USD',
+        language: defaultContext.language,
+        country: defaultContext.country,
+        currency: defaultContext.currency,
         view: {
           url: 'https://sports.barca.group/cart',
         },

diff --git a/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx b/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx
@@ -3,6 +3,7 @@ import ContextDropdown from '@/components/context-dropdown';
 import ProductPage from '@/components/pages/product-page';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
+import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
 import {Suspense} from 'react';
 
@@ -23,9 +24,9 @@ export default async function ProductDescriptionPage({
     controllers: {
       cart: {initialState: {items}},
       context: {
-        language: 'en',
-        country: 'US',
-        currency: 'USD',
+        language: defaultContext.language,
+        country: defaultContext.country,
+        currency: defaultContext.currency,
         view: {
           url: `https://sports.barca.group/products/${params.productId}`,
         },

diff --git a/packages/samples/headless-ssr-commerce/app/search/page.tsx b/packages/samples/headless-ssr-commerce/app/search/page.tsx
@@ -11,15 +11,14 @@ import Summary from '@/components/summary';
 import Triggers from '@/components/triggers/triggers';
 import {searchEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
-import {getContext} from '@/utils/context';
+import {defaultContext} from '@/utils/context';
 import {headers} from 'next/headers';
 
 export default async function Search() {
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headers());
   searchEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
 
-  const context = await getContext();
   // Fetches the cart items from an external service
   const items = await externalCartAPI.getCart();
 
@@ -28,9 +27,9 @@ export default async function Search() {
     controllers: {
       cart: {initialState: {items}},
       context: {
-        language: context.language,
-        country: context.country,
-        currency: context.currency,
+        language: defaultContext.language,
+        country: defaultContext.country,
+        currency: defaultContext.currency,
         view: {
           url: 'https://sports.barca.group/browse/search',
         },
@@ -43,7 +42,7 @@ export default async function Search() {
       staticState={staticState}
       navigatorContext={navigatorContext.marshal}
     >
-      <ContextDropdown />
+      <ContextDropdown useCase="search" />
 
       <div style={{display: 'flex', flexDirection: 'row'}}>
         <div style={{flex: 1}}>

diff --git a/packages/samples/headless-ssr-commerce/components/context-dropdown.tsx b/packages/samples/headless-ssr-commerce/components/context-dropdown.tsx
@@ -1,39 +1,53 @@
 'use client';
 
-import {useContext} from '@/lib/commerce-engine';
-import {ContextOptions} from '@coveo/headless-react/ssr-commerce';
+import {useContext, useEngine} from '@/lib/commerce-engine';
+import {
+  CommerceEngine,
+  ContextOptions,
+  loadProductListingActions,
+  loadSearchActions,
+} from '@coveo/headless-react/ssr-commerce';
 
+// A hardcoded list of storefront associations for switching app context by language, country, and currency.
+// Found in the admin console under "Storefront Associations," this list is static for demonstration purposes.
+// In a real application, these values would likely come from sources like environment variables or an API.
 const storefrontAssociations = [
   'en-CA-CAD',
   'fr-CA-CAD',
   'en-GB-GBP',
   'en-US-USD',
 ];
 
-export default function ContextDropdown() {
+export default function ContextDropdown({
+  useCase,
+}: {
+  useCase?: 'listing' | 'search';
+}) {
   const {state, controller} = useContext();
-  // const engine = useEngine();
-  // const {executeSearch} = loadSearchActions(engine as CommerceEngine);
-  // const {fetchProductListing} = loadProductListingActions(
-  //   engine as CommerceEngine
-  // );
-  // const {fetchProductListing} = loadProductListingActions(
-  //   engine as CommerceEngine
-  // );
+  const engine = useEngine();
 
   return (
     <div>
-      <p>AAA</p>
-      Context slider {state.country} {state.currency} {state.language}
+      <p></p>
+      Context dropdown :
       <select
         value={`${state.language}-${state.country}-${state.currency}`}
         onChange={(e) => {
           const [language, country, currency] = e.target.value.split('-');
           controller?.setLanguage(language);
           controller?.setCountry(country);
           controller?.setCurrency(currency as ContextOptions['currency']);
-          // engine?.dispatch(executeSearch());
-          // engine?.dispatch(fetchProductListing());
+
+          useCase === 'search'
+            ? engine?.dispatch(
+                loadSearchActions(engine as CommerceEngine).executeSearch()
+              )
+            : useCase === 'listing' &&
+              engine?.dispatch(
+                loadProductListingActions(
+                  engine as CommerceEngine
+                ).fetchProductListing()
+              );
         }}
       >
         {storefrontAssociations.map((association) => (
@@ -42,7 +56,7 @@ export default function ContextDropdown() {
           </option>
         ))}
       </select>
-      ;
+      <p></p>
     </div>
   );
 }
diff --git a/packages/samples/headless-ssr-commerce/components/providers/listing-provider.tsx b/packages/samples/headless-ssr-commerce/components/providers/listing-provider.tsx
@@ -5,10 +5,7 @@ import {
   ListingHydratedState,
   ListingStaticState,
 } from '@/lib/commerce-engine';
-import {
-  loadSearchActions,
-  NavigatorContext,
-} from '@coveo/headless-react/ssr-commerce';
+import {NavigatorContext} from '@coveo/headless-react/ssr-commerce';
 import {PropsWithChildren, useEffect, useState} from 'react';
 
 interface ListingPageProps {
@@ -48,9 +45,6 @@ export default function ListingProvider({
       })
       .then(({engine, controllers}) => {
         setHydratedState({engine, controllers});
-        engine.addReducers({});
-        const {executeSearch} = loadSearchActions(engine);
-        engine.dispatch(executeSearch());
         // Refreshing recommendations in the browser after hydrating the state in the client-side
         // Recommendation refresh in the server is not supported yet.
         // controllers.popularBoughtRecs.refresh(); // FIXME: does not work

diff --git a/packages/samples/headless-ssr-commerce/utils/context.ts b/packages/samples/headless-ssr-commerce/utils/context.ts
@@ -1,13 +1,11 @@
-'use server';
+import {ContextState} from '@coveo/headless-react/ssr-commerce';
 
-import {ContextOptions} from '@coveo/headless/ssr-commerce';
-import {cookies} from 'next/headers';
-
-export async function getContext() {
-  return {
-    language: cookies().get('language')?.value || 'en',
-    country: cookies().get('country')?.value || 'US',
-    currency:
-      (cookies().get('currency')?.value as ContextOptions['currency']) || 'USD',
-  };
-}
+export const defaultContext: {
+  language: string;
+  country: string;
+  currency: ContextState['currency'];
+} = {
+  language: 'en',
+  country: 'US',
+  currency: 'USD',
+};