crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/m3-relevant-product' of https://github.com/KieIO/grocery-vercel-commerce into feature/m1-get-product-detail

Browse Source
This commit is contained in:
Tan Le
2021-10-07 15:09:00 +07:00
parent 8b5637a247 49295234a0
commit 51d1624fab
70 changed files with 1261 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
framework/commerce/types/product.ts
View File

@@ -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 = {

9
framework/vendure/api/operations/get-all-facets.ts
View File

@@ -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<GetAllFacetsQuery>(query, {

5
framework/vendure/api/operations/get-all-products.ts
View File

@@ -14,7 +14,7 @@ export default function getAllProductsOperation({
variables?: ProductVariables
config?: Partial<VendureConfig>
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<VendureConfig>
preview?: boolean
} = {}): Promise<{ products: Product[] | any[] }> {
} = {}): Promise<{ products: Product[] | any[], totalItems: number }> {
const config = commerce.getConfig(cfg)
const variables = {
input: {
@@ -40,6 +40,7 @@ export default function getAllProductsOperation({
return {
products: data.search.items.map((item) => normalizeSearchResult(item)),
totalItems: data.search.totalItems as number,
}
}

15
framework/vendure/api/operations/get-product.ts
View File

@@ -16,10 +16,8 @@ export default function getProductOperation({
variables: { slug: string }
config?: Partial<VendureConfig>
preview?: boolean
}): Promise<Product | {} | any> {
}): Promise<Product | null> {
const config = commerce.getConfig(cfg)
const locale = config.locale
const { data } = await config.fetch<GetProductQuery>(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,
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

20
framework/vendure/schema.d.ts vendored
View File

@@ -3219,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'
}
}
@@ -3228,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<Facet, 'id'>>
children?: Maybe<
Array<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
@@ -3336,6 +3338,18 @@ export type GetProductQuery = { __typename?: 'Query' } & {
>
}
>
facetValues: Array<
{ __typename?: 'FacetValue' } & Pick<
FacetValue,
'id'
>
>
collections: Array<
{ __typename?: 'Collection' } & Pick<
Collection,
'id'
>
>
}
>
}

1
framework/vendure/utils/queries/get-all-products-query.ts
View File

@@ -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
}

2
framework/vendure/utils/queries/get-collections-query.ts
View File

@@ -24,7 +24,7 @@ export const getCollectionsNameQuery = /* GraphQL */ `
collections{
items{
name
link:slug
slug
}
}
}

3
framework/vendure/utils/queries/get-product-query.ts
View File

@@ -36,6 +36,9 @@ export const getProductQuery = /* GraphQL */ `
name
}
}
facetValues {
id
}
}
}
`

9
pages/index.tsx
View File

@@ -62,19 +62,23 @@ export async function getStaticProps({
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 = []
}
// 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
@@ -83,6 +87,9 @@ export async function getStaticProps({
preview,
})
promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products' })
} else {
props.featuredProducts = []
}
// collection
const collectionsPromise = commerce.getAllCollections({

100
pages/product/[slug].tsx
View File

@@ -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<typeof getStaticProps>) {
return <>
<ProductInfoDetail />
<RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
<RecommendedRecipes data={RECIPE_DATA_TEST} />
<ReleventProducts />
<ReleventProducts data={relevantProducts} collections={collections}/>
<ViewedProducts />
<RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts" />
</>
}
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<string[]>((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

86
pages/products.tsx
View File

@@ -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 (
<>
<ProductListBanner />
<ProductListFilter/>
<ProductListFilter
collections={collections}
facets={facets}
products={productsResult.products}
total={productsResult.totalItems} />
<ViewedProducts />
</>
)
}
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

33
pages/test.tsx
View File

@@ -1,17 +1,19 @@
import commerce from '@lib/api/commerce';
import { GetStaticPropsContext } from 'next';
import { Layout } from 'src/components/common';
import { ProductCard } from '@commerce/types/product';
import { Layout, ListProductCardSkeleton } from 'src/components/common';
interface Props {
productDetail: ProductCard[],
}
export default function Home({ productDetail }: Props) {
return (
<>
<p>
TOTAL: {productDetail}
</p>
{/* {JSON.stringify(productDetail)} */}
{/* <ListProductCardSkeleton /> */}
{/* <ListProductCardSkeleton count={1} /> */}
<ListProductCardSkeleton count={10} />
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero.
<ListProductCardSkeleton count={10} isWrap/>
</>
)
}
@@ -22,28 +24,9 @@ export async function getServerSideProps({
locale,
locales,
}: GetStaticPropsContext) {
const config = { locale, locales }
const productsPromise = commerce.getProduct({
// const productsPromise = commerce.getAllFacets({
variables: {
slug: "hand-trowel"
// filter: {
// name: {
// contains: 'ca'
// }
// }
},
config,
// preview,
// Saleor provider only
...({ featured: true } as any),
})
const { product } = await productsPromise
const productDetail = JSON.stringify(product)
return {
props: { productDetail },
props: {},
}
}

7
src/components/common/EmptyCommon/EmptyCommon.module.scss
View File

@@ -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;
}
}

8
src/components/common/Header/Header.tsx
View File

@@ -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<HTMLDivElement>(null)
const { toggleProductFilter: toggleFilter } = useProductFilter()
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
const [isModeAuthenRegister, setIsModeAuthenRegister] = useState<boolean>(false)
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@@ -63,7 +64,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
<div className={s.menu}>
<HeaderMenu
isFull={isFullHeader}
visibleFilter={visibleFilter}
toggleFilter={toggleFilter}
openModalLogin={openModalLogin}
openModalRegister = {openModalRegister}

4
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@@ -50,10 +50,6 @@
width: 1.2rem;
height: 1.2rem;
border-radius: 1.2rem;
@apply hidden;
&.isShow {
@apply block;
}
}
@screen md {
display: none;

10
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -27,7 +27,6 @@ interface Props {
children?: any
isFull?: boolean
isStickyHeader?: boolean
visibleFilter?: boolean
openModalLogin: () => 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 (
<section
className={classNames({
@@ -105,12 +104,7 @@ const HeaderMenu = memo(
{FILTER_PAGE.includes(router.pathname) && (
<button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter />
<div
className={classNames({
[s.dot]: true,
[s.isShow]: visibleFilter,
})}
></div>
<div className={s.dot}></div>
</button>
)}
<button

2
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
View File

@@ -42,7 +42,7 @@ const HeaderSubMenu = memo(() => {
<ul className={s.menu}>
{/* todo: handle active item */}
<li>
<MenuDropdown options={collections?.items ?? []} align="left">Categories</MenuDropdown>
<MenuDropdown options={collections || []} align="left">Categories</MenuDropdown>
</li>
{
MENU.map(item => <li key={item.name}

1
src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
View File

@@ -68,4 +68,5 @@ const HeaderSubMenuMobile = memo(({ }: Props) => {
)
})
HeaderSubMenuMobile.displayName = 'HeaderSubMenuMobile'
export default HeaderSubMenuMobile

4
src/components/common/Layout/Layout.tsx
View File

@@ -1,7 +1,7 @@
import { CommerceProvider } from '@framework'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { CartDrawerProvider, MessageProvider } from 'src/components/contexts'
import { CartDrawerProvider, MessageProvider, ProductFilterProvider } from 'src/components/contexts'
import LayoutContent from './LayoutContent/LayoutContent'
interface Props {
className?: string
@@ -13,9 +13,11 @@ const Layout: FC<Props> = ({ children }) => {
return (
<CommerceProvider locale={locale}>
<CartDrawerProvider>
<ProductFilterProvider>
<MessageProvider>
<LayoutContent>{children}</LayoutContent>
</MessageProvider>
</ProductFilterProvider>
</CartDrawerProvider>
</CommerceProvider>
)

2
src/components/common/Layout/LayoutContent/LayoutContent.module.scss
View File

@@ -17,7 +17,7 @@
}
}
.filter {
@screen xl {
@screen md {
display: none;
}
}

17
src/components/common/Layout/LayoutContent/LayoutContent.tsx
View File

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
import { FC } from 'react'
import { useMessage } from 'src/components/contexts'
import { useModalCommon } from 'src/components/hooks'
import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
import { FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
import { CartDrawer, Footer, MessageCommon, ScrollToTop } from '../..'
import Header from '../../Header/Header'
import MenuNavigationProductList from '../../MenuNavigationProductList/MenuNavigationProductList'
@@ -14,23 +14,13 @@ interface Props {
}
const LayoutContent: FC<Props> = ({ children }) => {
const { pathname } = useRouter()
const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
const router = useRouter()
const {messages, removeMessage} = useMessage()
const toggleFilter = () => {
if (visibleFilter) {
closeFilter()
} else {
openFilter()
}
}
return (
<>
<div className={s.mainLayout}>
<Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
<Header/>
{
router.pathname === ROUTE.ACCOUNT ?
<section className={s.wrapperWithBg}>
@@ -38,10 +28,9 @@ const LayoutContent: FC<Props> = ({ children }) => {
</section> :
<main>{children}</main>
}
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<ScrollToTop visibilityHeight={1500} />
{
FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>)
FILTER_PAGE.includes(router.pathname) && (<div className={s.filter}><MenuNavigationProductList /> </div>)
}
<Footer />
</div>

12
src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss Normal file
View File

@@ -0,0 +1,12 @@
.listProductCardSkeleton {
display: flex;
overflow: hidden;
&.wrap {
flex-wrap: wrap;
overflow: unset;
> div {
margin-bottom: 1.6rem;
}
}
}

21
src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx Normal file
View File

@@ -0,0 +1,21 @@
import classNames from 'classnames'
import { ProductCardSkeleton } from '..'
import s from './ListProductCardSkeleton.module.scss'
type Props = {
count?: number
isWrap?: boolean
}
const ListProductCardSkeleton = ({ count = 5, isWrap }: Props) => {
return (
<div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
{
Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
}
</div>
)
}
export default ListProductCardSkeleton

19
src/components/common/MenuFilter/MenuFilter.module.scss
View File

@@ -1,7 +1,6 @@
@import "../../../styles/utilities";
.menuFilterWrapper{
@apply spacing-horizontal;
.menuFilterWrapper{
.menuFilterHeading{
@apply sub-headline font-bold;
color: var(--text-active);
@@ -19,21 +18,5 @@
width: 100%;
border-bottom: 1px solid var(--border-line);
}
li{
margin: 1rem 0;
padding:0;
div{
padding: 0.8rem 1.6rem;
margin-right: 0.8rem;
background-color: var(--gray);
border-radius: 0.8rem;
cursor: pointer;
&.active {
color:white;
background-color: var(--primary);
}
}
}
}
}

44
src/components/common/MenuFilter/MenuFilter.tsx
View File

@@ -1,44 +1,34 @@
import classNames from 'classnames'
import { useEffect, useState } from 'react';
import s from './MenuFilter.module.scss';
import MenuFilterItem from './MenuFilterItem/MenuFilterItem';
import s from './MenuFilter.module.scss'
interface Props {
children?: any,
heading?: string,
categories:{name:string,link:string}[],
categories: { name: string, slug?: string, code?: string }[],
type: string,
onChangeValue?: (value: Object) => void
onChange: (value: string, type: string, isSellect?: boolean) => void
isSingleSelect?: boolean
singleSelectedValue?: string
}
const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
const [active, setActive] = useState<string>('');
function handleClick(link:string){
setActive(link);
if(active === link){
setActive('');
const MenuFilter = ({ heading, categories, type, onChange, singleSelectedValue, isSingleSelect }: Props) => {
function handleChange(value: string, isSellect: boolean) {
onChange(value, type, isSellect)
}
}
useEffect(()=>{
let href = active?.split("=");
const linkValue = href[1];
onChangeValue && onChangeValue({[type]:linkValue});
},[active])
return (
<section className={s.menuFilterWrapper}>
<h2 className={s.menuFilterHeading}>{heading}</h2>
<ul className={s.menuFilterList}>
{
categories.map(item => <li key={item.name}>
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
{item.name}
</div>
</li>)
categories.map(item => <MenuFilterItem
key={item.slug || item.code}
name={item.name}
type={type}
value={item.slug || item.code || ''}
onChange={handleChange}
isActive={isSingleSelect && (item.slug || item.code) === singleSelectedValue}
/>)
}
</ul>
</section>

15
src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.module.scss Normal file
View File

@@ -0,0 +1,15 @@
.menuFilterItem {
margin: 1rem 0;
padding: 0;
div {
padding: 0.8rem 1.6rem;
margin-right: 0.8rem;
background-color: var(--gray);
border-radius: 0.8rem;
cursor: pointer;
&.active {
color: var(--white);
background-color: var(--primary);
}
}
}

42
src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx Normal file
View File

@@ -0,0 +1,42 @@
import classNames from 'classnames';
import { route } from 'next/dist/server/router';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import s from './MenuFilterItem.module.scss';
interface Props {
name: string,
value: string,
type: string,
isActive?: boolean
onChange: (value: string, isSellect: boolean) => void
}
const MenuFilterItem = ({ name, value, type, isActive, onChange }: Props) => {
const router = useRouter()
const [isSelected, setIsSelected] = useState<boolean>()
useEffect(() => {
setIsSelected(isActive)
}, [isActive])
useEffect(() => {
const rs = (router.query[type] || []).includes(value)
setIsSelected(rs)
}, [type, router.query, value])
function handleClick() {
onChange(value, !isSelected)
setIsSelected(!isSelected)
}
return (
<li className={s.menuFilterItem}>
<div onClick={handleClick} className={classNames({ [s.active]: isSelected })}>
{name}
</div>
</li>
)
}
export default MenuFilterItem

18
src/components/common/MenuNavigation/MenuNavigation.module.scss
View File

@@ -3,7 +3,6 @@
@apply hidden;
@screen md {
@apply block;
}
.menuNavigationHeading{
@screen md {
@apply sub-headline font-bold ;
@@ -12,22 +11,5 @@
margin: 1.6rem 0;
}
}
.menuNavigationList{
@screen md {
li{
margin: 0.8rem 0;
a{
display:block;
width:100%;
color:var(--text-base);
&:hover {
@apply text-primary;
}
&.active {
@apply text-primary;
}
}
}
}
}
}

27
src/components/common/MenuNavigation/MenuNavigation.tsx
View File

@@ -1,30 +1,27 @@
import classNames from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
import s from './MenuNavigation.module.scss'
import MenuNavigationItem from './MenuNavigationItem/MenuNavigationItem'
interface Props {
children?: any,
heading: string,
categories:{name:string,link:string}[]
queryKey: string,
categories: { name: string, slug?: string, code?: string }[]
isSingleSelect?: boolean
}
const MenuNavigation = ({heading,categories}:Props)=> {
const router = useRouter()
const MenuNavigation = ({ heading, queryKey, categories, isSingleSelect }: Props) => {
return (
<section className={s.menuNavigationWrapper}>
<h2 className={s.menuNavigationHeading}>{heading}({categories.length})</h2>
<ul className={s.menuNavigationList}>
{
categories.map(item => <li key={item.name}
>
<Link href={item.link}>
<a className={classNames({ [s.active]: router.asPath === item.link})}>
{item.name}
</a>
</Link>
</li>)
categories.map(item => <MenuNavigationItem
key={item.name}
name={item.name}
value={item.slug || item.code || ''}
queryKey={queryKey}
isSingleSelect={isSingleSelect}
/>)
}
</ul>
</section>

15
src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.module.scss Normal file
View File

@@ -0,0 +1,15 @@
.menuNavigationItem {
@screen md {
display: block;
width: 100%;
margin: 0.8rem 0;
color: var(--text-base);
cursor: pointer;
&:hover {
@apply text-active;
}
&.active {
@apply text-primary;
}
}
}

66
src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.tsx Normal file
View File

@@ -0,0 +1,66 @@
import classNames from 'classnames'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { QUERY_KEY, QUERY_SPLIT_SEPERATOR, ROUTE } from 'src/utils/constanst.utils'
import s from './MenuNavigationItem.module.scss'
interface Props {
name: string
value: string
queryKey: string
isSingleSelect?: boolean
}
const MenuNavigationItem = ({ name, value, queryKey, isSingleSelect }: Props) => {
const router = useRouter()
const [isActive, setIsActive] = useState<boolean>()
useEffect(() => {
if (!value) {
setIsActive(false)
}
const queryString = router.query[queryKey] as string || ''
setIsActive(queryString.split(QUERY_SPLIT_SEPERATOR).includes(value))
}, [router.query, queryKey, value])
const handleClick = () => {
const queryString = router.query[queryKey] as string || ''
const prevQuery = queryString.split(QUERY_SPLIT_SEPERATOR)
let newQuery = ''
if (isSingleSelect) {
newQuery = isActive ? '' : value
} else {
if (isActive) {
newQuery = prevQuery.filter(item => item !== value).join(QUERY_SPLIT_SEPERATOR)
} else {
newQuery = [...prevQuery, value].join(QUERY_SPLIT_SEPERATOR)
}
}
const query = {
...router.query,
[queryKey]: newQuery
}
if (queryKey === QUERY_KEY.CATEGORY) {
query[QUERY_KEY.PAGE] = "0"
}
router.push({
pathname: ROUTE.PRODUCTS,
query
},
undefined, { shallow: true }
)
}
return (<li className={classNames(s.menuNavigationItem, { [s.active]: isActive })}
onClick={handleClick}>
{name}
</li>)
}
export default MenuNavigationItem

16
src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
View File

@@ -1,13 +1,5 @@
@import "../../../styles/utilities";
.menuNavigationProductListDesktop{
@screen sm {
@apply hidden;
}
@screen xl {
@apply block;
}
}
.menuNavigationProductListMobile{
@apply relative transition-all duration-100;
&.isShow{
@@ -37,7 +29,7 @@
transform: translateY(0%)
}
.content{
@apply absolute w-full h-full;
@apply absolute w-full h-full spacing-horizontal custom-scroll;
margin-top: 3rem;
padding-top: 10rem ;
padding-bottom: 10rem;
@@ -46,6 +38,7 @@
height: 96%;
bottom: 0;
border-radius: 2.4rem 2.4rem 0 0;
.head{
@apply flex justify-between fixed;
top:0;
@@ -57,12 +50,11 @@
background-color: white;
z-index: 10000;
h3{
@apply heading-3 font-bold;
color:var(--text-base);
@apply heading-3 font-heading;
}
}
.foot{
@apply fixed;
@apply fixed text-center;
bottom: 0;
left:0;
width: 100%;

161
src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
View File

@@ -1,38 +1,118 @@
import React, { useState } from 'react';
import { QueryFacetsArgs } from '@framework/schema';
import classNames from 'classnames';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { ButtonCommon } from 'src/components/common';
import { useProductFilter } from 'src/components/contexts';
import { useGetAllCollection } from 'src/components/hooks/collection';
import { useFacets } from 'src/components/hooks/facets';
import IconHide from 'src/components/icons/IconHide';
import { CODE_FACET_BRAND, CODE_FACET_FEATURED, OPTIONS_SORT_PRODUCT, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { LANGUAGE } from 'src/utils/language.utils';
import { SortOrder } from 'src/utils/types.utils';
import MenuFilter from '../MenuFilter/MenuFilter';
import SkeletonParagraph from '../SkeletonCommon/SkeletonParagraph/SkeletonParagraph';
import s from './MenuNavigationProductList.module.scss';
import MenuSort from './MenuSort/MenuSort';
import {LANGUAGE} from 'src/utils/language.utils';
import classNames from 'classnames'
import MenuFilter from '../MenuFilter/MenuFilter';
import MenuNavigation from '../MenuNavigation/MenuNavigation';
import IconHide from 'src/components/icons/IconHide';
interface Props {
categories:{name:string,link:string}[],
brands:{name:string,link:string}[],
featured:{name:string,link:string}[],
visible: boolean,
onClose: () => void
}
const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:Props)=>{
const [dataSort,setDataSort] = useState({});
function handleValue(value:Object){
setDataSort({...dataSort,...value});
const FACET_QUERY = {
options: {
sort: {
code: SortOrder.Asc
},
filter: {
code: {
in: [CODE_FACET_FEATURED, CODE_FACET_BRAND]
}
function filter(){
// console.log(dataSort)
}
}
} as QueryFacetsArgs
const MenuNavigationProductList = ({}: Props) => {
const router = useRouter()
const { productFilterVisible: visible, closeProductFilter: onClose } = useProductFilter()
const { facets, loading: facetsLoading } = useFacets(FACET_QUERY)
const { collections, loading: collectionLoading } = useGetAllCollection()
const [brandQuery, setBrandQuery] = useState<string[]>([])
const [featuredQuery, setFeaturedQuery] = useState<string[]>([])
const [categoryQuery, setCategoryQuery] = useState<string>()
const [sortValue, setSortValue] = useState<string>();
useEffect(() => {
const rs = router.query[QUERY_KEY.SORTBY] as string
if (rs) {
setSortValue(rs)
}
}, [router.query])
useEffect(() => {
const rs = router.query[QUERY_KEY.CATEGORY] as string
if (rs) {
setCategoryQuery(rs)
}
}, [router.query])
function onSubmit() {
let newURL = `${ROUTE.PRODUCTS}?`
if (categoryQuery) {
newURL += `&${QUERY_KEY.CATEGORY}=${categoryQuery}`
}
if (brandQuery.length > 0) {
newURL += `&${QUERY_KEY.BRAND}=${brandQuery.join(",")}`
}
if (featuredQuery.length > 0) {
newURL += `&${QUERY_KEY.FEATURED}=${featuredQuery.join(",")}`
}
if (sortValue) {
newURL += `&${QUERY_KEY.SORTBY}=${sortValue}`
}
router.push(newURL)
onClose()
}
const onSortChange = (value: string) => {
setSortValue(value)
}
const onCategoryChange = (value: string, isSelect: boolean) => {
if (isSelect) {
setCategoryQuery(value)
} else {
setCategoryQuery('')
}
}
const onFilterOptionChange = (value: string, type: string, isSelect: boolean = true) => {
if (type === QUERY_KEY.CATEGORY) {
onCategoryChange(value, isSelect)
} else {
let rs = [...featuredQuery]
let setDataFunction = setFeaturedQuery
if (type === CODE_FACET_BRAND) {
rs = [...brandQuery]
setDataFunction = setBrandQuery
}
if (isSelect) {
rs.push(value)
} else {
rs = rs.filter(item => item !== value)
}
setDataFunction(rs)
}
}
return (
<>
<div className={s.menuNavigationProductListDesktop}>
<MenuNavigation categories={categories} heading="Categories"/>
<MenuNavigation categories={brands} heading="Brands"/>
<MenuNavigation categories={featured} heading="Featured"/>
</div>
<div className={classNames({ [s.menuNavigationProductListMobile]: true, [s.isShow]: visible })}>
<div className={classNames({ [s.menuNavigationProductModal]: true, [s.animation]: visible })}>
<div className={s.content}>
@@ -40,17 +120,36 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:
<h3>FILTER</h3>
<div onClick={onClose}><IconHide /></div>
</div>
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
{collectionLoading && <SkeletonParagraph rows={5} />}
<MenuFilter categories={collections}
heading="Categories"
type={QUERY_KEY.CATEGORY}
onChange={onFilterOptionChange}
singleSelectedValue={categoryQuery}
isSingleSelect={true}
/>
{facetsLoading && <>
<SkeletonParagraph rows={5} />
<SkeletonParagraph rows={5} />
</>}
{
facets?.map(item => <MenuFilter
key={item.id}
type={item.code}
categories={item.values}
heading={item.name}
onChange={onFilterOptionChange}
/>)
}
<MenuSort heading="SORT BY" onChange={onSortChange} value={sortValue} options={OPTIONS_SORT_PRODUCT} />
<div className={s.foot}>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
<ButtonCommon size="large" onClick={onSubmit}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
</div>
</div>
</div>
</div>
</>
)
}

32
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
View File

@@ -1,40 +1,12 @@
@import "../../../../styles/utilities";
.menuSortWrapper{
@apply spacing-horizontal;
.menuSortWrapper{
.menuSortHeading{
@apply sub-headline font-bold ;
color: var(--text-active);
font-feature-settings: 'salt' on;
@apply heading-3 font-heading;
margin: 0.8rem 0;
}
.menuSortList{
padding-bottom: 1rem;
box-sizing: border-box;
li{
div{
height: 4.8rem;
line-height: 4.8rem;
padding: 0 1.6rem;
margin-right: 0.8rem;
border-radius: 0.8rem;
cursor: pointer;
&.active {
@apply font-bold relative;
color:var(--text-active);
background-color: var(--gray);
&::after{
@apply absolute;
content:"";
background-image: url('/assets/svg/check.svg');
right: 1.6rem;
top: calc(50% - 24px/2);
width: 2.4rem;
height: 2.4rem;
}
}
}
}
}
}

59
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
View File

@@ -1,63 +1,30 @@
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { PRODUCT_SORT_OPTION_VALUE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import s from './MenuSort.module.scss';
import MenuSortItem from './MenuSortItem/MenuSortItem';
interface Props {
children?: any,
heading: string,
type:string,
onChangeValue?: (value: Object) => void
}
const SORT = [
{
name: 'By Name',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
},
{
name: 'Price(High to Low)',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
},
{
name: 'Price (Low to High)',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
},
{
name: 'On Sale',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
},
];
const MenuSort = ({heading,type,onChangeValue}:Props)=> {
const [active, setActive] = useState<string>('');
function handleClick(link:string){
setActive(link);
if(active === link){
setActive('');
}
options: {name: string, value: string}[]
value?: string,
onChange: (value: string) => void
}
useEffect(()=>{
let href = active?.split("=");
const linkValue = href[1];
onChangeValue && onChangeValue({[type]:linkValue});
},[active])
const MenuSort = ({ heading, value, onChange, options }: Props) => {
return (
<section className={classNames(s.menuSortWrapper)}>
<h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
<ul className={s.menuSortList}>
{
SORT.map(item => <li key={item.name}>
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
{item.name}
</div>
</li>)
options.map(item => <MenuSortItem
key={item.value}
name={item.name}
value={item.value}
currentValue={value}
onChange={onChange}
/>)
}
</ul>
</section>

26
src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.module.scss Normal file
View File

@@ -0,0 +1,26 @@
.menuSortItem {
div {
height: 4.8rem;
line-height: 4.8rem;
padding: 0 1.6rem;
margin-right: 0.8rem;
border-radius: 0.8rem;
cursor: pointer;
&.active {
@apply font-bold relative;
color: var(--text-active);
background-color: var(--primary-lightest);
&::after {
@apply absolute;
content: "";
background-image: url("./check.svg");
background-repeat: no-repeat;
background-position: center;
right: 1.6rem;
top: calc(50% - 24px / 2);
width: 2.4rem;
height: 2.4rem;
}
}
}
}

24
src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.tsx Normal file
View File

@@ -0,0 +1,24 @@
import classNames from 'classnames';
import s from './MenuSortItem.module.scss';
interface Props {
name: string,
value: string,
currentValue?: string,
onChange: (value: string) => void
}
const MenuSortItem = ({ onChange, name, value, currentValue }: Props) => {
const handleChange = () => {
onChange(value)
}
return (
<li className={s.menuSortItem}>
<div onClick={handleChange} className={classNames({ [s.active]: value === currentValue })}>
{name}
</div>
</li>
)
}
export default MenuSortItem

3
src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7104 1.20986C14.6175 1.11613 14.5069 1.04174 14.385 0.990969C14.2632 0.940201 14.1324 0.914062 14.0004 0.914062C13.8684 0.914062 13.7377 0.940201 13.6159 0.990969C13.494 1.04174 13.3834 1.11613 13.2904 1.20986L5.84044 8.66986L2.71044 5.52986C2.61392 5.43662 2.49998 5.36331 2.37512 5.3141C2.25026 5.2649 2.11694 5.24077 1.98276 5.24309C1.84858 5.24541 1.71617 5.27414 1.59309 5.32763C1.47001 5.38113 1.35868 5.45834 1.26544 5.55486C1.1722 5.65138 1.09889 5.76532 1.04968 5.89018C1.00048 6.01503 0.976347 6.14836 0.978669 6.28254C0.98099 6.41672 1.00972 6.54913 1.06321 6.67221C1.1167 6.79529 1.19392 6.90662 1.29044 6.99986L5.13044 10.8399C5.2234 10.9336 5.334 11.008 5.45586 11.0588C5.57772 11.1095 5.70843 11.1357 5.84044 11.1357C5.97245 11.1357 6.10316 11.1095 6.22502 11.0588C6.34687 11.008 6.45748 10.9336 6.55044 10.8399L14.7104 2.67986C14.8119 2.58622 14.893 2.47257 14.9484 2.34607C15.0038 2.21957 15.0324 2.08296 15.0324 1.94486C15.0324 1.80676 15.0038 1.67015 14.9484 1.54365C14.893 1.41715 14.8119 1.3035 14.7104 1.20986Z" fill="#5b9a74" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
View File

@@ -25,7 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
<Inputcommon placeholder='Street Address' ref={firstInputRef} />
<Inputcommon placeholder='City' />
<div className={s.line}>
<SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
<SelectCommon options={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
<Inputcommon placeholder='Zip code' />
</div>
<Inputcommon placeholder='Phone (delivery contact)' />

15
src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss Normal file
View File

@@ -0,0 +1,15 @@
.productCardSkeleton {
max-width: 22.4rem;
min-width: 20rem;
margin: 0 0.8rem;
> div {
width: 100% !important;
}
.content {
margin-top: 1.6rem;
> div {
margin: 0;
width: 100% !important;
}
}
}

17
src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx Normal file
View File

@@ -0,0 +1,17 @@
import SkeletonImage from "../SkeletonCommon/SkeletonImage/SkeletonImage"
import SkeletonParagraph from "../SkeletonCommon/SkeletonParagraph/SkeletonParagraph"
import s from './ProductCardSkeleton.module.scss'
const ProductCardSkeleton = ({ }) => {
return (
<div className={s.productCardSkeleton}>
<SkeletonImage />
<div className={s.content}>
<SkeletonParagraph rows={3} />
</div>
</div>
)
}
export default ProductCardSkeleton

23
src/components/common/ProductList/ProductList.module.scss
View File

@@ -1,11 +1,28 @@
.wrapper {
margin: 4rem auto;
.list {
// max-width: 109.4rem;
@apply flex flex-wrap justify-around;
@apply grid grid-cols-2;
@screen md {
@apply grid-cols-3;
}
@screen lg {
@apply grid-cols-4;
}
@screen xl {
@apply grid-cols-6;
}
.empty {
button {
margin-top: 1.6rem;
width: 100%;
}
}
}
.pagination {
padding-top: 4.8rem;
// max-width: 109.4rem;
@apply flex justify-center items-center;
&.hide {
@apply hidden;
}
}
}

41
src/components/common/ProductList/ProductList.tsx
View File

@@ -1,27 +1,50 @@
import React, { useState } from 'react'
import classNames from 'classnames'
import { useRouter } from 'next/router'
import React from 'react'
import { DEFAULT_PAGE_SIZE, ROUTE } from 'src/utils/constanst.utils'
import { ButtonCommon, EmptyCommon } from '..'
import PaginationCommon from '../PaginationCommon/PaginationCommon'
import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
import s from "./ProductList.module.scss"
interface ProductListProps {
data: ProductCardProps[]
data: ProductCardProps[],
total?: number,
defaultCurrentPage?: number
onPageChange?: (page: number) => void
}
const ProductList = ({data}: ProductListProps) => {
const [currentPage, setCurrentPage] = useState(0)
const onPageChange = (page:number) => {
setCurrentPage(page)
const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
const router = useRouter()
const handlePageChange = (page: number) => {
onPageChange && onPageChange(page)
}
const handleShowAllProduct = () => {
router.push({
pathname: ROUTE.PRODUCTS,
},
undefined, { shallow: true }
)
}
return (
<div className={s.wrapper}>
<div className={s.list}>
{
data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
data.map((product, index) => {
return <ProductCard {...product} key={index} />
})
}
{
data.length === 0 && <div className={s.empty}>
<EmptyCommon />
<ButtonCommon onClick={handleShowAllProduct}>Show all products</ButtonCommon>
</div>
<div className={s.pagination}>
<PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
}
</div>
<div className={classNames(s.pagination, { [s.hide]: data.length === 0 })}>
<PaginationCommon defaultCurrent={defaultCurrentPage} total={total} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
</div>
</div>
)

35
src/components/common/SelectCommon/SelectCommon.tsx
View File

@@ -1,24 +1,33 @@
import s from './SelectCommon.module.scss'
import classNames from 'classnames'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { IconVectorDown } from 'src/components/icons'
import s from './SelectCommon.module.scss'
import SelectOption from './SelectOption/SelectOption'
interface Props {
placeholder? : string,
value?: string,
size?: 'base' | 'large',
type?: 'default' | 'custom',
option: {name: string, value: string}[],
options: {name: string, value: string}[],
onChange?: (value: string) => void,
}
const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
const [selectedName, setSelectedName] = useState(placeholder)
const [selectedValue, setSelectedValue] = useState('')
const SelectCommon = ({ value, type = 'default', size = 'base', options, placeholder, onChange}: Props) => {
const [selectedName, setSelectedName] = useState<string>()
const [selectedValue, setSelectedValue] = useState<string>('')
const changeSelectedName = (item:string, value: string) => {
useEffect(() => {
setSelectedValue(value || '')
const name = options.find(item => item.value === value)?.name
setSelectedName(name)
}, [value, options])
const changeSelectedName = (value: string) => {
setSelectedValue(value)
setSelectedName(item)
const name = options.find(item => item.value === value)?.name
setSelectedName(name)
onChange && onChange(value)
}
return(
@@ -33,7 +42,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
[s.selectTrigger] : true,
})}
>{selectedName}<IconVectorDown /></div>
>{selectedName || placeholder}<IconVectorDown /></div>
<div className={s.hoverWrapper}>
<div className={classNames({
@@ -43,8 +52,12 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
})}
>
{
option.map(item =>
<SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
options.map(item =>
<SelectOption key={item.value}
itemName={item.name}
value={item.value}
onChange={changeSelectedName}
size={size} selected={(selectedValue === item.value)} />
)
}
</div>

10
src/components/common/SelectCommon/SelectOption/SelectOption.tsx
View File

@@ -2,16 +2,16 @@ import s from './SelectOption.module.scss'
import classNames from 'classnames'
interface Props{
onClick: (name: string, value: string) => void,
onChange: (value: string) => void,
itemName: string,
size: 'base' | 'large',
value: string,
selected?: boolean,
}
const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
const changeName = () => {
onClick(itemName, value)
const SelectOption = ({onChange, itemName, size, value, selected} : Props) => {
const handleChange = () => {
onChange(value)
}
return(
<div className={classNames({
@@ -19,7 +19,7 @@ const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
[s[size]] : !!size,
[s.isChoose] : selected ,
})}
onClick = {changeName}
onClick = {handleChange}
>{itemName}</div>
)
}

2
src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
View File

@@ -1,7 +1,7 @@
@import '../../../../styles/utilities';
.skeletonImage {
@apply relative;
@apply relative overflow-hidden;
background: #DDDBDD;
&.small {

1
src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
View File

@@ -1,6 +1,7 @@
@import '../../../../styles/utilities';
.skeletonParagraph {
@apply overflow-hidden;
margin: 0 1.6rem;
.row {

3
src/components/common/index.ts
View File

@@ -51,5 +51,6 @@ export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'
export { default as InputPasswordFiledInForm} from './InputPasswordFiledInForm/InputPasswordFiledInForm'
export { default as InputFiledInForm} from './InputFiledInForm/InputFiledInForm'
export { default as MessageCommon} from './MessageCommon/MessageCommon'
export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton'
export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton'

43
src/components/contexts/FilterContext.tsx
View File

@@ -1,43 +0,0 @@
import { createContext, ReactNode, useContext, useState } from "react";
import { filterContextType } from "src/utils/types.utils";
const contextDefaultValues: filterContextType = {
visible: false,
open: () => {},
close: () => {},
};
const FilterContext = createContext<filterContextType>(contextDefaultValues);
export function useAuth() {
return useContext(FilterContext);
}
type FilterProviderProps = {
children: ReactNode;
};
export function FilterProvider({ children }: FilterProviderProps) {
const [visible, setVisible] = useState<boolean>(false);
const open = () => {
setVisible(true);
};
const close = () => {
setVisible(false);
};
const value = {
visible,
open,
close,
};
return (
<>
<FilterContext.Provider value={value}>
{children}
</FilterContext.Provider>
</>
);
}

20
src/components/contexts/ProductFilter/ProductFilterContext.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { createContext, useContext } from 'react';
export type ProductFilterContextType = {
productFilterVisible: boolean;
toggleProductFilter: (visible?: boolean) => void;
openProductFilter: () => void;
closeProductFilter: () => void;
};
const DEFAULT_VALUE: ProductFilterContextType = {
productFilterVisible: false,
toggleProductFilter: () => { },
openProductFilter: () => { },
closeProductFilter: () => { },
};
export const ProductFilterContext = createContext<ProductFilterContextType>(DEFAULT_VALUE)
export function useProductFilter() {
return useContext(ProductFilterContext);
}

30
src/components/contexts/ProductFilter/ProductFilterProvider.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { ReactNode, useState } from "react";
import { ProductFilterContext } from "./ProductFilterContext";
type Props = {
children: ReactNode;
};
export function ProductFilterProvider({ children }: Props) {
const [visible, setVisible] = useState<boolean>(false);
const closeProductFilter = () => {
setVisible(false);
};
const openProductFilter = () => {
setVisible(true);
};
const toggleProductFilter = () => {
setVisible(!visible);
};
return (
<>
<ProductFilterContext.Provider value={{productFilterVisible: visible, closeProductFilter, openProductFilter, toggleProductFilter}}>
{children}
</ProductFilterContext.Provider>
</>
);
}

3
src/components/contexts/index.ts
View File

@@ -3,3 +3,6 @@ export * from './CartDrawer/CartDrawerProvider'
export * from './Message/MessageContext'
export * from './Message/MessageProvider'
export * from './ProductFilter/ProductFilterContext'
export * from './ProductFilter/ProductFilterProvider'

4
src/components/hooks/collection/useGetAllCollection.tsx
View File

@@ -5,8 +5,8 @@ import useSWR from 'swr';
const useGetAllCollection = () => {
const { data, ...rest } = useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
return { collections: data?.collections, ...rest }
const { data, isValidating, ...rest } = useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
return { collections: data?.collections.items || [], loading: isValidating, ...rest }
}
export default useGetAllCollection;

2
src/components/hooks/facets/useFacets.tsx
View File

@@ -5,7 +5,7 @@ import useSWR from 'swr'
const useFacets = (options?: QueryFacetsArgs) => {
const { data, isValidating, ...rest } = useSWR<GetAllFacetsQuery>([getAllFacetsQuery, options], gglFetcher)
return { items: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
return { facets: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
}
export default useFacets

3
src/components/hooks/product/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as useSearchProducts } from './useSearchProducts'

13
src/components/hooks/product/useSearchProducts.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { GetAllProductsQuery, QuerySearchArgs } from '@framework/schema'
import { normalizeSearchResult } from '@framework/utils/normalize'
import { getAllProductsQuery } from '@framework/utils/queries/get-all-products-query'
import gglFetcher from 'src/utils/gglFetcher'
import useSWR from 'swr'
const useSearchProducts = (options?: QuerySearchArgs) => {
const { data, isValidating, ...rest } = useSWR<GetAllProductsQuery>([getAllProductsQuery, options], gglFetcher)
return { products: data?.search.items.map((item) => normalizeSearchResult(item)), totalItems: data?.search.totalItems, loading: isValidating, ...rest }
}
export default useSearchProducts

2
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
View File

@@ -43,7 +43,7 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
<div className="flex">
<div className={s.inputState}>
<SelectCommon type="custom" placeholder="State" option={states} />
<SelectCommon type="custom" placeholder="State" options={states} />
</div>
<div className={s.inputPostalCode}>

2
src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
View File

@@ -46,7 +46,7 @@ const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
/>
<Inputcommon type="text" placeholder="City" ref={cityRef} />
<div className={s.line}>
<SelectCommon option={option} type="custom" size="large">State</SelectCommon>
<SelectCommon options={option} type="custom" size="large">State</SelectCommon>
<Inputcommon type="text" placeholder="Zip Code" ref={codeRef} />
</div>
<Inputcommon

10
src/components/modules/home/FreshProducts/FreshProducts.tsx
View File

@@ -2,21 +2,13 @@ import { ProductCard } from '@commerce/types/product'
import { Collection } from '@framework/schema'
import React, { useMemo } from 'react'
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils'
import { CollectionCarcousel } from '..'
interface FreshProductsProps {
data: ProductCard[]
collections: Collection[]
}
const getCategoryNameFromCollectionId = (colelctions: Collection[], collectionId?: string ) => {
if (!collectionId) {
return ''
}
const collection = colelctions.find(item => item.id === collectionId)
return collection?.name || ''
}
const FreshProducts = ({ data, collections }: FreshProductsProps) => {
const dataWithCategory = useMemo(() => {
return data.map(item => {

29
src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
View File

@@ -1,13 +1,34 @@
import React from 'react';
import { ProductCard } from '@commerce/types/product';
import { Collection } from '@framework/schema';
import React, { useMemo } from 'react';
import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils';
interface Props {
data: ProductCard[]
collections: Collection[]
}
const ReleventProducts = ({ data, collections }: Props) => {
const dataWithCategoryName = useMemo(() => {
return data.map(item => {
return {
...item,
collection: getCategoryNameFromCollectionId(collections, item.collectionIds ? item.collectionIds[0] : undefined)
}
})
}, [data, collections])
if (data.length === 0) {
return null
}
const ReleventProducts = () => {
return (
<ListProductWithInfo
title="Relevant Products"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
data={PRODUCT_DATA_TEST}
data={dataWithCategoryName}
/>
);
};

73
src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
View File

@@ -13,62 +13,52 @@
@screen md {
@apply flex;
}
.categories{
padding-right: 2.4rem;
@apply hidden;
@screen md {
@apply block;
}
@screen xl{
@apply block;
width:25%;
}
}
.list{
@apply w-full;
.top {
.left {
@apply flex justify-between items-center;
}
.iconFilter {
@apply relative;
&:focus {
outline: none;
filter: brightness(1.05);
}
&:focus-visible {
outline: 2px solid var(--text-active);
}
.dot {
@apply absolute;
top: -0.08rem;
right: -0.2rem;
background-color: var(--negative);
width: 1.2rem;
height: 1.2rem;
border-radius: 1.2rem;
}
}
@screen md {
@apply flex justify-between flex-wrap w-full;
margin: 1rem 0;
}
@screen xl {
width:75%;
}
.inner{
@screen md {
@apply flex flex-col items-center justify-center;
}
.boxItem {
@screen md {
@apply flex justify-between flex-wrap;
margin: 1rem 0;
}
.item {
@screen md {
width: calc(97% / 2);
margin-top:1rem;
}
@screen lg{
width: calc(97% / 3);
margin-top:1rem;
}
.iconFilter {
@apply hidden;
}
}
}
.boxSelect{
@apply w-auto;
// padding: 2.5rem 0;
display: none;
@screen xl {
@screen md {
@apply block;
width: auto;
padding:0;
margin-top: 1rem;
}
.categorySelectCate{
@screen xl {
@apply hidden;
}
}
label {
@apply font-bold topline ;
color:var(--text-active);
@@ -76,9 +66,6 @@
@apply hidden;
}
}
.select{
margin-top: 1rem;
}
}
}

128
src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
View File

@@ -1,12 +1,25 @@
import React from 'react'
import { HeadingCommon, ProductList, SelectCommon } from 'src/components/common'
import { ProductCard } from '@commerce/types/product'
import { Collection, Facet, FacetValue, QuerySearchArgs } from '@framework/schema'
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
import { HeadingCommon, ListProductCardSkeleton, ProductList } from 'src/components/common'
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'
import { BRAND, CATEGORY, FEATURED} from 'src/utils/constanst.utils'
import { PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data'
import { useProductFilter } from 'src/components/contexts'
import { useSearchProducts } from 'src/components/hooks/product'
import { IconFilter } from 'src/components/icons'
import { DEFAULT_PAGE_SIZE, QUERY_KEY, QUERY_SPLIT_SEPERATOR, ROUTE } from 'src/utils/constanst.utils'
import { getFacetIdsFromCodes, getPageFromQuery, getProductSortParamFromQuery } from 'src/utils/funtion.utils'
import s from './ProductListFilter.module.scss'
import ProductsMenuNavigationTablet from './ProductsMenuNavigationTablet/ProductsMenuNavigationTablet'
import ProductSort from './ProductSort/ProductSort'
interface ProductListFilterProps {}
interface ProductListFilterProps {
facets: Facet[]
collections: Collection[]
products: ProductCard[]
total: number
}
const BREADCRUMB = [
{
@@ -14,49 +27,98 @@ const BREADCRUMB = [
link: `#`,
},
]
const OPTIONSLECT = [
{
name: 'Most Viewed',
value: 'most-viewed',
},
{
name: 'Lastest Products',
value: 'lastest-products',
},
{
name: 'Recent Products',
value: 'recent-products',
},
]
const onModalClose = () => {
const DEFAULT_SEARCH_ARGS = {
groupByProduct: true, take: DEFAULT_PAGE_SIZE
}
const ProductListFilter = (props: ProductListFilterProps) => {
const ProductListFilter = ({ facets, collections, products, total }: ProductListFilterProps) => {
const router = useRouter()
const { openProductFilter } = useProductFilter()
const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
const [optionQueryProduct, setOptionQueryProduct] = useState<QuerySearchArgs>({ input: DEFAULT_SEARCH_ARGS })
const { products: productSearchResult, totalItems, loading } = useSearchProducts(optionQueryProduct)
const [currentPage, setCurrentPage] = useState(0)
useEffect(() => {
const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string)
setCurrentPage(page)
}, [router.query])
const onPageChange = (page: number) => {
setCurrentPage(page)
router.push({
pathname: ROUTE.PRODUCTS,
query: {
...router.query,
[QUERY_KEY.PAGE]: page
}
},
undefined, { shallow: true }
)
}
useEffect(() => {
const query = { input: { ...DEFAULT_SEARCH_ARGS } } as QuerySearchArgs
const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string)
query.input.skip = page * DEFAULT_PAGE_SIZE
const sortQuery = router.query[QUERY_KEY.SORTBY] as string
if (sortQuery) {
query.input.sort = getProductSortParamFromQuery(sortQuery)
}
// collections
const categoryQuery = router.query[QUERY_KEY.CATEGORY] as string
if (categoryQuery) {
query.input.collectionSlug = categoryQuery
}
// facets
const facetsQuery = [router.query[QUERY_KEY.FEATURED] as string, router.query[QUERY_KEY.BRAND] as string].join(QUERY_SPLIT_SEPERATOR)
if (facetsQuery) {
const facetsValue = [] as FacetValue[]
facets.map((item: Facet) => {
facetsValue.push(...item.values)
return null
})
query.input.facetValueIds = getFacetIdsFromCodes(facetsValue, facetsQuery.split(QUERY_SPLIT_SEPERATOR))
}
setOptionQueryProduct(query)
setInitialQueryFlag(false)
}, [router.query, facets])
return (
<div className={s.warpper}>
<div className={s.breadcrumb}>
<BreadcrumbCommon crumbs={BREADCRUMB} />
</div>
<div className={s.main}>
<div className={s.categories}>
<MenuNavigation categories={CATEGORY} heading="Categories" />
<MenuNavigation categories={BRAND} heading="Brands" />
<MenuNavigation categories={FEATURED} heading="featured" />
</div>
<ProductsMenuNavigationTablet facets={facets} collections={collections} />
<div className={s.list}>
<div className={s.top}>
<div className={s.left}>
<HeadingCommon align="left">SPECIAL RECIPES</HeadingCommon>
<button className={s.iconFilter} onClick={openProductFilter}>
<IconFilter />
<div className={s.dot}></div>
</button>
</div>
<div className={s.boxSelect}>
<div className={s.categorySelectSort}>
<div className={s.select}>
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
<ProductSort />
</div>
</div>
</div>
<ProductList data={PRODUCT_DATA_TEST_PAGE} />
{
(!initialQueryFlag && loading && !productSearchResult) && <ListProductCardSkeleton count={DEFAULT_PAGE_SIZE} isWrap />
}
<ProductList data={initialQueryFlag ? products : (productSearchResult || [])} total={totalItems !== undefined ? totalItems : total} onPageChange={onPageChange} defaultCurrentPage={currentPage} />
</div>
</div>
</div>

40
src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx Normal file
View File

@@ -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<string>();
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 (
<SelectCommon
options={OPTIONS_SORT_PRODUCT}
placeholder="Sort By"
value={sortValue}
onChange={onSortChange}
/>
);
};
export default ProductSort;

12
src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss Normal file
View File

@@ -0,0 +1,12 @@
.productsMenuNavigationTablet {
@apply hidden;
@screen md {
@apply block;
padding-right: 2.4rem;
}
@screen xl {
@apply block;
width: 25%;
}
}

32
src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx Normal file
View File

@@ -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 (
<div className={s.productsMenuNavigationTablet}>
<MenuNavigation
heading="Categories"
categories={collections}
queryKey={QUERY_KEY.CATEGORY}
isSingleSelect={true} />
{
facets.map(item => <MenuNavigation
key={item.id}
queryKey={item.code}
categories={item.values}
heading={item.name} />)
}
</div>
)
}
export default ProductsMenuNavigationTablet

