feat: migrate to new client

elasticpath · Aug 26, 2024 · 9b07496 · 9b07496
1 parent ca90991
commit 9b07496
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 185 deletions.
diff --git a/examples/simple/e2e/product-list-page.spec.ts b/examples/simple/e2e/product-list-page.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { gateway } from "@elasticpath/js-sdk";
-import { buildSiteNavigation } from "../src/lib/build-site-navigation";
+import { buildSiteNavigation } from "@elasticpath/react-shopper-hooks";
 
 const host = process.env.NEXT_PUBLIC_EPCC_ENDPOINT_URL;
 const client_id = process.env.NEXT_PUBLIC_EPCC_CLIENT_ID;
@@ -19,9 +19,8 @@ test("should be able to use quick view to view full product details", async ({
 
   /* Get the cart id from the cookie */
   const allCookies = await page.context().cookies();
-  const cartId = allCookies.find(
-    (cookie) => cookie.name === "_store_ep_cart",
-  )?.value;
+  const cartId = allCookies.find((cookie) => cookie.name === "_store_ep_cart")
+    ?.value;
 
   const nav = await buildSiteNavigation(client);
 
@@ -34,7 +33,7 @@ test("should be able to use quick view to view full product details", async ({
     );
   }
 
-  await page.getByRole("button", {name: "Shop Now"}).click();
+  await page.getByRole("button", { name: "Shop Now" }).click();
 
   /* Check to make sure the page has navigated to the product list page for Men's / T-Shirts */
   await expect(page).toHaveURL(`/search`);

diff --git a/examples/simple/src/app/(store)/products/[productId]/page.tsx b/examples/simple/src/app/(store)/products/[productId]/page.tsx
@@ -4,7 +4,7 @@ import { getServerSideImplicitClient } from "../../../../lib/epcc-server-side-im
 import { notFound } from "next/navigation";
 import { parseProductResponse } from "@elasticpath/react-shopper-hooks";
 import React from "react";
-import { getByContextProduct, createClient } from "@epcc-sdk/sdks-shopper";
+import { getByContextProduct, client } from "@epcc-sdk/sdks-shopper";
 import { applyDefaultNextMiddleware } from "@epcc-sdk/sdks-nextjs";
 import { epccEnv } from "../../../../lib/resolve-epcc-env";
 import { ProductResponse, ShopperCatalogResource } from "@elasticpath/js-sdk";
@@ -15,11 +15,11 @@ type Props = {
   params: { productId: string };
 };
 
-createClient({
+client.setConfig({
   baseUrl: `https://${epccEnv.host}`,
 });
 
-applyDefaultNextMiddleware();
+applyDefaultNextMiddleware(client);
 
 export async function generateMetadata({
   params: { productId },

diff --git a/examples/simple/src/components/featured-products/FeaturedProducts.tsx b/examples/simple/src/components/featured-products/FeaturedProducts.tsx
@@ -5,6 +5,7 @@ import { ArrowRightIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import { getServerSideImplicitClient } from "../../lib/epcc-server-side-implicit-client";
 import { fetchFeaturedProducts } from "./fetchFeaturedProducts";
+import { extractProductImage } from "@epcc-sdk/sdks-shopper";
 
 interface IFeaturedProductsProps {
   title: string;
@@ -19,7 +20,13 @@ export default async function FeaturedProducts({
   linkProps,
 }: IFeaturedProductsProps) {
   const client = getServerSideImplicitClient();
-  const products = await fetchFeaturedProducts(client);
+  const featuredProductResponse = await fetchFeaturedProducts(client);
+
+  if (!featuredProductResponse.response.ok) {
+    return null;
+  }
+
+  const products = featuredProductResponse.data?.data ?? [];
 
   return (
     <div
@@ -47,39 +54,45 @@ export default async function FeaturedProducts({
         role="list"
         className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
       >
-        {products.map((product) => (
-          <Link key={product.id} href={`/products/${product.id}`}>
-            <li className="relative group">
-              <div className=" aspect-square block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
-                <div className="relative w-full h-full bg-[#f6f7f9] rounded-lg text-center animate-fadeIn  transition duration-300 ease-in-out group-hover:scale-105">
-                  {product.main_image?.link.href ? (
-                    <Image
-                      alt={product.main_image?.file_name!}
-                      src={product.main_image?.link.href}
-                      className="rounded-lg"
-                      sizes="(max-width: 200px)"
-                      fill
-                      style={{
-                        objectFit: "contain",
-                        objectPosition: "center",
-                      }}
-                    />
-                  ) : (
-                    <div className="w-[64px] h-[64px] flex items-center justify-center text-white bg-gray-200 rounded-md shadow-sm object-cover">
-                      <EyeSlashIcon className="w-3 h-3" />
-                    </div>
-                  )}
+        {products.map((product) => {
+          const mainImage = extractProductImage(
+            product,
+            featuredProductResponse.data?.included?.main_images,
+          );
+          return (
+            <Link key={product.id} href={`/products/${product.id}`}>
+              <li className="relative group">
+                <div className=" aspect-square block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
+                  <div className="relative w-full h-full bg-[#f6f7f9] rounded-lg text-center animate-fadeIn  transition duration-300 ease-in-out group-hover:scale-105">
+                    {mainImage?.link?.href ? (
+                      <Image
+                        alt={mainImage?.file_name!}
+                        src={mainImage?.link.href}
+                        className="rounded-lg"
+                        sizes="(max-width: 200px)"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                          objectPosition: "center",
+                        }}
+                      />
+                    ) : (
+                      <div className="w-[64px] h-[64px] flex items-center justify-center text-white bg-gray-200 rounded-md shadow-sm object-cover">
+                        <EyeSlashIcon className="w-3 h-3" />
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-              <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
-                {product.attributes.name}
-              </p>
-              <p className="pointer-events-none block text-sm font-medium text-gray-500">
-                {product.meta.display_price?.without_tax?.formatted}
-              </p>
-            </li>
-          </Link>
-        ))}
+                <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
+                  {product.attributes?.name}
+                </p>
+                <p className="pointer-events-none block text-sm font-medium text-gray-500">
+                  {product.meta?.display_price?.without_tax?.formatted}
+                </p>
+              </li>
+            </Link>
+          );
+        })}
       </ul>
     </div>
   );

diff --git a/examples/simple/src/components/header/navigation/MobileNavBar.tsx b/examples/simple/src/components/header/navigation/MobileNavBar.tsx
@@ -3,8 +3,8 @@ import Link from "next/link";
 import EpIcon from "../../icons/ep-icon";
 import { MobileNavBarButton } from "./MobileNavBarButton";
 import { getServerSideImplicitClient } from "../../../lib/epcc-server-side-implicit-client";
-import { buildSiteNavigation } from "../../../lib/build-site-navigation";
 import { Cart } from "../../cart/CartSheet";
+import { buildSiteNavigation } from "@elasticpath/react-shopper-hooks";
 
 export default async function MobileNavBar() {
   const client = getServerSideImplicitClient();

diff --git a/examples/simple/src/components/header/navigation/NavBarPopover.tsx b/examples/simple/src/components/header/navigation/NavBarPopover.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { ReactElement } from "react";
-import { NavigationNode } from "../../../lib/build-site-navigation";
+import { NavigationNode } from "@elasticpath/react-shopper-hooks";
 import {
   NavigationMenu,
   NavigationMenuContent,

diff --git a/examples/simple/src/components/header/navigation/NavItemContent.tsx b/examples/simple/src/components/header/navigation/NavItemContent.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { NavigationNode } from "../../../lib/build-site-navigation";
+import { NavigationNode } from "@elasticpath/react-shopper-hooks";
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 interface IProps {

diff --git a/examples/simple/src/lib/build-breadcrumb-lookup.ts b/examples/simple/src/lib/build-breadcrumb-lookup.ts
@@ -1,4 +1,4 @@
-import { NavigationNode } from "./build-site-navigation";
+import { NavigationNode } from "@elasticpath/react-shopper-hooks";
 import { BreadcrumbLookup } from "./types/breadcrumb-lookup";
 
 export function buildBreadcrumbLookup(

diff --git a/examples/simple/src/lib/build-site-navigation.ts b/examples/simple/src/lib/build-site-navigation.ts
diff --git a/examples/simple/src/lib/epcc-server-side-implicit-client.ts b/examples/simple/src/lib/epcc-server-side-implicit-client.ts
@@ -6,23 +6,21 @@ import { COOKIE_PREFIX_KEY } from "./resolve-cart-env";
 import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code";
 import { CREDENTIALS_COOKIE_NAME } from "./cookie-constants";
 import { cookies } from "next/headers";
+import { client, createClient } from "@epcc-sdk/sdks-shopper";
+import { applyDefaultNextMiddleware } from "@epcc-sdk/sdks-nextjs";
 
 const customHeaders = resolveEpccCustomRuleHeaders();
 
 const { client_id, host } = epccEnv;
 
+client.setConfig({
+  baseUrl: `https://${epccEnv.host}`,
+});
+
+applyDefaultNextMiddleware(client);
+
 export function getServerSideImplicitClient() {
-  const credentialsCookie = cookies().get(CREDENTIALS_COOKIE_NAME);
-
-  return gateway({
-    name: COOKIE_PREFIX_KEY,
-    client_id,
-    host,
-    currency: EP_CURRENCY_CODE,
-    ...(customHeaders ? { headers: customHeaders } : {}),
-    reauth: false,
-    storage: createServerSideNextCookieStorageFactory(credentialsCookie?.value),
-  });
+  return client;
 }
 
 function createServerSideNextCookieStorageFactory(

diff --git a/examples/simple/src/lib/get-store-initial-state.ts b/examples/simple/src/lib/get-store-initial-state.ts
@@ -1,17 +1,24 @@
-import { ElasticPath } from "@elasticpath/js-sdk";
 import { InitialState } from "@elasticpath/react-shopper-hooks";
-import { buildSiteNavigation } from "./build-site-navigation";
+import { buildSiteNavigation } from "@elasticpath/react-shopper-hooks";
 import { getCartCookieServer } from "./cart-cookie-server";
 import { getCart } from "../services/cart";
+import type { Client } from "@epcc-sdk/sdks-shopper";
+import { Cart, CartIncluded, ResourceIncluded } from "@elasticpath/js-sdk";
 
 export async function getStoreInitialState(
-  client: ElasticPath,
+  client: Client,
 ): Promise<InitialState> {
   const nav = await buildSiteNavigation(client);
 
   const cartCookie = getCartCookieServer();
 
-  const cart = await getCart(cartCookie, client);
+  const cartResponse = await getCart(cartCookie, client);
+
+  if (!cartResponse.response.ok) {
+    throw new Error("Failed to get cart");
+  }
+
+  const cart = cartResponse.data as ResourceIncluded<Cart, CartIncluded>;
 
   return {
     cart,

diff --git a/examples/simple/src/services/cart.ts b/examples/simple/src/services/cart.ts
@@ -1,9 +1,19 @@
-import type {ElasticPath } from "@elasticpath/js-sdk";
-import { Cart, CartIncluded, ResourceIncluded } from "@elasticpath/js-sdk";
+import {
+  client as elasticPathClient,
+  getCart as getCartClient,
+} from "@epcc-sdk/sdks-shopper";
 
 export async function getCart(
   cartId: string,
-  client: ElasticPath,
-): Promise<ResourceIncluded<Cart, CartIncluded>> {
-  return client.Cart(cartId).With("items").Get();
+  client?: typeof elasticPathClient,
+) {
+  return await getCartClient({
+    client,
+    path: {
+      cartID: cartId,
+    },
+    query: {
+      include: "items",
+    },
+  });
 }