Your cart is empty
{product.attributes.name} - -
{product.meta.display_price?.without_tax.formatted} - -
Unsupported product key: {key}
{optionProduct.attributes.name}
( - context?: GetServerSidePropsContext
, -): string { - /** - * Get the cookie if it's set and retrievable through either the context provided or the browsers - */ - const possibleCartCookie = getCookie( - `${COOKIE_PREFIX_KEY}_ep_cart`, - context && { - req: context.req, - res: context.res, - }, - ); - - if (typeof possibleCartCookie === "string") { - return possibleCartCookie; - } - - /** - * As a fallback check to see if this is server side and the res header has the cookie set - * - * This can happen if the cookie has been set by middleware but not yet been set - * on the browser. - */ - const setCookiesHeader = context?.res?.getHeader("set-cookie"); - const possibleResCookie = - Array.isArray(setCookiesHeader) && - parseCookies(setCookiesHeader)[`${COOKIE_PREFIX_KEY}_ep_cart`]?.value; - - if (typeof possibleResCookie === "string") { - return possibleResCookie; - } - - throw Error( - `Failed to fetch cart cookie! key ${`${COOKIE_PREFIX_KEY}_ep_cart`}`, - ); -} diff --git a/examples/algolia/src/lib/connect-products-with-main-images.ts b/examples/algolia/src/lib/connect-products-with-main-images.ts new file mode 100644 index 00000000..11b56569 --- /dev/null +++ b/examples/algolia/src/lib/connect-products-with-main-images.ts @@ -0,0 +1,29 @@ +import { File, ProductResponse } from "@moltin/sdk"; +import { + ProductImageObject, + ProductResponseWithImage, +} from "./types/product-types"; + +export const connectProductsWithMainImages = ( + products: ProductResponse[], + images: File[], +): ProductResponseWithImage[] => { + // Object with image id as a key and File data as a value + let imagesObject: ProductImageObject = {}; + images.forEach((image) => { + imagesObject[image.id] = image; + }); + + const productList: ProductResponseWithImage[] = [...products]; + + productList.forEach((product) => { + if ( + product.relationships.main_image?.data && + imagesObject[product.relationships.main_image.data?.id] + ) { + product.main_image = + imagesObject[product.relationships.main_image.data?.id]; + } + }); + return productList; +}; diff --git a/examples/algolia/src/lib/cookie-constants.ts b/examples/algolia/src/lib/cookie-constants.ts new file mode 100644 index 00000000..584e6035 --- /dev/null +++ b/examples/algolia/src/lib/cookie-constants.ts @@ -0,0 +1,3 @@ +import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; + +export const CREDENTIALS_COOKIE_NAME = `${COOKIE_PREFIX_KEY}_ep_credentials`; diff --git a/examples/algolia/src/lib/epcc-implicit-client.ts b/examples/algolia/src/lib/epcc-implicit-client.ts index 90274bfd..3e6b6a97 100644 --- a/examples/algolia/src/lib/epcc-implicit-client.ts +++ b/examples/algolia/src/lib/epcc-implicit-client.ts @@ -1,73 +1,37 @@ -import { - gateway as EPCCGateway, - MemoryStorageFactory, - StorageFactory, -} from "@moltin/sdk"; +import { gateway, StorageFactory } from "@moltin/sdk"; import { epccEnv } from "./resolve-epcc-env"; import { resolveEpccCustomRuleHeaders } from "./custom-rule-headers"; import { deleteCookie, getCookie, setCookie } from "cookies-next"; -import { _getClientStore, _registerClient } from "./ep-client-store"; import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; -import { GetServerSidePropsContext } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { EP_CURRENCY_CODE } from "../lib/resolve-ep-currency-code"; +import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code"; const headers = resolveEpccCustomRuleHeaders(); const { client_id, host } = epccEnv; -export const getEpccImplicitClient = < - P extends ParsedUrlQuery = ParsedUrlQuery, ->( - context?: GetServerSidePropsContext
, -) => { - const implicitClient = _getClientStore("implicit"); - - /** - * TODO There is a danger here if state persists between serverless functions then it's possible the - * implicitClient will be defined with the previous request context. - */ - if (implicitClient) { - return implicitClient; - } - - /** - * Static rendering has no access to a request context e.g. cookies - * Using in memory storage for static builds - */ - const isSSG = !context && typeof window === "undefined"; - - return _registerClient( - EPCCGateway({ - name: COOKIE_PREFIX_KEY, - client_id, - host, - currency: EP_CURRENCY_CODE, - ...(headers ? { headers } : {}), - storage: isSSG - ? new MemoryStorageFactory() - : createNextCookieStorageFactory(context), - }), - "implicit", - ); -}; +export function getEpccImplicitClient() { + return gateway({ + name: COOKIE_PREFIX_KEY, + client_id, + host, + currency: EP_CURRENCY_CODE, + ...(headers ? { headers } : {}), + storage: createNextCookieStorageFactory(), + }); +} -function createNextCookieStorageFactory< - P extends ParsedUrlQuery = ParsedUrlQuery, ->(context?: GetServerSidePropsContext
): StorageFactory { +function createNextCookieStorageFactory(): StorageFactory { return { set: (key: string, value: string): void => { setCookie(key, value, { - ...(context && { req: context.req, res: context.res }), sameSite: "strict", - encode: (val: string) => val, }); }, get: (key: string): any => { - return getCookie(key, context && { req: context.req, res: context.res }); + return getCookie(key); }, delete: (key: string) => { - deleteCookie(key, context && { req: context.req, res: context.res }); + deleteCookie(key); }, }; } diff --git a/examples/algolia/src/lib/epcc-server-side-implicit-client.ts b/examples/algolia/src/lib/epcc-server-side-implicit-client.ts new file mode 100644 index 00000000..ca66c948 --- /dev/null +++ b/examples/algolia/src/lib/epcc-server-side-implicit-client.ts @@ -0,0 +1,48 @@ +import "server-only"; +import { gateway, StorageFactory } from "@moltin/sdk"; +import { epccEnv } from "./resolve-epcc-env"; +import { resolveEpccCustomRuleHeaders } from "./custom-rule-headers"; +import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; +import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code"; +import { getCookie } from "./get-cookie"; +import { CREDENTIALS_COOKIE_NAME } from "./cookie-constants"; + +const customHeaders = resolveEpccCustomRuleHeaders(); + +const { client_id, host } = epccEnv; + +export function getServerSideImplicitClient() { + const credentialsCookie = getCookie(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), + }); +} + +function createServerSideNextCookieStorageFactory( + initialCookieValue?: string, +): StorageFactory { + let state = new Map(); + + if (initialCookieValue) { + state.set(`${COOKIE_PREFIX_KEY}_ep_credentials`, initialCookieValue); + } + + return { + set: (key: string, value: string): void => { + state.set(key, value); + }, + get: (key: string): any => { + return state.get(key); + }, + delete: (key: string) => { + state.delete(key); + }, + }; +} diff --git a/examples/algolia/src/lib/get-cookie.ts b/examples/algolia/src/lib/get-cookie.ts new file mode 100644 index 00000000..013a08fe --- /dev/null +++ b/examples/algolia/src/lib/get-cookie.ts @@ -0,0 +1,38 @@ +import "server-only"; +import { + RequestCookie, + parseCookie, +} from "next/dist/compiled/@edge-runtime/cookies"; +import { cookies, headers } from "next/headers"; + +/** + * required to work around this issue - https://github.com/vercel/next.js/issues/49442 + * + * Cookies will not be set for the first response from and have to be fethched from the value set by middleware in the + * raw Set-Cookie header. + */ +export function getCookie(cookieName: string): RequestCookie | undefined { + const allCookiesAsString = headers().get("Set-Cookie"); + + if (!allCookiesAsString) { + return cookies().get(cookieName); + } + + const allCookiesAsObjects = allCookiesAsString + .split(", ") + .map((singleCookieAsString) => parseCookie(singleCookieAsString.trim())); + + const targetCookieAsObject = allCookiesAsObjects.find( + (singleCookieAsObject) => + typeof singleCookieAsObject.get(cookieName) == "string", + ); + + if (!targetCookieAsObject) { + return cookies().get(cookieName); + } + + return { + name: cookieName, + value: targetCookieAsObject.get(cookieName) ?? "", + }; +} diff --git a/examples/algolia/src/lib/get-main-layout.tsx b/examples/algolia/src/lib/get-main-layout.tsx deleted file mode 100644 index b164bc3a..00000000 --- a/examples/algolia/src/lib/get-main-layout.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import MainLayout from "../components/layouts/MainLayout"; -import { GetLayoutFn } from "../pages/_app"; - -export const getMainLayout: GetLayoutFn> = ( - page, - _pageProps, - ctx, -) => { - return {page}; -}; diff --git a/examples/algolia/src/lib/get-store-context.ts b/examples/algolia/src/lib/get-store-context.ts new file mode 100644 index 00000000..fa6b4860 --- /dev/null +++ b/examples/algolia/src/lib/get-store-context.ts @@ -0,0 +1,19 @@ +import { Moltin } from "@moltin/sdk"; +import { StoreContext } from "@elasticpath/react-shopper-hooks"; +import { buildSiteNavigation } from "./build-site-navigation"; +import { getCartCookieServer } from "./cart-cookie-server"; +import { getCart } from "../services/cart"; + +export async function getStoreContext(client: Moltin): Promise { + const nav = await buildSiteNavigation(client); + + const cartCookie = getCartCookieServer(); + + const cart = await getCart(cartCookie, client); + + return { + cart, + nav, + type: "store-context-ssr", + }; +} diff --git a/examples/algolia/src/lib/middleware/cart-cookie-middleware.ts b/examples/algolia/src/lib/middleware/cart-cookie-middleware.ts index b8d2b7cb..78aef7ec 100644 --- a/examples/algolia/src/lib/middleware/cart-cookie-middleware.ts +++ b/examples/algolia/src/lib/middleware/cart-cookie-middleware.ts @@ -108,7 +108,7 @@ function retrieveAuthToken( req.cookies.get(`${cookiePrefixKey}_ep_credentials`) ?? resp.cookies.get(`${cookiePrefixKey}_ep_credentials`); - const possiblyParsedCookie = authCookie && JSON.parse(authCookie); + const possiblyParsedCookie = authCookie && JSON.parse(authCookie.value); return possiblyParsedCookie && tokenExpired(possiblyParsedCookie.expires) ? undefined diff --git a/examples/algolia/src/lib/middleware/implicit-auth-middleware.ts b/examples/algolia/src/lib/middleware/implicit-auth-middleware.ts index a92e6e49..3ac28c8e 100644 --- a/examples/algolia/src/lib/middleware/implicit-auth-middleware.ts +++ b/examples/algolia/src/lib/middleware/implicit-auth-middleware.ts @@ -34,7 +34,7 @@ export async function implicitAuthMiddleware( if ( possibleImplicitCookie && - !tokenExpired(JSON.parse(possibleImplicitCookie).expires) + !tokenExpired(JSON.parse(possibleImplicitCookie.value).expires) ) { return { shouldReturn: false, @@ -74,7 +74,6 @@ export async function implicitAuthMiddleware( { sameSite: "strict", expires: new Date(token.expires * 1000), - encode: (val: string) => val, }, ); diff --git a/examples/algolia/src/lib/product-context.ts b/examples/algolia/src/lib/product-context.ts new file mode 100644 index 00000000..7be48e43 --- /dev/null +++ b/examples/algolia/src/lib/product-context.ts @@ -0,0 +1,10 @@ +import { createContext } from "react"; +import { + ProductContextState, + ProductModalContextState, +} from "./types/product-types"; + +export const ProductContext = createContext(null); + +export const ProductModalContext = + createContext(null); diff --git a/examples/algolia/src/lib/product-util.ts b/examples/algolia/src/lib/product-util.ts index fa9a0eb6..5d6eab18 100644 --- a/examples/algolia/src/lib/product-util.ts +++ b/examples/algolia/src/lib/product-util.ts @@ -1,16 +1,11 @@ import type { + CatalogsProductVariation, File, ProductResponse, - CatalogsProductVariation, } from "@moltin/sdk"; -import { createContext } from "react"; import type { IdentifiableBaseProduct, OptionDict, - ProductContextState, - ProductImageObject, - ProductModalContextState, - ProductResponseWithImage, } from "./types/product-types"; export function processImageFiles(files: File[], mainImageId?: string) { @@ -57,31 +52,3 @@ export const createEmptyOptionDict = ( variations: CatalogsProductVariation[], ): OptionDict => variations.reduce((acc, c) => ({ ...acc, [c.id]: undefined }), {}); - -export const ProductContext = createContext(null); -export const ProductModalContext = - createContext(null); - -export const connectProductsWithMainImages = ( - products: ProductResponse[], - images: File[], -): ProductResponseWithImage[] => { - // Object with image id as a key and File data as a value - let imagesObject: ProductImageObject = {}; - images.forEach((image) => { - imagesObject[image.id] = image; - }); - - const productList: ProductResponseWithImage[] = [...products]; - - productList.forEach((product) => { - if ( - product.relationships.main_image?.data && - imagesObject[product.relationships.main_image.data?.id] - ) { - product.main_image = - imagesObject[product.relationships.main_image.data?.id]; - } - }); - return productList; -}; diff --git a/examples/algolia/src/lib/providers/store-provider.tsx b/examples/algolia/src/lib/providers/store-provider.tsx index 7bf51c47..e9eb75dd 100644 --- a/examples/algolia/src/lib/providers/store-provider.tsx +++ b/examples/algolia/src/lib/providers/store-provider.tsx @@ -1,14 +1,18 @@ import { StoreProviderProps } from "@elasticpath/react-shopper-hooks"; import { StoreProvider } from "@elasticpath/react-shopper-hooks"; import { getEpccImplicitClient } from "../epcc-implicit-client"; -import { getCartCookie } from "../cart-cookie"; +import { getCartCookieClient } from "../cart-cookie-client"; const StoreNextJSProvider = ( props: Omit, ) => { const client = getEpccImplicitClient(); return ( - + ); }; diff --git a/examples/algolia/src/lib/search-constants.ts b/examples/algolia/src/lib/search-constants.ts new file mode 100644 index 00000000..1887cfa4 --- /dev/null +++ b/examples/algolia/src/lib/search-constants.ts @@ -0,0 +1,3 @@ +import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code"; + +export const EP_ROUTE_PRICE = `ep_price.${EP_CURRENCY_CODE}.float_price`; diff --git a/examples/algolia/src/lib/search-props.tsx b/examples/algolia/src/lib/search-props.tsx deleted file mode 100644 index aea54db1..00000000 --- a/examples/algolia/src/lib/search-props.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import type { GetServerSideProps } from "next"; -import type { NextPage } from "next"; -import type { ParsedUrlQuery } from "querystring"; -import type { InstantSearchServerState } from "react-instantsearch-hooks-web"; - -import { getServerState } from "react-instantsearch-hooks-server"; -import React from "react"; -import { BreadcrumbEntry, createBreadcrumb } from "./create-breadcrumb"; -import { BreadcrumbLookup } from "./types/breadcrumb-lookup"; -import { renderToString } from "react-dom/server"; - -export interface SearchQuery extends ParsedUrlQuery { - nodeId: string; -} - -export interface ISearch { - algoliaServerState?: InstantSearchServerState; - url: string; - node: string[]; - breadcrumbEntries: BreadcrumbEntry[]; - lookup: BreadcrumbLookup; -} - -export const getSearchSSRProps = - ( - SearchComponent: NextPage, - lookup: BreadcrumbLookup, - ): GetServerSideProps => - async ({ req, params }) => { - const protocol = req.headers.referer?.split("://")[0] || "https"; - const url = `${protocol}://${req.headers.host}${req.url}`; - const node = (params?.node as string[]) ?? []; - const breadcrumbEntries = createBreadcrumb(node, lookup); - - const algoliaServerState = await getServerState( - , - { renderToString }, - ); - - return { - props: { - algoliaServerState, - url, - node, - breadcrumbEntries, - lookup, - }, - }; - }; diff --git a/examples/algolia/src/lib/sort-by-items.ts b/examples/algolia/src/lib/sort-by-items.ts new file mode 100644 index 00000000..65591280 --- /dev/null +++ b/examples/algolia/src/lib/sort-by-items.ts @@ -0,0 +1,13 @@ +import { algoliaEnvData } from "./resolve-algolia-env"; + +export const sortByItems = [ + { label: "Featured", value: algoliaEnvData.indexName }, + { + label: "Price (Low to High)", + value: `${algoliaEnvData.indexName}_price_asc`, + }, + { + label: "Price (High to Low)", + value: `${algoliaEnvData.indexName}_price_desc`, + }, +]; diff --git a/examples/algolia/src/lib/store-wrapper-ssg.ts b/examples/algolia/src/lib/store-wrapper-ssg.ts deleted file mode 100644 index fe48e82f..00000000 --- a/examples/algolia/src/lib/store-wrapper-ssg.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { GetStaticPropsContext, GetStaticPropsResult } from "next"; -import type { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { StoreContextSSG } from "@elasticpath/react-shopper-hooks"; -import { isEPError, isNoDefaultCatalogError } from "./epcc-errors"; - -type IncomingPageStaticProp = ( - ctx: GetStaticPropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSG; -} - -export function withStoreStaticProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSP?: IncomingPageStaticProp) { - return async ( - ctx: GetStaticPropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/algolia/src/lib/store-wrapper-ssr.ts b/examples/algolia/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/algolia/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/algolia/src/lib/types/search-query-params.ts b/examples/algolia/src/lib/types/search-query-params.ts index 22d7f984..715ffe55 100644 --- a/examples/algolia/src/lib/types/search-query-params.ts +++ b/examples/algolia/src/lib/types/search-query-params.ts @@ -1,5 +1,5 @@ export type RouterParams = { - query?: string; + q?: string; page?: number; node?: string[]; sortBy?: string; diff --git a/examples/algolia/src/lib/use-next-router-handler.ts b/examples/algolia/src/lib/use-next-router-handler.ts deleted file mode 100644 index 45835530..00000000 --- a/examples/algolia/src/lib/use-next-router-handler.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { useInstantSearch } from "react-instantsearch-hooks-web"; -import { dequal } from "dequal"; - -import type { UiState } from "instantsearch.js"; - -export type NextRouterHandlerProps = { - dynamicRouteQuery?: Record; - routeToState: (params: TRouteParams) => UiState; - stateToRoute: (uiState: UiState) => TRouteParams; - writeDelay?: number; -}; - -function removeUndefinedParams( - params: TRouteParams, -): Record { - return Object.entries(params).reduce((queries, [key, value]) => { - if (typeof value !== "undefined") { - return { ...queries, [key]: value }; - } - return queries; - }, {}); -} - -function urlToParams(url: string): Record { - return Array.from(new URL(url).searchParams.entries()).reduce<{ - [key: string]: string | string[]; - }>((acc, [key, value]) => { - const valueAtKey: string | string[] | undefined = acc[key]; - return { - ...acc, - [key]: valueAtKey - ? Array.isArray(valueAtKey) - ? [...valueAtKey, value] - : [valueAtKey, value] - : value, - }; - }, {}); -} - -function NextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - writeDelay, -}: NextRouterHandlerProps) { - const router = useRouter(); - const { use, setUiState } = useInstantSearch(); - const [stableQuery, setStableQuery] = useState(router?.query || {}); - const routerPushTimerRef = useRef | null>(null); - - if (!dequal(stableQuery, router?.query || {})) { - setStableQuery(router?.query || {}); - } - - // Route to state - useEffect(() => { - const uiState = routeToState(stableQuery as TRouteParams); - setUiState(uiState); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [stableQuery]); - - // State to route - useEffect(() => { - return use(() => ({ - onStateChange({ uiState }) { - if (routerPushTimerRef.current) { - clearTimeout(routerPushTimerRef.current); - } - routerPushTimerRef.current = setTimeout(() => { - const query = { - ...dynamicRouteQuery, - ...removeUndefinedParams(stateToRoute(uiState)), - }; - // If nodes defined then dynamic path name otherwise standard - const pathname = query.node ? "/search/[...node]" : "/search"; - - router.push( - { - pathname, - query, - }, - undefined, - // Shallow set to true prevents us from calling getServerSideProps - { shallow: true }, - ); - }, writeDelay); - }, - })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [use]); - - return null; -} - -export function useNextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - url, - writeDelay = 400, -}: NextRouterHandlerProps & { url: string }) { - const [stableDynamicRouteQuery, setStableDynamicRouteQuery] = - useState(dynamicRouteQuery); - - if (!dequal(stableDynamicRouteQuery, dynamicRouteQuery)) { - setStableDynamicRouteQuery(dynamicRouteQuery); - } - - const params = urlToParams(url); - const pathName = new URL(url).pathname; - let nodePath; - if (pathName !== "/search") { - nodePath = pathName.replace("/search/", "")?.split("/"); - } - return { - initialUiState: routeToState({ - ...params, - ...(nodePath ? { node: nodePath } : {}), - } as unknown as TRouteParams), - NextRouterHandler: useCallback( - () => - NextRouterHandler({ - dynamicRouteQuery, - routeToState, - stateToRoute, - writeDelay, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [stableDynamicRouteQuery], - ), - }; -} diff --git a/examples/algolia/src/pages/500.tsx b/examples/algolia/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/algolia/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/algolia/src/pages/_app.tsx b/examples/algolia/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/algolia/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSG; -} - -export function withStoreStaticProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSP?: IncomingPageStaticProp) { - return async ( - ctx: GetStaticPropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/algolia/src/lib/store-wrapper-ssr.ts b/examples/algolia/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/algolia/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/algolia/src/lib/types/search-query-params.ts b/examples/algolia/src/lib/types/search-query-params.ts index 22d7f984..715ffe55 100644 --- a/examples/algolia/src/lib/types/search-query-params.ts +++ b/examples/algolia/src/lib/types/search-query-params.ts @@ -1,5 +1,5 @@ export type RouterParams = { - query?: string; + q?: string; page?: number; node?: string[]; sortBy?: string; diff --git a/examples/algolia/src/lib/use-next-router-handler.ts b/examples/algolia/src/lib/use-next-router-handler.ts deleted file mode 100644 index 45835530..00000000 --- a/examples/algolia/src/lib/use-next-router-handler.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { useInstantSearch } from "react-instantsearch-hooks-web"; -import { dequal } from "dequal"; - -import type { UiState } from "instantsearch.js"; - -export type NextRouterHandlerProps = { - dynamicRouteQuery?: Record; - routeToState: (params: TRouteParams) => UiState; - stateToRoute: (uiState: UiState) => TRouteParams; - writeDelay?: number; -}; - -function removeUndefinedParams( - params: TRouteParams, -): Record { - return Object.entries(params).reduce((queries, [key, value]) => { - if (typeof value !== "undefined") { - return { ...queries, [key]: value }; - } - return queries; - }, {}); -} - -function urlToParams(url: string): Record { - return Array.from(new URL(url).searchParams.entries()).reduce<{ - [key: string]: string | string[]; - }>((acc, [key, value]) => { - const valueAtKey: string | string[] | undefined = acc[key]; - return { - ...acc, - [key]: valueAtKey - ? Array.isArray(valueAtKey) - ? [...valueAtKey, value] - : [valueAtKey, value] - : value, - }; - }, {}); -} - -function NextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - writeDelay, -}: NextRouterHandlerProps) { - const router = useRouter(); - const { use, setUiState } = useInstantSearch(); - const [stableQuery, setStableQuery] = useState(router?.query || {}); - const routerPushTimerRef = useRef | null>(null); - - if (!dequal(stableQuery, router?.query || {})) { - setStableQuery(router?.query || {}); - } - - // Route to state - useEffect(() => { - const uiState = routeToState(stableQuery as TRouteParams); - setUiState(uiState); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [stableQuery]); - - // State to route - useEffect(() => { - return use(() => ({ - onStateChange({ uiState }) { - if (routerPushTimerRef.current) { - clearTimeout(routerPushTimerRef.current); - } - routerPushTimerRef.current = setTimeout(() => { - const query = { - ...dynamicRouteQuery, - ...removeUndefinedParams(stateToRoute(uiState)), - }; - // If nodes defined then dynamic path name otherwise standard - const pathname = query.node ? "/search/[...node]" : "/search"; - - router.push( - { - pathname, - query, - }, - undefined, - // Shallow set to true prevents us from calling getServerSideProps - { shallow: true }, - ); - }, writeDelay); - }, - })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [use]); - - return null; -} - -export function useNextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - url, - writeDelay = 400, -}: NextRouterHandlerProps & { url: string }) { - const [stableDynamicRouteQuery, setStableDynamicRouteQuery] = - useState(dynamicRouteQuery); - - if (!dequal(stableDynamicRouteQuery, dynamicRouteQuery)) { - setStableDynamicRouteQuery(dynamicRouteQuery); - } - - const params = urlToParams(url); - const pathName = new URL(url).pathname; - let nodePath; - if (pathName !== "/search") { - nodePath = pathName.replace("/search/", "")?.split("/"); - } - return { - initialUiState: routeToState({ - ...params, - ...(nodePath ? { node: nodePath } : {}), - } as unknown as TRouteParams), - NextRouterHandler: useCallback( - () => - NextRouterHandler({ - dynamicRouteQuery, - routeToState, - stateToRoute, - writeDelay, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [stableDynamicRouteQuery], - ), - }; -} diff --git a/examples/algolia/src/pages/500.tsx b/examples/algolia/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/algolia/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/algolia/src/pages/_app.tsx b/examples/algolia/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/algolia/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/algolia/src/lib/store-wrapper-ssr.ts b/examples/algolia/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/algolia/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/algolia/src/lib/types/search-query-params.ts b/examples/algolia/src/lib/types/search-query-params.ts index 22d7f984..715ffe55 100644 --- a/examples/algolia/src/lib/types/search-query-params.ts +++ b/examples/algolia/src/lib/types/search-query-params.ts @@ -1,5 +1,5 @@ export type RouterParams = { - query?: string; + q?: string; page?: number; node?: string[]; sortBy?: string; diff --git a/examples/algolia/src/lib/use-next-router-handler.ts b/examples/algolia/src/lib/use-next-router-handler.ts deleted file mode 100644 index 45835530..00000000 --- a/examples/algolia/src/lib/use-next-router-handler.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { useInstantSearch } from "react-instantsearch-hooks-web"; -import { dequal } from "dequal"; - -import type { UiState } from "instantsearch.js"; - -export type NextRouterHandlerProps = { - dynamicRouteQuery?: Record; - routeToState: (params: TRouteParams) => UiState; - stateToRoute: (uiState: UiState) => TRouteParams; - writeDelay?: number; -}; - -function removeUndefinedParams( - params: TRouteParams, -): Record { - return Object.entries(params).reduce((queries, [key, value]) => { - if (typeof value !== "undefined") { - return { ...queries, [key]: value }; - } - return queries; - }, {}); -} - -function urlToParams(url: string): Record { - return Array.from(new URL(url).searchParams.entries()).reduce<{ - [key: string]: string | string[]; - }>((acc, [key, value]) => { - const valueAtKey: string | string[] | undefined = acc[key]; - return { - ...acc, - [key]: valueAtKey - ? Array.isArray(valueAtKey) - ? [...valueAtKey, value] - : [valueAtKey, value] - : value, - }; - }, {}); -} - -function NextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - writeDelay, -}: NextRouterHandlerProps) { - const router = useRouter(); - const { use, setUiState } = useInstantSearch(); - const [stableQuery, setStableQuery] = useState(router?.query || {}); - const routerPushTimerRef = useRef | null>(null); - - if (!dequal(stableQuery, router?.query || {})) { - setStableQuery(router?.query || {}); - } - - // Route to state - useEffect(() => { - const uiState = routeToState(stableQuery as TRouteParams); - setUiState(uiState); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [stableQuery]); - - // State to route - useEffect(() => { - return use(() => ({ - onStateChange({ uiState }) { - if (routerPushTimerRef.current) { - clearTimeout(routerPushTimerRef.current); - } - routerPushTimerRef.current = setTimeout(() => { - const query = { - ...dynamicRouteQuery, - ...removeUndefinedParams(stateToRoute(uiState)), - }; - // If nodes defined then dynamic path name otherwise standard - const pathname = query.node ? "/search/[...node]" : "/search"; - - router.push( - { - pathname, - query, - }, - undefined, - // Shallow set to true prevents us from calling getServerSideProps - { shallow: true }, - ); - }, writeDelay); - }, - })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [use]); - - return null; -} - -export function useNextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - url, - writeDelay = 400, -}: NextRouterHandlerProps & { url: string }) { - const [stableDynamicRouteQuery, setStableDynamicRouteQuery] = - useState(dynamicRouteQuery); - - if (!dequal(stableDynamicRouteQuery, dynamicRouteQuery)) { - setStableDynamicRouteQuery(dynamicRouteQuery); - } - - const params = urlToParams(url); - const pathName = new URL(url).pathname; - let nodePath; - if (pathName !== "/search") { - nodePath = pathName.replace("/search/", "")?.split("/"); - } - return { - initialUiState: routeToState({ - ...params, - ...(nodePath ? { node: nodePath } : {}), - } as unknown as TRouteParams), - NextRouterHandler: useCallback( - () => - NextRouterHandler({ - dynamicRouteQuery, - routeToState, - stateToRoute, - writeDelay, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [stableDynamicRouteQuery], - ), - }; -} diff --git a/examples/algolia/src/pages/500.tsx b/examples/algolia/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/algolia/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/algolia/src/pages/_app.tsx b/examples/algolia/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/algolia/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/algolia/src/lib/types/search-query-params.ts b/examples/algolia/src/lib/types/search-query-params.ts index 22d7f984..715ffe55 100644 --- a/examples/algolia/src/lib/types/search-query-params.ts +++ b/examples/algolia/src/lib/types/search-query-params.ts @@ -1,5 +1,5 @@ export type RouterParams = { - query?: string; + q?: string; page?: number; node?: string[]; sortBy?: string; diff --git a/examples/algolia/src/lib/use-next-router-handler.ts b/examples/algolia/src/lib/use-next-router-handler.ts deleted file mode 100644 index 45835530..00000000 --- a/examples/algolia/src/lib/use-next-router-handler.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { useInstantSearch } from "react-instantsearch-hooks-web"; -import { dequal } from "dequal"; - -import type { UiState } from "instantsearch.js"; - -export type NextRouterHandlerProps = { - dynamicRouteQuery?: Record; - routeToState: (params: TRouteParams) => UiState; - stateToRoute: (uiState: UiState) => TRouteParams; - writeDelay?: number; -}; - -function removeUndefinedParams( - params: TRouteParams, -): Record { - return Object.entries(params).reduce((queries, [key, value]) => { - if (typeof value !== "undefined") { - return { ...queries, [key]: value }; - } - return queries; - }, {}); -} - -function urlToParams(url: string): Record { - return Array.from(new URL(url).searchParams.entries()).reduce<{ - [key: string]: string | string[]; - }>((acc, [key, value]) => { - const valueAtKey: string | string[] | undefined = acc[key]; - return { - ...acc, - [key]: valueAtKey - ? Array.isArray(valueAtKey) - ? [...valueAtKey, value] - : [valueAtKey, value] - : value, - }; - }, {}); -} - -function NextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - writeDelay, -}: NextRouterHandlerProps) { - const router = useRouter(); - const { use, setUiState } = useInstantSearch(); - const [stableQuery, setStableQuery] = useState(router?.query || {}); - const routerPushTimerRef = useRef | null>(null); - - if (!dequal(stableQuery, router?.query || {})) { - setStableQuery(router?.query || {}); - } - - // Route to state - useEffect(() => { - const uiState = routeToState(stableQuery as TRouteParams); - setUiState(uiState); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [stableQuery]); - - // State to route - useEffect(() => { - return use(() => ({ - onStateChange({ uiState }) { - if (routerPushTimerRef.current) { - clearTimeout(routerPushTimerRef.current); - } - routerPushTimerRef.current = setTimeout(() => { - const query = { - ...dynamicRouteQuery, - ...removeUndefinedParams(stateToRoute(uiState)), - }; - // If nodes defined then dynamic path name otherwise standard - const pathname = query.node ? "/search/[...node]" : "/search"; - - router.push( - { - pathname, - query, - }, - undefined, - // Shallow set to true prevents us from calling getServerSideProps - { shallow: true }, - ); - }, writeDelay); - }, - })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [use]); - - return null; -} - -export function useNextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - url, - writeDelay = 400, -}: NextRouterHandlerProps & { url: string }) { - const [stableDynamicRouteQuery, setStableDynamicRouteQuery] = - useState(dynamicRouteQuery); - - if (!dequal(stableDynamicRouteQuery, dynamicRouteQuery)) { - setStableDynamicRouteQuery(dynamicRouteQuery); - } - - const params = urlToParams(url); - const pathName = new URL(url).pathname; - let nodePath; - if (pathName !== "/search") { - nodePath = pathName.replace("/search/", "")?.split("/"); - } - return { - initialUiState: routeToState({ - ...params, - ...(nodePath ? { node: nodePath } : {}), - } as unknown as TRouteParams), - NextRouterHandler: useCallback( - () => - NextRouterHandler({ - dynamicRouteQuery, - routeToState, - stateToRoute, - writeDelay, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [stableDynamicRouteQuery], - ), - }; -} diff --git a/examples/algolia/src/pages/500.tsx b/examples/algolia/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/algolia/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/algolia/src/pages/_app.tsx b/examples/algolia/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/algolia/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/algolia/src/lib/types/search-query-params.ts b/examples/algolia/src/lib/types/search-query-params.ts index 22d7f984..715ffe55 100644 --- a/examples/algolia/src/lib/types/search-query-params.ts +++ b/examples/algolia/src/lib/types/search-query-params.ts @@ -1,5 +1,5 @@ export type RouterParams = { - query?: string; + q?: string; page?: number; node?: string[]; sortBy?: string; diff --git a/examples/algolia/src/lib/use-next-router-handler.ts b/examples/algolia/src/lib/use-next-router-handler.ts deleted file mode 100644 index 45835530..00000000 --- a/examples/algolia/src/lib/use-next-router-handler.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { useInstantSearch } from "react-instantsearch-hooks-web"; -import { dequal } from "dequal"; - -import type { UiState } from "instantsearch.js"; - -export type NextRouterHandlerProps = { - dynamicRouteQuery?: Record; - routeToState: (params: TRouteParams) => UiState; - stateToRoute: (uiState: UiState) => TRouteParams; - writeDelay?: number; -}; - -function removeUndefinedParams( - params: TRouteParams, -): Record { - return Object.entries(params).reduce((queries, [key, value]) => { - if (typeof value !== "undefined") { - return { ...queries, [key]: value }; - } - return queries; - }, {}); -} - -function urlToParams(url: string): Record { - return Array.from(new URL(url).searchParams.entries()).reduce<{ - [key: string]: string | string[]; - }>((acc, [key, value]) => { - const valueAtKey: string | string[] | undefined = acc[key]; - return { - ...acc, - [key]: valueAtKey - ? Array.isArray(valueAtKey) - ? [...valueAtKey, value] - : [valueAtKey, value] - : value, - }; - }, {}); -} - -function NextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - writeDelay, -}: NextRouterHandlerProps) { - const router = useRouter(); - const { use, setUiState } = useInstantSearch(); - const [stableQuery, setStableQuery] = useState(router?.query || {}); - const routerPushTimerRef = useRef | null>(null); - - if (!dequal(stableQuery, router?.query || {})) { - setStableQuery(router?.query || {}); - } - - // Route to state - useEffect(() => { - const uiState = routeToState(stableQuery as TRouteParams); - setUiState(uiState); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [stableQuery]); - - // State to route - useEffect(() => { - return use(() => ({ - onStateChange({ uiState }) { - if (routerPushTimerRef.current) { - clearTimeout(routerPushTimerRef.current); - } - routerPushTimerRef.current = setTimeout(() => { - const query = { - ...dynamicRouteQuery, - ...removeUndefinedParams(stateToRoute(uiState)), - }; - // If nodes defined then dynamic path name otherwise standard - const pathname = query.node ? "/search/[...node]" : "/search"; - - router.push( - { - pathname, - query, - }, - undefined, - // Shallow set to true prevents us from calling getServerSideProps - { shallow: true }, - ); - }, writeDelay); - }, - })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [use]); - - return null; -} - -export function useNextRouterHandler< - TRouteParams extends Record = Record, ->({ - dynamicRouteQuery = {}, - routeToState, - stateToRoute, - url, - writeDelay = 400, -}: NextRouterHandlerProps & { url: string }) { - const [stableDynamicRouteQuery, setStableDynamicRouteQuery] = - useState(dynamicRouteQuery); - - if (!dequal(stableDynamicRouteQuery, dynamicRouteQuery)) { - setStableDynamicRouteQuery(dynamicRouteQuery); - } - - const params = urlToParams(url); - const pathName = new URL(url).pathname; - let nodePath; - if (pathName !== "/search") { - nodePath = pathName.replace("/search/", "")?.split("/"); - } - return { - initialUiState: routeToState({ - ...params, - ...(nodePath ? { node: nodePath } : {}), - } as unknown as TRouteParams), - NextRouterHandler: useCallback( - () => - NextRouterHandler({ - dynamicRouteQuery, - routeToState, - stateToRoute, - writeDelay, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [stableDynamicRouteQuery], - ), - }; -} diff --git a/examples/algolia/src/pages/500.tsx b/examples/algolia/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/algolia/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/algolia/src/pages/_app.tsx b/examples/algolia/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/algolia/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
= { - pageProps: P; - Component: NextPageWithLayout
; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
= ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout
= NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/algolia/src/pages/about.tsx b/examples/algolia/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/algolia/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/cart.tsx b/examples/algolia/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/algolia/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/algolia/src/pages/faq.tsx b/examples/algolia/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/algolia/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/index.tsx b/examples/algolia/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/algolia/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/algolia/src/pages/products/[productId].tsx b/examples/algolia/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/algolia/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/algolia/src/pages/search/[...node].tsx b/examples/algolia/src/pages/search/[...node].tsx deleted file mode 100644 index 29e7d1c7..00000000 --- a/examples/algolia/src/pages/search/[...node].tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -interface INodeSearch extends ISearch { - nodeName?: string | string[]; -} - -export function NodeSearch(props: INodeSearch): JSX.Element { - return ; -} - -NodeSearch.getLayout = function getLayout( - page: ReactElement, - pageProps: { node: string[] }, - ctx?: StoreContext, -) { - return ( - <> - {page} - - - {`${MAIN_LAYOUT_TITLE} - ${ - pageProps.node[pageProps.node.length - 1] - }`} - - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(NodeSearch, buildBreadcrumbLookup(nav))(context); -}); - -export default NodeSearch; diff --git a/examples/algolia/src/pages/search/index.tsx b/examples/algolia/src/pages/search/index.tsx deleted file mode 100644 index 7419bb73..00000000 --- a/examples/algolia/src/pages/search/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; - -import { - getSearchSSRProps, - ISearch, - SearchQuery, -} from "../../lib/search-props"; -import Search from "../../components/search/SearchPage"; -import { buildBreadcrumbLookup } from "../../lib/build-breadcrumb-lookup"; -import React, { ReactElement } from "react"; -import Head from "next/head"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; - -Search.getLayout = function getLayout(page: ReactElement, _, ctx) { - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - Search`} - - - - - - ); -}; - -export const getServerSideProps = withStoreServerSideProps< - ISearch, - SearchQuery ->(async (context, nav) => { - return getSearchSSRProps(Search, buildBreadcrumbLookup(nav))(context); -}); - -export default Search; diff --git a/examples/algolia/src/pages/shipping.tsx b/examples/algolia/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/algolia/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/pages/terms.tsx b/examples/algolia/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/algolia/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/algolia/src/services/cart.ts b/examples/algolia/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/algolia/src/services/cart.ts +++ b/examples/algolia/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/algolia/src/services/hierarchy.ts b/examples/algolia/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/algolia/src/services/hierarchy.ts +++ b/examples/algolia/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/algolia/src/services/products.ts b/examples/algolia/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/algolia/src/services/products.ts +++ b/examples/algolia/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/algolia/tailwind.config.ts +++ b/examples/algolia/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/algolia/tsconfig.json b/examples/algolia/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/algolia/tsconfig.json +++ b/examples/algolia/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] } diff --git a/examples/basic/.env.example b/examples/basic/.env.example index 48265f91..e9f71a4c 100644 --- a/examples/basic/.env.example +++ b/examples/basic/.env.example @@ -13,4 +13,5 @@ NEXT_PUBLIC_BRAINTREE_KEY= NEXT_PUBLIC_CONTEXT_TAG= NEXT_PUBLIC_CHANNEL= NEXT_PUBLIC_DEMO_PROMO_ID= -NEXT_PUBLIC_DEMO_NODE_ID= \ No newline at end of file +NEXT_PUBLIC_DEMO_NODE_ID= +SITE_NAME=My Site \ No newline at end of file diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js index 0ccb3ba7..be97d613 100644 --- a/examples/basic/next.config.js +++ b/examples/basic/next.config.js @@ -4,8 +4,17 @@ * @type {import('next').NextConfig} **/ const nextConfig = { + experimental: { + serverActions: true, + }, images: { - domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "**.epusercontent.com", + }, + ], }, i18n: { locales: ["en"], @@ -16,11 +25,6 @@ const nextConfig = { ...config.resolve.fallback, fs: false, }; - config.module.rules.push({ - test: /\.svg$/i, - issuer: /\.[jt]sx?$/, - use: ["@svgr/webpack"], - }); return config; }, diff --git a/examples/basic/package.json b/examples/basic/package.json index 73959db7..8f77c39e 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -21,23 +21,24 @@ }, "dependencies": { "@elasticpath/react-shopper-hooks": "0.5.1", + "@elasticpath/shopper-common": "0.1.1", "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.0.18", "@moltin/sdk": "^25.0.2", "@stripe/react-stripe-js": "^2.3.0", "@stripe/stripe-js": "^2.1.6", "clsx": "^1.2.1", - "cookies-next": "^2.1.1", - "dequal": "^2.0.3", + "cookies-next": "^4.0.0", "focus-visible": "^5.2.0", "formik": "^2.2.9", - "next": "^12.2.5", + "next": "^13.5.6", "pure-react-carousel": "^1.29.0", "rc-slider": "^10.3.0", "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-toastify": "^9.1.3", + "server-only": "^0.0.1", "zod": "^3.22.4", "zod-formik-adapter": "^1.2.0" }, @@ -52,6 +53,7 @@ "eslint": "^8.49.0", "eslint-config-next": "^13.5.2", "eslint-config-prettier": "^9.0.0", + "encoding": "^0.1.13", "eslint-plugin-react": "^7.33.2", "vite": "^4.2.1", "vitest": "^0.34.5", diff --git a/examples/basic/public/150-placeholder.png b/examples/basic/public/150-placeholder.png deleted file mode 100644 index 61cd0d97..00000000 Binary files a/examples/basic/public/150-placeholder.png and /dev/null differ diff --git a/examples/basic/public/icons/empty.svg b/examples/basic/public/icons/empty.svg deleted file mode 100644 index 48a29670..00000000 --- a/examples/basic/public/icons/empty.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg deleted file mode 100644 index 6250de53..00000000 --- a/examples/basic/public/icons/ep-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg deleted file mode 100644 index c2498f42..00000000 --- a/examples/basic/public/icons/ep-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/basic/public/icons/github.svg b/examples/basic/public/icons/github.svg deleted file mode 100644 index 21a72e8c..00000000 --- a/examples/basic/public/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/basic/src/app/about/page.tsx b/examples/basic/src/app/about/page.tsx new file mode 100644 index 00000000..edda2df8 --- /dev/null +++ b/examples/basic/src/app/about/page.tsx @@ -0,0 +1,5 @@ +import Blurb from "../../components/shared/blurb"; + +export default function About() { + return ; +} diff --git a/examples/basic/src/app/cart/page.tsx b/examples/basic/src/app/cart/page.tsx new file mode 100644 index 00000000..4dc53f4b --- /dev/null +++ b/examples/basic/src/app/cart/page.tsx @@ -0,0 +1,42 @@ +"use client"; +import Cart from "../../components/cart/Cart"; +import CartIcon from "../../components/icons/cart"; +import { useCart } from "@elasticpath/react-shopper-hooks"; +import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props"; +import Link from "next/link"; + +export default function CartPage() { + const { removeCartItem, state } = useCart(); + const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); + + return ( + + {shoppingCartProps && ( + <> + Your Shopping Cart + + + )} + {(state.kind === "empty-cart-state" || + state.kind === "uninitialised-cart-state" || + state.kind === "loading-cart-state") && ( + + + + Empty Cart + + Your cart is empty + + + Start shopping + + + + )} + + ); +} diff --git a/examples/basic/src/pages/checkout/[cartId].tsx b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx similarity index 56% rename from examples/basic/src/pages/checkout/[cartId].tsx rename to examples/basic/src/app/checkout/[cartId]/cart-display.tsx index 827c37f0..c06693bf 100644 --- a/examples/basic/src/pages/checkout/[cartId].tsx +++ b/examples/basic/src/app/checkout/[cartId]/cart-display.tsx @@ -1,30 +1,25 @@ -import type { NextPage } from "next"; +"use client"; import { + getPresentCartStateCheckout, + PresentCartState, + useCart, +} from "@elasticpath/react-shopper-hooks"; +import { ReactElement, useCallback, useState } from "react"; +import type { Cart, CartIncluded, ConfirmPaymentResponse, ResourceIncluded, } from "@moltin/sdk"; -import { ParsedUrlQuery } from "querystring"; -import { withStoreServerSideProps } from "../../lib/store-wrapper-ssr"; -import { getCart } from "../../services/cart"; -import { OrderSummary } from "../../components/checkout/OrderSummary"; -import { - getPresentCartStateCheckout, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { useCallback, useState } from "react"; -import { OrderCompleteState } from "../../components/checkout/types/order-pending-state"; -import { PresentCartState } from "@elasticpath/react-shopper-hooks"; -import { CheckoutForm as CheckoutFormType } from "../../components/checkout/form-schema/checkout-form-schema"; -import OrderComplete from "../../components/checkout/OrderComplete"; -import CheckoutForm from "../../components/checkout/payments/CheckoutForm"; +import { OrderCompleteState } from "../../../components/checkout/types/order-pending-state"; +import OrderComplete from "../../../components/checkout/OrderComplete"; +import CheckoutForm from "../../../components/checkout/payments/CheckoutForm"; +import { OrderSummary } from "../../../components/checkout/OrderSummary"; +import { CheckoutForm as CheckoutFormType } from "../../../components/checkout/form-schema/checkout-form-schema"; -interface ICheckout { +export function CartDisplay(_props: { cart: ResourceIncluded; -} - -export const Checkout: NextPage = () => { +}): ReactElement { const { state } = useCart(); const [orderCompleteState, setOrderCompleteState] = useState< OrderCompleteState | undefined @@ -77,39 +72,4 @@ export const Checkout: NextPage = () => { )}
, -): string { - /** - * Get the cookie if it's set and retrievable through either the context provided or the browsers - */ - const possibleCartCookie = getCookie( - `${COOKIE_PREFIX_KEY}_ep_cart`, - context && { - req: context.req, - res: context.res, - }, - ); - - if (typeof possibleCartCookie === "string") { - return possibleCartCookie; - } - - /** - * As a fallback check to see if this is server side and the res header has the cookie set - * - * This can happen if the cookie has been set by middleware but not yet been set - * on the browser. - */ - const setCookiesHeader = context?.res?.getHeader("set-cookie"); - const possibleResCookie = - Array.isArray(setCookiesHeader) && - parseCookies(setCookiesHeader)[`${COOKIE_PREFIX_KEY}_ep_cart`]?.value; - - if (typeof possibleResCookie === "string") { - return possibleResCookie; - } - - throw Error( - `Failed to fetch cart cookie! key ${`${COOKIE_PREFIX_KEY}_ep_cart`}`, - ); -} diff --git a/examples/basic/src/lib/connect-products-with-main-images.ts b/examples/basic/src/lib/connect-products-with-main-images.ts new file mode 100644 index 00000000..11b56569 --- /dev/null +++ b/examples/basic/src/lib/connect-products-with-main-images.ts @@ -0,0 +1,29 @@ +import { File, ProductResponse } from "@moltin/sdk"; +import { + ProductImageObject, + ProductResponseWithImage, +} from "./types/product-types"; + +export const connectProductsWithMainImages = ( + products: ProductResponse[], + images: File[], +): ProductResponseWithImage[] => { + // Object with image id as a key and File data as a value + let imagesObject: ProductImageObject = {}; + images.forEach((image) => { + imagesObject[image.id] = image; + }); + + const productList: ProductResponseWithImage[] = [...products]; + + productList.forEach((product) => { + if ( + product.relationships.main_image?.data && + imagesObject[product.relationships.main_image.data?.id] + ) { + product.main_image = + imagesObject[product.relationships.main_image.data?.id]; + } + }); + return productList; +}; diff --git a/examples/basic/src/lib/cookie-constants.ts b/examples/basic/src/lib/cookie-constants.ts new file mode 100644 index 00000000..584e6035 --- /dev/null +++ b/examples/basic/src/lib/cookie-constants.ts @@ -0,0 +1,3 @@ +import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; + +export const CREDENTIALS_COOKIE_NAME = `${COOKIE_PREFIX_KEY}_ep_credentials`; diff --git a/examples/basic/src/lib/epcc-implicit-client.ts b/examples/basic/src/lib/epcc-implicit-client.ts index 90274bfd..3e6b6a97 100644 --- a/examples/basic/src/lib/epcc-implicit-client.ts +++ b/examples/basic/src/lib/epcc-implicit-client.ts @@ -1,73 +1,37 @@ -import { - gateway as EPCCGateway, - MemoryStorageFactory, - StorageFactory, -} from "@moltin/sdk"; +import { gateway, StorageFactory } from "@moltin/sdk"; import { epccEnv } from "./resolve-epcc-env"; import { resolveEpccCustomRuleHeaders } from "./custom-rule-headers"; import { deleteCookie, getCookie, setCookie } from "cookies-next"; -import { _getClientStore, _registerClient } from "./ep-client-store"; import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; -import { GetServerSidePropsContext } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { EP_CURRENCY_CODE } from "../lib/resolve-ep-currency-code"; +import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code"; const headers = resolveEpccCustomRuleHeaders(); const { client_id, host } = epccEnv; -export const getEpccImplicitClient = < - P extends ParsedUrlQuery = ParsedUrlQuery, ->( - context?: GetServerSidePropsContext
): StorageFactory { +function createNextCookieStorageFactory(): StorageFactory { return { set: (key: string, value: string): void => { setCookie(key, value, { - ...(context && { req: context.req, res: context.res }), sameSite: "strict", - encode: (val: string) => val, }); }, get: (key: string): any => { - return getCookie(key, context && { req: context.req, res: context.res }); + return getCookie(key); }, delete: (key: string) => { - deleteCookie(key, context && { req: context.req, res: context.res }); + deleteCookie(key); }, }; } diff --git a/examples/basic/src/lib/epcc-server-side-implicit-client.ts b/examples/basic/src/lib/epcc-server-side-implicit-client.ts new file mode 100644 index 00000000..ca66c948 --- /dev/null +++ b/examples/basic/src/lib/epcc-server-side-implicit-client.ts @@ -0,0 +1,48 @@ +import "server-only"; +import { gateway, StorageFactory } from "@moltin/sdk"; +import { epccEnv } from "./resolve-epcc-env"; +import { resolveEpccCustomRuleHeaders } from "./custom-rule-headers"; +import { COOKIE_PREFIX_KEY } from "./resolve-cart-env"; +import { EP_CURRENCY_CODE } from "./resolve-ep-currency-code"; +import { getCookie } from "./get-cookie"; +import { CREDENTIALS_COOKIE_NAME } from "./cookie-constants"; + +const customHeaders = resolveEpccCustomRuleHeaders(); + +const { client_id, host } = epccEnv; + +export function getServerSideImplicitClient() { + const credentialsCookie = getCookie(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), + }); +} + +function createServerSideNextCookieStorageFactory( + initialCookieValue?: string, +): StorageFactory { + let state = new Map(); + + if (initialCookieValue) { + state.set(`${COOKIE_PREFIX_KEY}_ep_credentials`, initialCookieValue); + } + + return { + set: (key: string, value: string): void => { + state.set(key, value); + }, + get: (key: string): any => { + return state.get(key); + }, + delete: (key: string) => { + state.delete(key); + }, + }; +} diff --git a/examples/basic/src/lib/get-cookie.ts b/examples/basic/src/lib/get-cookie.ts new file mode 100644 index 00000000..013a08fe --- /dev/null +++ b/examples/basic/src/lib/get-cookie.ts @@ -0,0 +1,38 @@ +import "server-only"; +import { + RequestCookie, + parseCookie, +} from "next/dist/compiled/@edge-runtime/cookies"; +import { cookies, headers } from "next/headers"; + +/** + * required to work around this issue - https://github.com/vercel/next.js/issues/49442 + * + * Cookies will not be set for the first response from and have to be fethched from the value set by middleware in the + * raw Set-Cookie header. + */ +export function getCookie(cookieName: string): RequestCookie | undefined { + const allCookiesAsString = headers().get("Set-Cookie"); + + if (!allCookiesAsString) { + return cookies().get(cookieName); + } + + const allCookiesAsObjects = allCookiesAsString + .split(", ") + .map((singleCookieAsString) => parseCookie(singleCookieAsString.trim())); + + const targetCookieAsObject = allCookiesAsObjects.find( + (singleCookieAsObject) => + typeof singleCookieAsObject.get(cookieName) == "string", + ); + + if (!targetCookieAsObject) { + return cookies().get(cookieName); + } + + return { + name: cookieName, + value: targetCookieAsObject.get(cookieName) ?? "", + }; +} diff --git a/examples/basic/src/lib/get-main-layout.tsx b/examples/basic/src/lib/get-main-layout.tsx deleted file mode 100644 index b164bc3a..00000000 --- a/examples/basic/src/lib/get-main-layout.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import MainLayout from "../components/layouts/MainLayout"; -import { GetLayoutFn } from "../pages/_app"; - -export const getMainLayout: GetLayoutFn> = ( - page, - _pageProps, - ctx, -) => { - return {page}; -}; diff --git a/examples/basic/src/lib/get-store-context.ts b/examples/basic/src/lib/get-store-context.ts new file mode 100644 index 00000000..fa6b4860 --- /dev/null +++ b/examples/basic/src/lib/get-store-context.ts @@ -0,0 +1,19 @@ +import { Moltin } from "@moltin/sdk"; +import { StoreContext } from "@elasticpath/react-shopper-hooks"; +import { buildSiteNavigation } from "./build-site-navigation"; +import { getCartCookieServer } from "./cart-cookie-server"; +import { getCart } from "../services/cart"; + +export async function getStoreContext(client: Moltin): Promise { + const nav = await buildSiteNavigation(client); + + const cartCookie = getCartCookieServer(); + + const cart = await getCart(cartCookie, client); + + return { + cart, + nav, + type: "store-context-ssr", + }; +} diff --git a/examples/basic/src/lib/middleware/cart-cookie-middleware.ts b/examples/basic/src/lib/middleware/cart-cookie-middleware.ts index b8d2b7cb..78aef7ec 100644 --- a/examples/basic/src/lib/middleware/cart-cookie-middleware.ts +++ b/examples/basic/src/lib/middleware/cart-cookie-middleware.ts @@ -108,7 +108,7 @@ function retrieveAuthToken( req.cookies.get(`${cookiePrefixKey}_ep_credentials`) ?? resp.cookies.get(`${cookiePrefixKey}_ep_credentials`); - const possiblyParsedCookie = authCookie && JSON.parse(authCookie); + const possiblyParsedCookie = authCookie && JSON.parse(authCookie.value); return possiblyParsedCookie && tokenExpired(possiblyParsedCookie.expires) ? undefined diff --git a/examples/basic/src/lib/middleware/implicit-auth-middleware.ts b/examples/basic/src/lib/middleware/implicit-auth-middleware.ts index a92e6e49..3ac28c8e 100644 --- a/examples/basic/src/lib/middleware/implicit-auth-middleware.ts +++ b/examples/basic/src/lib/middleware/implicit-auth-middleware.ts @@ -34,7 +34,7 @@ export async function implicitAuthMiddleware( if ( possibleImplicitCookie && - !tokenExpired(JSON.parse(possibleImplicitCookie).expires) + !tokenExpired(JSON.parse(possibleImplicitCookie.value).expires) ) { return { shouldReturn: false, @@ -74,7 +74,6 @@ export async function implicitAuthMiddleware( { sameSite: "strict", expires: new Date(token.expires * 1000), - encode: (val: string) => val, }, ); diff --git a/examples/basic/src/lib/product-context.ts b/examples/basic/src/lib/product-context.ts new file mode 100644 index 00000000..7be48e43 --- /dev/null +++ b/examples/basic/src/lib/product-context.ts @@ -0,0 +1,10 @@ +import { createContext } from "react"; +import { + ProductContextState, + ProductModalContextState, +} from "./types/product-types"; + +export const ProductContext = createContext(null); + +export const ProductModalContext = + createContext(null); diff --git a/examples/basic/src/lib/product-util.ts b/examples/basic/src/lib/product-util.ts index fa9a0eb6..5d6eab18 100644 --- a/examples/basic/src/lib/product-util.ts +++ b/examples/basic/src/lib/product-util.ts @@ -1,16 +1,11 @@ import type { + CatalogsProductVariation, File, ProductResponse, - CatalogsProductVariation, } from "@moltin/sdk"; -import { createContext } from "react"; import type { IdentifiableBaseProduct, OptionDict, - ProductContextState, - ProductImageObject, - ProductModalContextState, - ProductResponseWithImage, } from "./types/product-types"; export function processImageFiles(files: File[], mainImageId?: string) { @@ -57,31 +52,3 @@ export const createEmptyOptionDict = ( variations: CatalogsProductVariation[], ): OptionDict => variations.reduce((acc, c) => ({ ...acc, [c.id]: undefined }), {}); - -export const ProductContext = createContext(null); -export const ProductModalContext = - createContext(null); - -export const connectProductsWithMainImages = ( - products: ProductResponse[], - images: File[], -): ProductResponseWithImage[] => { - // Object with image id as a key and File data as a value - let imagesObject: ProductImageObject = {}; - images.forEach((image) => { - imagesObject[image.id] = image; - }); - - const productList: ProductResponseWithImage[] = [...products]; - - productList.forEach((product) => { - if ( - product.relationships.main_image?.data && - imagesObject[product.relationships.main_image.data?.id] - ) { - product.main_image = - imagesObject[product.relationships.main_image.data?.id]; - } - }); - return productList; -}; diff --git a/examples/basic/src/lib/providers/store-provider.tsx b/examples/basic/src/lib/providers/store-provider.tsx index 7bf51c47..e9eb75dd 100644 --- a/examples/basic/src/lib/providers/store-provider.tsx +++ b/examples/basic/src/lib/providers/store-provider.tsx @@ -1,14 +1,18 @@ import { StoreProviderProps } from "@elasticpath/react-shopper-hooks"; import { StoreProvider } from "@elasticpath/react-shopper-hooks"; import { getEpccImplicitClient } from "../epcc-implicit-client"; -import { getCartCookie } from "../cart-cookie"; +import { getCartCookieClient } from "../cart-cookie-client"; const StoreNextJSProvider = ( props: Omit, ) => { const client = getEpccImplicitClient(); return ( - + ); }; diff --git a/examples/basic/src/lib/store-wrapper-ssg.ts b/examples/basic/src/lib/store-wrapper-ssg.ts deleted file mode 100644 index fe48e82f..00000000 --- a/examples/basic/src/lib/store-wrapper-ssg.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { GetStaticPropsContext, GetStaticPropsResult } from "next"; -import type { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { StoreContextSSG } from "@elasticpath/react-shopper-hooks"; -import { isEPError, isNoDefaultCatalogError } from "./epcc-errors"; - -type IncomingPageStaticProp = ( - ctx: GetStaticPropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSG; -} - -export function withStoreStaticProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSP?: IncomingPageStaticProp) { - return async ( - ctx: GetStaticPropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/basic/src/lib/store-wrapper-ssr.ts b/examples/basic/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/basic/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/basic/src/pages/500.tsx b/examples/basic/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/basic/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/basic/src/pages/_app.tsx b/examples/basic/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/basic/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSG; -} - -export function withStoreStaticProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSP?: IncomingPageStaticProp) { - return async ( - ctx: GetStaticPropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/basic/src/lib/store-wrapper-ssr.ts b/examples/basic/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/basic/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/basic/src/pages/500.tsx b/examples/basic/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/basic/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/basic/src/pages/_app.tsx b/examples/basic/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/basic/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - try { - const nav = await buildSiteNavigation(); - - const incomingGSPResult = incomingGSP - ? await incomingGSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSPResult) { - return { - props: { - ...incomingGSPResult.props, - store: { - type: "store-context-ssg", - nav, - }, - }, - }; - } - - if ("redirect" in incomingGSPResult) { - return { redirect: { ...incomingGSPResult.redirect } }; - } - - if ("notFound" in incomingGSPResult) { - return { notFound: incomingGSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - } catch (err) { - if (isEPError(err) && isNoDefaultCatalogError(err.errors)) { - console.error("\x1b[31m%s\x1b[0m", "Error: Catalog Not Published"); - console.error("Please publish a catalog for this store."); - console.error( - "See https://elasticpath.dev/docs/pxm/products/get-started-pxm#create-and-publish-a-catalog", - ); - } else { - console.error( - `${ - err instanceof Error - ? `${err.name} - ${err.message}` - : "Unknown error occurred while trying to resolve store wrapper." - }`, - ); - } - return { - notFound: true, - }; - } - }; -} diff --git a/examples/basic/src/lib/store-wrapper-ssr.ts b/examples/basic/src/lib/store-wrapper-ssr.ts deleted file mode 100644 index 2fda686d..00000000 --- a/examples/basic/src/lib/store-wrapper-ssr.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { buildSiteNavigation, NavigationNode } from "./build-site-navigation"; -import { getCart } from "../services/cart"; -import { StoreContextSSR } from "./types/store-context"; -import { getCartCookie } from "./cart-cookie"; -import { getEpccImplicitClient } from "./epcc-implicit-client"; - -type IncomingPageServerSideProp< - P, - Q extends ParsedUrlQuery = ParsedUrlQuery, -> = ( - ctx: GetServerSidePropsContext, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/basic/src/pages/500.tsx b/examples/basic/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/basic/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/basic/src/pages/_app.tsx b/examples/basic/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/basic/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
, - nav: NavigationNode[], -) => Promise>; - -interface ExpandedContext { - store: StoreContextSSR; -} - -export function withStoreServerSideProps< - T extends object = {}, - P extends ParsedUrlQuery = ParsedUrlQuery, ->(incomingGSSP?: IncomingPageServerSideProp) { - return async ( - ctx: GetServerSidePropsContext, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/basic/src/pages/500.tsx b/examples/basic/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/basic/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/basic/src/pages/_app.tsx b/examples/basic/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/basic/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
, - ): Promise> => { - // Fetching nodes and hierarchies for statically generated nav - const client = getEpccImplicitClient(ctx); - - const nav = await buildSiteNavigation(client); - const cartCookie = getCartCookie(ctx); - - const cart = await getCart(cartCookie, client); - - const incomingGSSPResult = incomingGSSP - ? await incomingGSSP(ctx, nav) - : { props: {} as T }; - - if ("props" in incomingGSSPResult) { - return { - props: { - ...(await Promise.resolve(incomingGSSPResult.props)), - store: { - type: "store-context-ssr", - nav, - cart, - }, - }, - }; - } - - if ("redirect" in incomingGSSPResult) { - return { redirect: { ...incomingGSSPResult.redirect } }; - } - - if ("notFound" in incomingGSSPResult) { - return { notFound: incomingGSSPResult.notFound }; - } - - // Fallback - return { - notFound: true, - }; - }; -} diff --git a/examples/basic/src/pages/500.tsx b/examples/basic/src/pages/500.tsx deleted file mode 100644 index a9937851..00000000 --- a/examples/basic/src/pages/500.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Link from "next/link"; - -export default function Custom500() { - return ( - - - 500 - Internal server error. - - - Back to home - - - ); -} diff --git a/examples/basic/src/pages/_app.tsx b/examples/basic/src/pages/_app.tsx deleted file mode 100644 index 9a03d78a..00000000 --- a/examples/basic/src/pages/_app.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import StoreNextJSProvider from "../lib/providers/store-provider"; -import type { AppProps as NextAppProps } from "next/app"; -import "focus-visible/dist/focus-visible"; -import "../styles/globals.css"; -import { StoreContext } from "@elasticpath/react-shopper-hooks"; -import { NextPage } from "next"; -import { ReactElement, ReactNode } from "react"; -import { getMainLayout } from "../lib/get-main-layout"; - -// modified version - allows for custom pageProps type, falling back to 'any' -type AppProps = { - pageProps: P; - Component: NextPageWithLayout; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
; -} & Omit, "pageProps" | "Component">; - -interface CustomAppProps { - store: StoreContext | undefined; -} - -export type GetLayoutFn = ( - page: ReactElement, - pageProps: P, - storeContext?: StoreContext, -) => ReactNode; - -/** - * Adds getLayout function as possible prop on Components - */ -export type NextPageWithLayout = NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
= NextPage & { - getLayout?: GetLayoutFn; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }
; -}; - -function MyApp({ Component, pageProps }: AppProps) { - const getLayout = Component.getLayout ?? getMainLayout; - return ( - - {getLayout(, pageProps, pageProps.store)} - - ); -} - -export default MyApp; diff --git a/examples/basic/src/pages/about.tsx b/examples/basic/src/pages/about.tsx deleted file mode 100644 index 10f61f9b..00000000 --- a/examples/basic/src/pages/about.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const About = () => ; - -export default About; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/cart.tsx b/examples/basic/src/pages/cart.tsx deleted file mode 100644 index 0a49c1a6..00000000 --- a/examples/basic/src/pages/cart.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { NextPage } from "next"; -import Image from "next/image"; -import { withStoreServerSideProps } from "../lib/store-wrapper-ssr"; -import { useCart } from "@elasticpath/react-shopper-hooks"; -import Cart from "../components/cart/Cart"; -import { resolveShoppingCartProps } from "../lib/resolve-shopping-cart-props"; - -export const CartPage: NextPage = () => { - const { removeCartItem, state } = useCart(); - - const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem); - - return ( - - {shoppingCartProps && ( - <> - Your Shopping Cart - - - )} - {(state.kind === "empty-cart-state" || - state.kind === "uninitialised-cart-state" || - state.kind === "loading-cart-state") && ( - <> - Your cart is empty - - - - - )} - - ); -}; -export default CartPage; - -export const getServerSideProps = withStoreServerSideProps(); diff --git a/examples/basic/src/pages/faq.tsx b/examples/basic/src/pages/faq.tsx deleted file mode 100644 index 59326581..00000000 --- a/examples/basic/src/pages/faq.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const FAQ = () => ; - -export default FAQ; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/index.tsx b/examples/basic/src/pages/index.tsx deleted file mode 100644 index 01f38fbc..00000000 --- a/examples/basic/src/pages/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { NextPage } from "next"; - -import type { Node } from "@moltin/sdk"; -import FeaturedProducts from "../components/featured-products/FeaturedProducts"; -import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import { ProductResponseWithImage } from "../lib/types/product-types"; -import PromotionBanner, { - IPromotion, -} from "../components/promotion-banner/PromotionBanner"; - -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; - -export interface IHome { - featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; - promotion?: IPromotion; -} - -const Home: NextPage = ({ featuredProducts, promotion }) => { - return ( - - {promotion && ( - - )} - - - - {featuredProducts && ( - - )} - - - - - ); -}; - -export const getStaticProps = withStoreStaticProps(async () => { - // Fetching static data for the home page - const featuredProducts = await fetchFeaturedProducts(); - - return { - props: { - promotion: { - title: "Your Elastic Path storefront", - description: - "This marks the beginning, embark on the journey of crafting something truly extraordinary, uniquely yours.", - }, - ...(featuredProducts && { featuredProducts }), - }, - }; -}); - -export default Home; diff --git a/examples/basic/src/pages/products/[productId].tsx b/examples/basic/src/pages/products/[productId].tsx deleted file mode 100644 index 07f50972..00000000 --- a/examples/basic/src/pages/products/[productId].tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { GetStaticPaths } from "next"; -import { ParsedUrlQuery } from "querystring"; - -import { getProductById } from "../../services/products"; -import SimpleProductDetail from "../../components/product/SimpleProduct"; -import { ProductContext } from "../../lib/product-util"; -import React, { ReactElement, useState } from "react"; -import type { ShopperProduct } from "@elasticpath/react-shopper-hooks"; - -import { withStoreStaticProps } from "../../lib/store-wrapper-ssg"; -import Head from "next/head"; -import { NextPageWithLayout } from "../_app"; -import MainLayout, { - MAIN_LAYOUT_TITLE, -} from "../../components/layouts/MainLayout"; -import BundleProductDetail from "../../components/product/bundles/BundleProduct"; -import { parseProductResponse } from "@elasticpath/react-shopper-hooks"; -import { getEpccImplicitClient } from "../../lib/epcc-implicit-client"; -import { VariationProductDetail } from "../../components/product/variations/VariationProduct"; - -interface ProductPageProps { - product: ShopperProduct; -} - -export const Product: NextPageWithLayout = (props) => { - const [isChangingSku, setIsChangingSku] = useState(false); - - const { product } = props; - - return ( - - - {resolveProductDetailComponent(product)} - - - ); -}; - -Product.getLayout = function getLayout(page: ReactElement, pageProps, ctx?) { - const { - attributes: { name, description }, - } = pageProps.product.response; - - return ( - <> - {page} - - {`${MAIN_LAYOUT_TITLE} - ${name}`} - - - - - - ); -}; - -function resolveProductDetailComponent(product: ShopperProduct): JSX.Element { - switch (product.kind) { - case "base-product": - return ; - case "child-product": - return ; - case "simple-product": - return ; - case "bundle-product": - return ; - } -} - -interface ProductRouteParams extends ParsedUrlQuery { - productId: string; -} - -export const getStaticProps = withStoreStaticProps< - ProductPageProps, - ProductRouteParams ->(async ({ params }) => { - if (!params) { - return { - notFound: true, - }; - } - - const product = await getProductById(params.productId); - - if (!product) { - return { - notFound: true, - }; - } - - const shopperProduct = await parseProductResponse( - product, - getEpccImplicitClient(), - ); - - return { - props: { - product: shopperProduct, - }, - revalidate: 60, - }; -}); - -export const getStaticPaths: GetStaticPaths = async () => { - return { - paths: [], - fallback: "blocking", - }; -}; - -export default Product; diff --git a/examples/basic/src/pages/shipping.tsx b/examples/basic/src/pages/shipping.tsx deleted file mode 100644 index d0304ceb..00000000 --- a/examples/basic/src/pages/shipping.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Shipping = () => ; - -export default Shipping; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/pages/terms.tsx b/examples/basic/src/pages/terms.tsx deleted file mode 100644 index ec2d58b7..00000000 --- a/examples/basic/src/pages/terms.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; -import Blurb from "../components/shared/blurb"; - -const Terms = () => ; - -export default Terms; - -export const getServerSideProps = withStoreStaticProps(); diff --git a/examples/basic/src/services/cart.ts b/examples/basic/src/services/cart.ts index dd15ad42..fcf06377 100644 --- a/examples/basic/src/services/cart.ts +++ b/examples/basic/src/services/cart.ts @@ -1,6 +1,5 @@ import type { Moltin as EPCCClient } from "@moltin/sdk"; import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export interface CustomItemRequest { type: "custom_item"; @@ -17,7 +16,7 @@ export interface CustomItemRequest { export async function getCart( cartId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).Cart(cartId).With("items").Get(); + return client.Cart(cartId).With("items").Get(); } diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2bfeeb60..43e12740 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -6,36 +6,29 @@ import type { Moltin as EPCCClient, ConfirmPaymentResponse, } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; export function checkout( id: string, customer: CheckoutCustomerObject, billing: Partial, shipping: Partial, - client?: EPCCClient, + client: EPCCClient, ): Promise<{ data: Order }> { - return (client ?? getEpccImplicitClient()) - .Cart(id) - .Checkout(customer, billing, shipping); + return client.Cart(id).Checkout(customer, billing, shipping); } export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); + return client.Orders.Payment(orderId, payment); } export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - return (client ?? getEpccImplicitClient()).Orders.Confirm( - orderId, - transactionId, - { data: {} }, - ); + return client.Orders.Confirm(orderId, transactionId, { data: {} }); } diff --git a/examples/basic/src/services/hierarchy.ts b/examples/basic/src/services/hierarchy.ts index 99ea9279..62eab71d 100644 --- a/examples/basic/src/services/hierarchy.ts +++ b/examples/basic/src/services/hierarchy.ts @@ -1,24 +1,16 @@ import type { Node, Hierarchy } from "@moltin/sdk"; import { Moltin as EPCCClient } from "@moltin/sdk"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; - -export async function getHierarchies( - client?: EPCCClient, -): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.All(); +export async function getHierarchies(client: EPCCClient): Promise { + const result = await client.ShopperCatalog.Hierarchies.All(); return result.data; } export async function getHierarchyChildren( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyChildren({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId, }); return result.data; @@ -26,11 +18,9 @@ export async function getHierarchyChildren( export async function getHierarchyNodes( hierarchyId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise { - const result = await ( - client ?? getEpccImplicitClient() - ).ShopperCatalog.Hierarchies.GetHierarchyNodes({ + const result = await client.ShopperCatalog.Hierarchies.GetHierarchyNodes({ hierarchyId, }); diff --git a/examples/basic/src/services/products.ts b/examples/basic/src/services/products.ts index f471f8c8..037ba757 100644 --- a/examples/basic/src/services/products.ts +++ b/examples/basic/src/services/products.ts @@ -4,14 +4,13 @@ import type { ShopperCatalogResource, } from "@moltin/sdk"; import { wait300 } from "../lib/product-helper"; -import { getEpccImplicitClient } from "../lib/epcc-implicit-client"; import { Moltin as EPCCClient } from "@moltin/sdk"; export async function getProductById( productId: string, - client?: EPCCClient, + client: EPCCClient, ): Promise> { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ + return client.ShopperCatalog.Products.With([ "main_image", "files", "component_products", @@ -20,16 +19,12 @@ export async function getProductById( }); } -export function getAllProducts( - client?: EPCCClient, -): Promise { +export function getAllProducts(client: EPCCClient): Promise { return _getAllProductPages(client)(); } -export function getProducts(client?: EPCCClient, offset = 0, limit = 100) { - return (client ?? getEpccImplicitClient()).ShopperCatalog.Products.With([ - "main_image", - ]) +export function getProducts(client: EPCCClient, offset = 0, limit = 100) { + return client.ShopperCatalog.Products.With(["main_image"]) .Limit(limit) .Offset(offset) .All(); @@ -67,9 +62,7 @@ const _getAllPages = return Promise.resolve(combinedData); }; -const _getAllProductPages = (client?: EPCCClient) => +const _getAllProductPages = (client: EPCCClient) => _getAllPages((limit = 25, offset = 0) => - (client ?? getEpccImplicitClient()).ShopperCatalog.Products.Limit(limit) - .Offset(offset) - .All(), + client.ShopperCatalog.Products.Limit(limit).Offset(offset).All(), ); diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts index be7f6035..5ca516bc 100644 --- a/examples/basic/tailwind.config.ts +++ b/examples/basic/tailwind.config.ts @@ -16,6 +16,26 @@ export default { secondaryAlt: "#ffcb47", }, }, + keyframes: { + fadeIn: { + from: { opacity: "0" }, + to: { opacity: "1" }, + }, + marquee: { + "0%": { transform: "translateX(0%)" }, + "100%": { transform: "translateX(-100%)" }, + }, + blink: { + "0%": { opacity: "0.2" }, + "20%": { opacity: "1" }, + "100% ": { opacity: "0.2" }, + }, + }, + animation: { + fadeIn: "fadeIn .3s ease-in-out", + carousel: "marquee 60s linear infinite", + blink: "blink 1.4s both infinite", + }, }, }, plugins: [], diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json index 3685cdd2..1780e064 100644 --- a/examples/basic/tsconfig.json +++ b/examples/basic/tsconfig.json @@ -17,9 +17,19 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": [ + "next-env.d.ts", + "src/**/*.ts", + "src/**/*.tsx", + ".next/types/**/*.ts" + ], "exclude": ["node_modules"], "types": ["global.d.ts"] }