4
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
View File

@@ -189,13 +189,13 @@ const RecipesList = ({ data =recipe}:Props) => {
<div className={s.categorySelectCate}>
<label htmlFor="">Categories</label>
<div className={s.select}>
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
<SelectCommon options={CATEGORYSELECT} placeholder="Categories"/>
</div>
</div>
<div className={s.categorySelectSort}>
<label htmlFor="" >Sort By</label>
<div className={s.select}>
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
<SelectCommon options={OPTIONSLECT} placeholder="Sort By" />
</div>
</div>
</div>

2
src/styles/_base.scss
View File

@@ -4,7 +4,7 @@
:root {
--primary: #5b9a74;
--primary-light: #e3f2e9;
--primary-lightest: #effaf4;
--primary-lightest: #F1F8F4;
--info-dark: #00317a;
--info: #3468B7;

37
src/utils/constanst.utils.ts
View File

@@ -1,5 +1,7 @@
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
@@ -45,13 +47,23 @@ export const LOCAL_STORAGE_KEY = {
TOKEN: 'token'
}
export const QUERY_SPLIT_SEPERATOR = ','
export const QUERY_KEY = {
TAB: 'tab',
CATEGORY: 'category',
BRAND: 'brand',
FEATURED: 'feature',
FEATURED: 'featured',
SORTBY: 'sortby',
RECIPES: 'recipes'
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 {
@@ -113,10 +125,31 @@ export const BRAND = [
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 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',

73
src/utils/funtion.utils.ts
View File

@@ -1,12 +1,60 @@
import { Facet } from "@commerce/types/facet";
import { FacetValue } from './../../framework/vendure/schema.d';
import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT } from "./constanst.utils";
import { PromiseWithKey } from "./types.utils";
import { Collection, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, 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<T>(arr: Array<T>, value: T): Array<T> {
const index = arr.indexOf(value);
if (index > -1) {
@@ -58,6 +106,25 @@ export function getFacetNamesFromIds(facets: FacetValue[], ids?: string[]): stri
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)
}

5
src/utils/types.utils.ts
View File

@@ -46,6 +46,11 @@ export interface CheckOutForm {
export type MouseAndTouchEvent = MouseEvent | TouchEvent
export enum SortOrder {
Asc = 'ASC',
Desc = 'DESC',
}
export type filterContextType = {
visible: boolean;
open: () => void;