diff --git a/commerce.config.json b/commerce.config.json index ad72b58de..6fb526aaf 100644 --- a/commerce.config.json +++ b/commerce.config.json @@ -2,8 +2,8 @@ "features": { "cart": true, "search": true, - "wishlist": false, - "customerAuth": false, - "customCheckout": false + "wishlist": true, + "customerAuth": true, + "customCheckout": true } } diff --git a/framework/commerce/api/operations.ts b/framework/commerce/api/operations.ts index 342d6bbc9..ca9b325c2 100644 --- a/framework/commerce/api/operations.ts +++ b/framework/commerce/api/operations.ts @@ -10,6 +10,7 @@ import type { GetProductOperation, } from '../types/product' import type { APIProvider, CommerceAPI } from '.' +import { GetAllCollectionsOperation } from '@commerce/types/collection'; const noop = () => { throw new Error('Not implemented') @@ -25,6 +26,7 @@ export const OPERATIONS = [ 'getAllProducts', 'getProduct', 'getAllFacets', + 'getAllCollections', ] as const @@ -174,6 +176,22 @@ export type Operations

= { ): Promise } + getAllCollections: { + (opts: { + variables?: T['variables'] + config?: P['config'] + preview?: boolean + }): Promise + + ( + opts: { + variables?: T['variables'] + config?: P['config'] + preview?: boolean + } & OperationOptions + ): Promise + } + } diff --git a/framework/commerce/new-provider.md b/framework/commerce/new-provider.md index a48e6961b..3c7f05b7a 100644 --- a/framework/commerce/new-provider.md +++ b/framework/commerce/new-provider.md @@ -16,6 +16,7 @@ Adding a commerce provider means adding a new folder in `framework` with a folde - getProduct - getAllProducts - getAllFacets + - getAllCollections - `wishlist` - useWishlist - useAddItem diff --git a/framework/commerce/types/collection.ts b/framework/commerce/types/collection.ts new file mode 100644 index 000000000..3ccb72ea3 --- /dev/null +++ b/framework/commerce/types/collection.ts @@ -0,0 +1,54 @@ +import { Asset } from '../../vendure/schema.d'; + +export type Collection = { + id: string + name: string + slug: string + description: string + featuredAsse: Asset + asset: Asset[] +} + +export type SearchCollectionsBody = { + search?: string + sort?: string + locale?: string +} + +export type CollectionTypes = { + collection: Collection + searchBody: SearchCollectionsBody +} + +export type SearchCollectionsHook = { + data: { + collections: T['collection'][] + found: boolean + } + body: T['searchBody'] + input: T['searchBody'] + fetcherInput: T['searchBody'] +} + +export type CollectionsSchema = { + endpoint: { + options: {} + handlers: { + getCollections: SearchCollectionsHook + } + } +} + + +export type GetAllCollectionsOperation = { + data: { collections: T['collection'][] } + variables: { + ids?: string[] + first?: number + } +} + +export type GetCollectionOperation = { + data: { collection?: T['collection'] } + variables: { code: string; } | { code?: never; } +} diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index 6d01b8c2d..a3bccc83e 100644 --- a/framework/commerce/types/product.ts +++ b/framework/commerce/types/product.ts @@ -43,8 +43,10 @@ export type Product = { slug?: string path?: string images: ProductImage[] - price: ProductPrice + price: number + currencyCode: CurrencyCode options: ProductOption[] + facetValueIds?: string[] } export type ProductCard = { @@ -54,11 +56,12 @@ export type ProductCard = { imageSrc: string price: number currencyCode: CurrencyCode - oldPrice?: number, + oldPrice?: number discount?: number weight?: number - // TODO: collection - category?: string, + facetValueIds?: string[], + collectionIds?: string[], + collection?: string, isNotSell?: boolean productVariantId?:string } diff --git a/framework/vendure/api/index.ts b/framework/vendure/api/index.ts index 7e49d6c1f..95ec47d66 100644 --- a/framework/vendure/api/index.ts +++ b/framework/vendure/api/index.ts @@ -1,6 +1,7 @@ import type { CommerceAPIConfig } from '@commerce/api' import { CommerceAPI, getCommerceApi as commerceApi } from '@commerce/api' import getAllFacets from './operations/get-all-facets' +import getAllCollections from './operations/get-all-collection' import getAllPages from './operations/get-all-pages' import getAllProductPaths from './operations/get-all-product-paths' import getAllProducts from './operations/get-all-products' @@ -42,6 +43,7 @@ const operations = { getAllProducts, getProduct, getAllFacets, + getAllCollections, } export const provider = { config, operations } diff --git a/framework/vendure/api/operations/get-all-collection.ts b/framework/vendure/api/operations/get-all-collection.ts new file mode 100644 index 000000000..b7cc3a725 --- /dev/null +++ b/framework/vendure/api/operations/get-all-collection.ts @@ -0,0 +1,45 @@ +import { OperationContext } from '@commerce/api/operations' +import { Collection } from '@commerce/types/collection' +import { Provider, VendureConfig } from '..' +import { GetAllCollectionsQuery } from '../../schema' +import { getAllCollectionsQuery } from '../../utils/queries/get-all-collections-query' + +export type CollectionVariables = { first?: number } + +export default function getAllCollectionsOperation({ + commerce, +}: OperationContext) { + async function getAllCollections(opts?: { + variables?: CollectionVariables + config?: Partial + preview?: boolean + }): Promise<{ collections: Collection[] }> + + async function getAllCollections({ + query = getAllCollectionsQuery, + variables: { ...vars } = {}, + config: cfg, + }: { + query?: string + variables?: CollectionVariables + config?: Partial + preview?: boolean + } = {}): Promise<{ collections: Collection[] | any[] }> { + const config = commerce.getConfig(cfg) + const variables = { + input: { + take: vars.first, + groupByCollection: true, + }, + } + const { data } = await config.fetch(query, { + variables, + }) + + return { + collections: data.collections.items, + } + } + + return getAllCollections +} diff --git a/framework/vendure/api/operations/get-all-facets.ts b/framework/vendure/api/operations/get-all-facets.ts index c4b002744..0bde04090 100644 --- a/framework/vendure/api/operations/get-all-facets.ts +++ b/framework/vendure/api/operations/get-all-facets.ts @@ -1,10 +1,10 @@ import { OperationContext } from '@commerce/api/operations' import { Facet } from '@commerce/types/facet' import { Provider, VendureConfig } from '../' -import { GetAllFacetsQuery } from '../../schema' +import { FacetFilterParameter, FacetSortParameter, GetAllFacetsQuery } from '../../schema' import { getAllFacetsQuery } from '../../utils/queries/get-all-facets-query' -export type FacetVariables = { first?: number } +export type FacetVariables = { first?: number, filter?: FacetFilterParameter, sort?: FacetSortParameter } export default function getAllFacetsOperation({ commerce, @@ -27,9 +27,10 @@ export default function getAllFacetsOperation({ } = {}): Promise<{ facets: Facet[] | any[] }> { const config = commerce.getConfig(cfg) const variables = { - input: { + options: { take: vars.first, - groupByFacet: true, + filter: vars.filter, + sort: vars.sort, }, } const { data } = await config.fetch(query, { diff --git a/framework/vendure/api/operations/get-all-products.ts b/framework/vendure/api/operations/get-all-products.ts index c9cbc2f19..8a6d952de 100644 --- a/framework/vendure/api/operations/get-all-products.ts +++ b/framework/vendure/api/operations/get-all-products.ts @@ -14,7 +14,7 @@ export default function getAllProductsOperation({ variables?: ProductVariables config?: Partial preview?: boolean - }): Promise<{ products: Product[] }> + }): Promise<{ products: Product[], totalItems: number }> async function getAllProducts({ query = getAllProductsQuery, @@ -25,7 +25,7 @@ export default function getAllProductsOperation({ variables?: ProductVariables config?: Partial preview?: boolean - } = {}): Promise<{ products: Product[] | any[] }> { + } = {}): Promise<{ products: Product[] | any[], totalItems: number }> { const config = commerce.getConfig(cfg) const variables = { input: { @@ -41,6 +41,7 @@ export default function getAllProductsOperation({ return { products: data.search.items.map((item) => normalizeSearchResult(item)), + totalItems: data.search.totalItems as number, } } diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts index 4ab9ed2d9..239eb5b61 100644 --- a/framework/vendure/api/operations/get-product.ts +++ b/framework/vendure/api/operations/get-product.ts @@ -16,10 +16,8 @@ export default function getProductOperation({ variables: { slug: string } config?: Partial preview?: boolean - }): Promise { + }): Promise { const config = commerce.getConfig(cfg) - - const locale = config.locale const { data } = await config.fetch(query, { variables }) const product = data.product @@ -28,7 +26,6 @@ export default function getProductOperation({ return product.optionGroups.find((og) => og.id === id)!.name } return { - product: { id: product.id, name: product.name, description: product.description, @@ -49,20 +46,18 @@ export default function getProductOperation({ values: [{ label: o.name }], })), })), - price: { - value: product.variants[0].priceWithTax / 100, - currencyCode: product.variants[0].currencyCode, - }, + price: product.variants[0].priceWithTax / 100, + currencyCode: product.variants[0].currencyCode, options: product.optionGroups.map((og) => ({ id: og.id, displayName: og.name, values: og.options.map((o) => ({ label: o.name })), })), - } as Product, - } + facetValueIds: product.facetValues.map(item=> item.id) + } as Product } - return {} + return null } return getProduct diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 7095ce02f..bf09eeed9 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -1,3 +1,4 @@ +import { FacetValue } from './schema.d'; export type Maybe = T | null export type Exact = { [K in keyof T]: T[K] @@ -3038,7 +3039,7 @@ export type SearchResultFragment = { __typename?: 'SearchResult' } & Pick< SearchResult, 'productId' | 'sku' | 'productName' | 'description' | 'slug' | 'sku' | 'currencyCode' | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' - | 'collectionIds' | 'productVariantId' + | 'collectionIds' | 'productVariantId' | 'facetValueIds' > & { productAsset?: Maybe< { __typename?: 'SearchResultAsset' } & Pick< @@ -3218,7 +3219,8 @@ export type GetAllProductsQueryVariables = Exact<{ export type GetAllProductsQuery = { __typename?: 'Query' } & { search: { __typename?: 'SearchResponse' } & { - items: Array<{ __typename?: 'SearchResult' } & SearchResultFragment> + items: Array<{ __typename?: 'SearchResult' } & SearchResultFragment>, + 'totalItems' } } @@ -3227,8 +3229,9 @@ export type GetAllFacetsQuery = { __typename?: 'Query' } & { items: Array< { __typename?: 'Facet' } & Pick< Facet, - 'id' | 'name' | 'code' - > & { + 'id' | 'name' | 'code' | 'values' + > + & { parent?: Maybe<{ __typename?: 'Facet' } & Pick> children?: Maybe< Array<{ __typename?: 'Facet' } & Pick> @@ -3239,6 +3242,23 @@ export type GetAllFacetsQuery = { __typename?: 'Query' } & { } } +export type GetAllCollectionsQuery = { __typename?: 'Query' } & { + collections: { __typename?: 'CollectionList' } & { + items: Array< + { __typename?: 'Collection' } & Pick< + Collection, + 'id' | 'name' | 'slug' + > & { + parent?: Maybe<{ __typename?: 'Collection' } & Pick> + children?: Maybe< + Array<{ __typename?: 'Collection' } & Pick> + > + } + >, + 'totalItems' + } +} + export type ActiveOrderQueryVariables = Exact<{ [key: string]: never }> export type ActiveOrderQuery = { __typename?: 'Query' } & { @@ -3318,6 +3338,18 @@ export type GetProductQuery = { __typename?: 'Query' } & { > } > + facetValues: Array< + { __typename?: 'FacetValue' } & Pick< + FacetValue, + 'id' + > + > + collections: Array< + { __typename?: 'Collection' } & Pick< + Collection, + 'id' + > + > } > } diff --git a/framework/vendure/utils/fragments/search-result-fragment.ts b/framework/vendure/utils/fragments/search-result-fragment.ts index b3fc4d561..6408aeb1e 100644 --- a/framework/vendure/utils/fragments/search-result-fragment.ts +++ b/framework/vendure/utils/fragments/search-result-fragment.ts @@ -20,6 +20,8 @@ export const searchResultFragment = /* GraphQL */ ` min max } - } + }, + facetValueIds, + collectionIds, } ` diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index 939460930..f1bd38fd0 100644 --- a/framework/vendure/utils/normalize.ts +++ b/framework/vendure/utils/normalize.ts @@ -1,24 +1,24 @@ -import { Product, ProductCard } from '@commerce/types/product' import { Cart } from '@commerce/types/cart' +import { ProductCard } from '@commerce/types/product' import { CartFragment, SearchResultFragment } from '../schema' export function normalizeSearchResult(item: SearchResultFragment): ProductCard { return { - id: item.productId, name: item.productName, slug: item.slug, imageSrc: item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '', price: (item.priceWithTax as any).min / 100, currencyCode: item.currencyCode, - productVariantId: item.productVariantId?item.productVariantId:"", + productVariantId: item.productVariantId, + facetValueIds: item.facetValueIds, + collectionIds: item.collectionIds, // TODO: // oldPrice: item.price // discount // isNotSell // weight - // category } } diff --git a/framework/vendure/utils/queries/get-all-collections-query.ts b/framework/vendure/utils/queries/get-all-collections-query.ts new file mode 100644 index 000000000..359c81ea9 --- /dev/null +++ b/framework/vendure/utils/queries/get-all-collections-query.ts @@ -0,0 +1,12 @@ +export const getAllCollectionsQuery = /* GraphQL */ ` +query collections ($options: CollectionListOptions) { + collections (options: $options){ + totalItems, + items { + id + name + slug + } + } +} +` diff --git a/framework/vendure/utils/queries/get-all-products-query.ts b/framework/vendure/utils/queries/get-all-products-query.ts index 1b44b2017..007c6594d 100644 --- a/framework/vendure/utils/queries/get-all-products-query.ts +++ b/framework/vendure/utils/queries/get-all-products-query.ts @@ -3,6 +3,7 @@ import { searchResultFragment } from '../fragments/search-result-fragment' export const getAllProductsQuery = /* GraphQL */ ` query getAllProducts($input: SearchInput!) { search(input: $input) { + totalItems items { ...SearchResult } diff --git a/framework/vendure/utils/queries/get-collections-query.ts b/framework/vendure/utils/queries/get-collections-query.ts index 79e00a292..f07a85249 100644 --- a/framework/vendure/utils/queries/get-collections-query.ts +++ b/framework/vendure/utils/queries/get-collections-query.ts @@ -24,7 +24,7 @@ export const getCollectionsNameQuery = /* GraphQL */ ` collections{ items{ name - link:slug + slug } } } diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts index b2c502da9..f9d4e7002 100644 --- a/framework/vendure/utils/queries/get-product-query.ts +++ b/framework/vendure/utils/queries/get-product-query.ts @@ -36,6 +36,9 @@ export const getProductQuery = /* GraphQL */ ` name } } + facetValues { + id + } } } ` diff --git a/pages/index.tsx b/pages/index.tsx index cf279d399..7c287c230 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import { ProductCard } from '@commerce/types/product'; import { ProductVariables } from '@framework/api/operations/get-all-products'; import { Facet, Product } from '@framework/schema'; +import { Collection, FacetValue } from '@framework/schema'; import commerce from '@lib/api/commerce'; import { ifError } from 'assert'; import { GetStaticPropsContext } from 'next'; @@ -9,25 +10,30 @@ import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, Ho import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice'; import { FACET } from 'src/utils/constanst.utils'; import { getAllFeaturedFacetId, getFacetIdByName, getFreshProductFacetId } from 'src/utils/funtion.utils'; +import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED } from 'src/utils/constanst.utils'; +import { getAllFacetValueIdsByParentCode, getAllFacetValuesForFeatuedProducts, getAllPromies, getFreshFacetId } from 'src/utils/funtion.utils'; +import { PromiseWithKey } from 'src/utils/types.utils'; interface Props { - veggie: ProductCard[], - facets:Facet[] - freshProducts: ProductCard[], - featuredProducts: ProductCard[], + featuredAndDiscountFacetsValue: FacetValue[], + freshProducts: ProductCard[], + featuredProducts: ProductCard[], + collections: Collection[] + veggie: ProductCard[], } -export default function Home({ freshProducts, featuredProducts, veggie }: Props) { - // console.log("veggie",veggie) +export default function Home({ featuredAndDiscountFacetsValue, + freshProducts, featuredProducts, veggie, + collections }: Props) { return ( <> - + - + @@ -45,22 +51,32 @@ export async function getStaticProps({ locales, }: GetStaticPropsContext) { const config = { locale, locales } + let promisesWithKey = [] as PromiseWithKey[] + let props = {} as any + const { facets } = await commerce.getAllFacets({ variables: {}, config, preview, }) + + props.featuredAndDiscountFacetsValue = getAllFacetValuesForFeatuedProducts(facets) + + // fresh products const freshProductvariables: ProductVariables = {} - const freshFacetId = getFreshProductFacetId(facets) + const freshFacetId = getFreshFacetId(facets) if (freshFacetId) { freshProductvariables.facetValueIds = [freshFacetId] + const freshProductsPromise = commerce.getAllProducts({ + variables: freshProductvariables, + config, + preview, + }) + promisesWithKey.push({ key: 'freshProducts', promise: freshProductsPromise, keyResult: 'products' }) + } else { + props.freshProducts = [] } - const freshProductsPromise = commerce.getAllProducts({ - variables: freshProductvariables, - config, - preview, - }) const veggieProductvariables: ProductVariables = {} const veggieId = getFacetIdByName(facets,FACET.CATEGORY.PARENT_NAME,FACET.CATEGORY.VEGGIE) @@ -72,34 +88,50 @@ export async function getStaticProps({ config, preview, }) + promisesWithKey.push({ key: 'veggie', promise: veggieProductsPromise, keyResult: 'products' }) + // featured products + const allFeaturedFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_FEATURED) + const allDiscountFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_DISCOUNT) + const facetValueIdsForFeaturedProducts = [...allFeaturedFacetIds, ...allDiscountFacetIds] + + if (facetValueIdsForFeaturedProducts.length > 0) { + const featuredProductsPromise = commerce.getAllProducts({ + variables: { + facetValueIds: facetValueIdsForFeaturedProducts + }, + config, + preview, + }) + promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products' }) + } else { + props.featuredProducts = [] + } - const allFeaturedFacetId = getAllFeaturedFacetId(facets) - const featuredProductsPromise = commerce.getAllProducts({ - variables: { - facetValueIds: allFeaturedFacetId - }, + // collection + const collectionsPromise = commerce.getAllCollections({ + variables: {}, config, preview, }) + promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' }) try { - const rs = await Promise.all([veggieProductsPromise,featuredProductsPromise,freshProductsPromise]) + const promises = getAllPromies(promisesWithKey) + const rs = await Promise.all(promises) + + promisesWithKey.map((item, index) => { + props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index] + return null + }) return { - props: { - veggie: veggieId ? rs[0].products : [], - featuredProducts: rs[1].products, - freshProducts: freshFacetId ? rs[2].products : [], - }, + props, revalidate: 60, } } catch (err) { } - - - } diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index a8e925df9..24901277e 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,18 +1,114 @@ +import { Product } from '@framework/schema' +import commerce from '@lib/api/commerce' +import { GetStaticPathsContext, GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common' import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail' +import { MAX_PRODUCT_CAROUSEL, REVALIDATE_TIME } from 'src/utils/constanst.utils' import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' +import { getAllPromies } from 'src/utils/funtion.utils' +import { PromiseWithKey } from 'src/utils/types.utils' -export default function Slug() { +export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType) { return <> - + - + } +export async function getStaticProps({ + params, + locale, + locales, + preview, +}: GetStaticPropsContext<{ slug: string }>) { + const config = { locale, locales } + let promisesWithKey = [] as PromiseWithKey[] + let props = {} as any + + const product = await commerce.getProduct({ + variables: { slug: params!.slug }, + config, + preview, + }) + props.product = product + + + if (!product) { + throw new Error(`Product with slug '${params!.slug}' not found`) + } + + // relevant product (filter by product detail's facetIds) + const relevantFacetIds = product.facetValueIds + if (relevantFacetIds && relevantFacetIds.length > 0) { + const relevantProductsPromise = commerce.getAllProducts({ + variables: { + first: MAX_PRODUCT_CAROUSEL, + facetValueIds: relevantFacetIds, + }, + config, + preview, + }) + promisesWithKey.push({ key: 'relevantProducts', promise: relevantProductsPromise, keyResult: 'products' }) + } else { + props.relevantProducts = [] + } + + + // collection + const collectionsPromise = commerce.getAllCollections({ + variables: {}, + config, + preview, + }) + promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' }) + + + try { + const promises = getAllPromies(promisesWithKey) + const rs = await Promise.all(promises) + + promisesWithKey.map((item, index) => { + props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index] + return null + }) + + if (props.relevantProducts.length > 0) { + const relevantProducts = props.relevantProducts.filter((item: Product) => item.id !== product.id) + props.relevantProducts = relevantProducts + } + + return { + props, + revalidate: REVALIDATE_TIME, + } + } catch (err) { + console.log('err: ', err) + } +} + + +export async function getStaticPaths({ locales }: GetStaticPathsContext) { + const { products } = await commerce.getAllProductPaths() + + return { + paths: locales + ? locales.reduce((arr, locale) => { + // Add a product path for every locale + products.forEach((product: any) => { + arr.push(`/${locale}/product${product.path}`) + }) + return arr + }, []) + : products.map((product: any) => `/product${product.path}`), + fallback: 'blocking', + } +} + + Slug.Layout = Layout diff --git a/pages/products.tsx b/pages/products.tsx index 4f9c4eb66..4a37ab097 100644 --- a/pages/products.tsx +++ b/pages/products.tsx @@ -1,19 +1,97 @@ +import { ProductCard } from '@commerce/types/product'; +import { Collection, Facet } from '@framework/schema'; +import commerce from '@lib/api/commerce'; +import { GetStaticPropsContext } from 'next'; import { Layout } from 'src/components/common'; import { ViewedProducts } from 'src/components/modules/product-detail'; import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter'; -import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner'; -import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList'; +import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE, REVALIDATE_TIME } from 'src/utils/constanst.utils'; +import { getAllPromies } from 'src/utils/funtion.utils'; +import { PromiseWithKey, SortOrder } from 'src/utils/types.utils'; import ProductListBanner from '../src/components/modules/product-list/ProductListBanner/ProductListBanner'; +interface Props { + facets: Facet[], + collections: Collection[], + productsResult: { products: ProductCard[], totalItems: number }, -export default function Products() { +} + +export default function Products({ facets, collections, productsResult }: Props) { return ( <> - - + + ) } +export async function getStaticProps({ + preview, + locale, + locales, +}: GetStaticPropsContext) { + const config = { locale, locales } + let promisesWithKey = [] as PromiseWithKey[] + let props = {} as any + + const facetsPromise = commerce.getAllFacets({ + variables: { + sort: { + code: SortOrder.Asc + }, + filter: { + code: { + in: [CODE_FACET_FEATURED, CODE_FACET_BRAND] + } + } + }, + config, + preview, + }) + + promisesWithKey.push({ key: 'facets', promise: facetsPromise, keyResult: 'facets' }) + + // collection + const collectionsPromise = commerce.getAllCollections({ + variables: {}, + config, + preview, + }) + promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' }) + + // products + const productsPromise = commerce.getAllProducts({ + variables: { + first: DEFAULT_PAGE_SIZE, + }, + config, + preview, + }) + promisesWithKey.push({ key: 'productsResult', promise: productsPromise }) + + + try { + const promises = getAllPromies(promisesWithKey) + const rs = await Promise.all(promises) + + promisesWithKey.map((item, index) => { + props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index] + return null + }) + + return { + props, + revalidate: REVALIDATE_TIME, + } + } catch (err) { + + } +} + Products.Layout = Layout diff --git a/pages/test.tsx b/pages/test.tsx index 6244c3dd6..f9075c7e6 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,6 +1,6 @@ import commerce from '@lib/api/commerce'; import { GetStaticPropsContext } from 'next'; -import { Layout } from 'src/components/common'; +import { Layout, ListProductCardSkeleton } from 'src/components/common'; interface Props { products: any @@ -8,10 +8,11 @@ interface Props { export default function Home({ products }: Props) { return ( <> -

- TOTAL: {products?.length} -

- {JSON.stringify(products[0])} + {/* */} + {/* */} + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero. + ) } @@ -22,28 +23,9 @@ export async function getServerSideProps({ locale, locales, }: GetStaticPropsContext) { - const config = { locale, locales } - const productsPromise = commerce.getAllProducts({ - // const productsPromise = commerce.getAllFacets({ - variables: { - first: 70, - // filter: { - // name: { - // contains: 'ca' - // } - // } - }, - config, - preview, - // Saleor provider only - ...({ featured: true } as any), - }) - - const { products } = await productsPromise - return { - props: { products }, + props: {}, } } diff --git a/src/components/common/EmptyCommon/EmptyCommon.module.scss b/src/components/common/EmptyCommon/EmptyCommon.module.scss index a31ba4374..4014faeea 100644 --- a/src/components/common/EmptyCommon/EmptyCommon.module.scss +++ b/src/components/common/EmptyCommon/EmptyCommon.module.scss @@ -4,13 +4,16 @@ padding: 1.6rem; margin: auto; .imgWrap { - min-width: 10rem; + min-height: 10rem; text-align: center; + img { + min-height: 10rem; + } } .description { color: var(--disabled); text-align: center; - margin-top: .8rem; + margin-top: 0.8rem; } } diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss index 036e84629..3f95f92da 100644 --- a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss +++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss @@ -21,6 +21,9 @@ width: 24rem; height: 24rem; } + img { + object-fit: contain; + } } .right{ margin-left: 1.2rem; diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx index a82b6857b..23b9ac987 100644 --- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx +++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx @@ -1,39 +1,55 @@ +import { ProductCard } from '@commerce/types/product' +import { Facet, FacetValue } from '@framework/schema' +import Link from 'next/link' import React from 'react' -import { FeaturedProductProps } from 'src/utils/types.utils' -import s from './FeaturedProductCard.module.scss' -import { LANGUAGE } from '../../../utils/language.utils' -import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' -import ButtonCommon from '../ButtonCommon/ButtonCommon' +import { ROUTE } from 'src/utils/constanst.utils' import { ImgWithLink } from '..' -export interface FeaturedProductCardProps extends FeaturedProductProps { - buttonText?: string +import { LANGUAGE } from '../../../utils/language.utils' +import ButtonCommon from '../ButtonCommon/ButtonCommon' +import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' +import s from './FeaturedProductCard.module.scss' +export interface FeaturedProductCardProps extends ProductCard { + buttonText?: string, + subText?: string, } const FeaturedProductCard = ({ imageSrc, - title, - subTitle, + name, + slug, price, - originPrice, + subText, + currencyCode, buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW, }: FeaturedProductCardProps) => { + + return (
- + + + + +
-
{title}
-
{subTitle}
+ + +
{name}
+ + +
{subText}
-
{price}
-
{originPrice}
+
{price} {currencyCode}
+ {/* TODO: */} + {/*
{originPrice}
*/}
- +
{buttonText} diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index f3a514970..092bcc8e7 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,5 +1,6 @@ import classNames from 'classnames' import React, { memo, useEffect, useRef, useState } from 'react' +import { useProductFilter } from 'src/components/contexts' import { useModalCommon } from 'src/components/hooks' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' @@ -9,12 +10,12 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import s from './Header.module.scss' interface props { - toggleFilter: () => void, - visibleFilter: boolean + } -const Header = memo(({ toggleFilter, visibleFilter }: props) => { +const Header = memo(({ }: props) => { const headeFullRef = useRef(null) + const { toggleProductFilter: toggleFilter } = useProductFilter() const [isFullHeader, setIsFullHeader] = useState(true) const [isModeAuthenRegister, setIsModeAuthenRegister] = useState(false) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) @@ -63,7 +64,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
void openModalRegister: () => void openModalInfo: () => void @@ -38,7 +37,6 @@ const HeaderMenu = memo( ({ isFull, isStickyHeader, - visibleFilter, openModalLogin, openModalRegister, openModalInfo, @@ -90,6 +88,7 @@ const HeaderMenu = memo( ], [logout] ) + return (
-
+
)} +
-
-
-
- -
+
+
- + { + (!initialQueryFlag && loading && !productSearchResult) && + } +
diff --git a/src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx b/src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx new file mode 100644 index 000000000..a10cec443 --- /dev/null +++ b/src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx @@ -0,0 +1,40 @@ +import { useRouter } from 'next/router'; +import React, { useEffect, useState } from 'react'; +import { SelectCommon } from 'src/components/common'; +import { OPTIONS_SORT_PRODUCT, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; + +const ProductSort = () => { + const router = useRouter() + const [sortValue, setSortValue] = useState(); + + useEffect(() => { + const rs = router.query[QUERY_KEY.SORTBY] as string + if (rs) { + setSortValue(rs) + } + }, [router.query]) + + const onSortChange = (value: string) => { + setSortValue(value) + router.push({ + pathname: ROUTE.PRODUCTS, + query: { + ...router.query, + [QUERY_KEY.SORTBY]: value + } + }, + undefined, { shallow: true } + ) + } + + return ( + + ); +}; + +export default ProductSort; \ No newline at end of file diff --git a/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss new file mode 100644 index 000000000..a27b395c3 --- /dev/null +++ b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss @@ -0,0 +1,12 @@ + +.productsMenuNavigationTablet { + @apply hidden; + @screen md { + @apply block; + padding-right: 2.4rem; + } + @screen xl { + @apply block; + width: 25%; + } +} diff --git a/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx new file mode 100644 index 000000000..d31609639 --- /dev/null +++ b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx @@ -0,0 +1,32 @@ +import { Collection, Facet } from '@framework/schema' +import React from 'react' +import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation' +import { QUERY_KEY } from 'src/utils/constanst.utils' +import s from './ProductsMenuNavigationTablet.module.scss' + +interface Props { + facets: Facet[] + collections: Collection[] + +} + +const ProductsMenuNavigationTablet = ({ facets, collections }: Props) => { + return ( +
+ + { + facets.map(item => ) + } +
+ ) +} + +export default ProductsMenuNavigationTablet diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx index f636157fa..e91599a2c 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx @@ -189,13 +189,13 @@ const RecipesList = ({ data =recipe}:Props) => {
- +
- +
diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 1eab49e38..e41b6763f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -4,7 +4,7 @@ :root { --primary: #5b9a74; --primary-light: #e3f2e9; - --primary-lightest: #effaf4; + --primary-lightest: #F1F8F4; --info-dark: #00317a; --info: #3468B7; diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 96a1b5e96..082154f5c 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -1,72 +1,84 @@ import DefaultImg from '../../public/assets/images/default_img.jpg' +export const REVALIDATE_TIME = 60 +export const MAX_PRODUCT_CAROUSEL = 20 export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII=' export const DEFAULT_IMG = DefaultImg export const SOCIAL_LINKS = { - FB: 'FB', - TWITTER: 'TWITTER', - YOUTUBE: 'YOUTUBE', - IG: 'IG', + FB: 'FB', + TWITTER: 'TWITTER', + YOUTUBE: 'YOUTUBE', + IG: 'IG', } export const ROUTE = { - HOME: '/', - ABOUT: '/about', - ACCOUNT: '/account', + HOME: '/', + ABOUT: '/about', + ACCOUNT: '/account', - PRODUCTS: '/products', - PRODUCT_DETAIL: '/product', - - BLOGS: '/blogs', - BLOG_DETAIL: '/blog', + PRODUCTS: '/products', + PRODUCT_DETAIL: '/product', - RECIPES: '/recipes', - RECIPE_DETAIL: '/recipe', + BLOGS: '/blogs', + BLOG_DETAIL: '/blog', - NOTIFICATION: '/notifications', - BUSSINESS: '/bussiness', - CONTACT: '/contact', - CHECKOUT: '/checkout', - FAQ: '/faq', - CUSTOMER_SERVICE: '/customer-service', - TERM_CONDITION: '/term-condition', - PRIVACY_POLICY: '/privacy-policy', - FORGOT_PASSWORD: '/forgot-password' + RECIPES: '/recipes', + RECIPE_DETAIL: '/recipe', + + NOTIFICATION: '/notifications', + BUSSINESS: '/bussiness', + CONTACT: '/contact', + CHECKOUT: '/checkout', + FAQ: '/faq', + CUSTOMER_SERVICE: '/customer-service', + TERM_CONDITION: '/term-condition', + PRIVACY_POLICY: '/privacy-policy', + FORGOT_PASSWORD: '/forgot-password' } export const ACCOUNT_TAB = { - CUSTOMER_INFO: '', - ORDER: 'orders', - FAVOURITE: 'wishlist', + CUSTOMER_INFO: '', + ORDER: 'orders', + FAVOURITE: 'wishlist', } export const LOCAL_STORAGE_KEY = { TOKEN: 'token' } +export const QUERY_SPLIT_SEPERATOR = ',' export const QUERY_KEY = { - TAB: 'tab', - CATEGORY: 'category', - BRAND: 'brand', - FEATURED: 'feature', - SORTBY:'sortby', - RECIPES:'recipes' + TAB: 'tab', + CATEGORY: 'category', + BRAND: 'brand', + FEATURED: 'featured', + SORTBY: 'sortby', + RECIPES: 'recipes', + PAGE: 'page', +} + +export const PRODUCT_SORT_OPTION_VALUE = { + NAME_ASC: 'name_asc', + NAME_DESC: 'name_desc', + PRICE_ASC: 'price_asc', + PRICE_DESC: 'price_desc', + } export enum ProductFeature { - BestSellers = 'Best Sellers', - Sales = 'Sales', - NewItem = 'New Item', - Viewed = 'Viewed', + BestSellers = 'Best Sellers', + Sales = 'Sales', + NewItem = 'New Item', + Viewed = 'Viewed', } export const KEY = { - ENTER: 'Enter', + ENTER: 'Enter', } export const OPTION_ALL = 'all'; -export const DEFAULT_PAGE_SIZE=20; +export const DEFAULT_PAGE_SIZE = 20; export const CATEGORY = [ @@ -123,28 +135,55 @@ export const FACET = { } } -export const FEATURED = [ - { - name: 'Best Sellers', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`, - }, - { - name: 'Sales', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`, - }, - { - name: 'New Item', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`, - }, - { - name: 'Viewed', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`, - }, - ] - -export const DEFAULT_BLOG_PAGE_SIZE=6; +export const CODE_FACET_FEATURED = 'featured' +export const CODE_FACET_DISCOUNT = 'discount' +export const CODE_FACET_BRAND = 'brand' +export const CODE_FACET_FEATURED_VARIANT = { + FRESH: 'fresh', +} -export const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS] +export const OPTIONS_SORT_PRODUCT = [ + { + name: 'By Name (A-Z)', + value: PRODUCT_SORT_OPTION_VALUE.NAME_ASC, + }, + { + name: 'By Name (Z-A)', + value: PRODUCT_SORT_OPTION_VALUE.NAME_DESC, + }, + { + name: 'Price (Low to High)', + value: PRODUCT_SORT_OPTION_VALUE.PRICE_ASC, + }, + { + name: 'Price (High to Low)', + value: PRODUCT_SORT_OPTION_VALUE.PRICE_DESC, + }, +]; + + +export const FEATURED = [ + { + name: 'Best Sellers', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`, + }, + { + name: 'Sales', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`, + }, + { + name: 'New Item', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`, + }, + { + name: 'Viewed', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`, + }, +] + +export const DEFAULT_BLOG_PAGE_SIZE = 6; + +export const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS] export const STATE_OPTIONS = [ { diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts index 4c0265a19..cc1571ade 100644 --- a/src/utils/funtion.utils.ts +++ b/src/utils/funtion.utils.ts @@ -1,11 +1,60 @@ -import { FacetValue } from './../../framework/vendure/schema.d'; import { Facet } from "@commerce/types/facet"; -import { FACET } from "./constanst.utils"; +import { Collection, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d'; +import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, FACET, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils"; +import { PromiseWithKey, SortOrder } from "./types.utils"; export function isMobile() { return window.innerWidth < 768 } +export function getPageFromQuery(pageQuery: string) { + let page = 0 + try { + page = +pageQuery + if (isNaN(page)) { + page = 0 + } + } catch (err) { + page = 0 + } + return page +} + + +export function getProductSortParamFromQuery(query: string) { + let rs = {} as SearchResultSortParameter + switch (query) { + case PRODUCT_SORT_OPTION_VALUE.NAME_ASC: + rs = { + name: SortOrder.Asc + } + break; + + case PRODUCT_SORT_OPTION_VALUE.NAME_DESC: + rs = { + name: SortOrder.Desc + } + break; + + case PRODUCT_SORT_OPTION_VALUE.PRICE_ASC: + rs = { + price: SortOrder.Asc + } + break; + + case PRODUCT_SORT_OPTION_VALUE.PRICE_DESC: + rs = { + price: SortOrder.Desc + } + break; + + default: + break; + } + + return rs +} + export function removeItem(arr: Array, value: T): Array { const index = arr.indexOf(value); if (index > -1) { @@ -14,9 +63,18 @@ export function removeItem(arr: Array, value: T): Array { return [...arr]; } -export function getFreshProductFacetId(facets: Facet[]) { - const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME) - const freshFacetValue = featuredFacet?.values.find((item: FacetValue) => item.name === FACET.FEATURE.FRESH) +function findFacetByCode(code: string, facets?: Facet) { + return facets?.values.find((item: FacetValue) => item.code === code) +} + +export function getFeaturedFacetId(facets: Facet[]) { + const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED) + return featuredFacet?.id +} + +export function getFreshFacetId(facets: Facet[]) { + const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED) + const freshFacetValue = findFacetByCode(CODE_FACET_FEATURED_VARIANT.FRESH, featuredFacet) return freshFacetValue?.id } @@ -31,6 +89,54 @@ export function getFacetIdByName(facets: Facet[], facetName: string, valueName:s export function getAllFeaturedFacetId(facets: Facet[]) { const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME) const rs = featuredFacet?.values.map((item: FacetValue) => item.id) + return rs || [] +} +export function getAllFacetValueIdsByParentCode(facets: Facet[], code: string) { + const featuredFacet = facets.find((item: Facet) => item.code === code) + const rs = featuredFacet?.values.map((item: FacetValue) => item.id) + return rs || [] +} + +export function getAllFacetValuesForFeatuedProducts(facets: Facet[]) { + const facetsRs = facets.filter((item: Facet) => item.code === CODE_FACET_FEATURED || item.code === CODE_FACET_DISCOUNT) + let rs = [] as FacetValue[] + facetsRs.map((item: Facet) => { + rs = rs.concat(item.values) + return null + }) return rs +} + +export function getFacetNamesFromIds(facets: FacetValue[], ids?: string[]): string { + if (!ids || ids?.length === 0) { + return '' + } + + const facetItems = facets.filter((item: FacetValue) => ids.includes(item.id)) + const names = facetItems.map((item: FacetValue) => item.name) + return names.join(", ") +} + +export function getFacetIdsFromCodes(facets: FacetValue[], codes?: string[]): string[] { + if (!codes || codes?.length === 0) { + return [] + } + + const facetItems = facets.filter((item: FacetValue) => codes.includes(item.code)) + const ids = facetItems.map((item: FacetValue) => item.id) + return ids +} + +export const getCategoryNameFromCollectionId = (colelctions: Collection[], collectionId?: string ) => { + if (!collectionId) { + return '' + } + + const collection = colelctions.find(item => item.id === collectionId) + return collection?.name || '' +} + +export function getAllPromies(promies: PromiseWithKey[]) { + return promies.map(item => item.promise) } \ No newline at end of file diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 7936675e8..7f91711bb 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -1,4 +1,3 @@ -import { SortOrder } from "@framework/schema"; export interface ProductProps { category?: string @@ -36,18 +35,23 @@ export interface BlogProps { export interface CheckOutForm { name?: string - email?:string + email?: string address?: string - city?:string - state?:string - code?:number - phone?:number - method?:string - shipping_fee?:number + city?: string + state?: string + code?: number + phone?: number + method?: string + shipping_fee?: number } export type MouseAndTouchEvent = MouseEvent | TouchEvent +export enum SortOrder { + Asc = 'ASC', + Desc = 'DESC', +} + export type filterContextType = { visible: boolean; open: () => void; @@ -61,4 +65,9 @@ export interface FacetMap extends StringMap{ } export interface FacetConstant{ [key: string]: FacetMap; -} \ No newline at end of file +} +export type PromiseWithKey = { + key: string + promise: PromiseLike + keyResult?: string, +}