mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
merge: merge common
This commit is contained in:
unknown
@@ -1,24 +1,4 @@
|
||||
import type { GetStaticPropsContext } from 'next'
|
||||
import commerce from '@lib/api/commerce'
|
||||
import { Layout } from '@components/common'
|
||||
|
||||
export async function getStaticProps({
|
||||
preview,
|
||||
locale,
|
||||
locales,
|
||||
}: GetStaticPropsContext) {
|
||||
const config = { locale, locales }
|
||||
const { pages } = await commerce.getAllPages({ config, preview })
|
||||
const { categories, brands } = await commerce.getSiteInfo({ config, preview })
|
||||
return {
|
||||
props: {
|
||||
pages,
|
||||
categories,
|
||||
brands,
|
||||
},
|
||||
revalidate: 200,
|
||||
}
|
||||
}
|
||||
import { Layout } from "src/components/common"
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
import type {
|
||||
GetStaticPathsContext,
|
||||
GetStaticPropsContext,
|
||||
InferGetStaticPropsType,
|
||||
} from 'next'
|
||||
import commerce from '@lib/api/commerce'
|
||||
import { Text } from '@components/ui'
|
||||
import { Layout } from '@components/common'
|
||||
import getSlug from '@lib/get-slug'
|
||||
import { missingLocaleInPages } from '@lib/usage-warns'
|
||||
import type { Page } from '@commerce/types/page'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export async function getStaticProps({
|
||||
preview,
|
||||
params,
|
||||
locale,
|
||||
locales,
|
||||
}: GetStaticPropsContext<{ pages: string[] }>) {
|
||||
const config = { locale, locales }
|
||||
const pagesPromise = commerce.getAllPages({ config, preview })
|
||||
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
|
||||
const { pages } = await pagesPromise
|
||||
const { categories } = await siteInfoPromise
|
||||
const path = params?.pages.join('/')
|
||||
const slug = locale ? `${locale}/${path}` : path
|
||||
const pageItem = pages.find((p: Page) =>
|
||||
p.url ? getSlug(p.url) === slug : false
|
||||
)
|
||||
const data =
|
||||
pageItem &&
|
||||
(await commerce.getPage({
|
||||
variables: { id: pageItem.id! },
|
||||
config,
|
||||
preview,
|
||||
}))
|
||||
|
||||
const page = data?.page
|
||||
|
||||
if (!page) {
|
||||
// We throw to make sure this fails at build time as this is never expected to happen
|
||||
throw new Error(`Page with slug '${slug}' not found`)
|
||||
}
|
||||
|
||||
return {
|
||||
props: { pages, page, categories },
|
||||
revalidate: 60 * 60, // Every hour
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
|
||||
const config = { locales }
|
||||
const { pages }: { pages: Page[] } = await commerce.getAllPages({ config })
|
||||
const [invalidPaths, log] = missingLocaleInPages()
|
||||
const paths = pages
|
||||
.map((page) => page.url)
|
||||
.filter((url) => {
|
||||
if (!url || !locales) return url
|
||||
// If there are locales, only include the pages that include one of the available locales
|
||||
if (locales.includes(getSlug(url).split('/')[0])) return url
|
||||
|
||||
invalidPaths.push(url)
|
||||
})
|
||||
log()
|
||||
|
||||
return {
|
||||
paths,
|
||||
fallback: 'blocking',
|
||||
}
|
||||
}
|
||||
|
||||
export default function Pages({
|
||||
page,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
const router = useRouter()
|
||||
|
||||
return router.isFallback ? (
|
||||
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
|
||||
) : (
|
||||
<div className="max-w-2xl mx-8 sm:mx-auto py-20">
|
||||
{page?.body && <Text html={page.body} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Pages.Layout = Layout
|
||||
@@ -1,50 +0,0 @@
|
||||
import type { GetStaticPropsContext } from 'next'
|
||||
import commerce from '@lib/api/commerce'
|
||||
import { Layout } from '@components/common'
|
||||
// import useCart from '@framework/cart/use-cart'
|
||||
// import usePrice from '@framework/product/use-price'
|
||||
// import { Button, Text } from '@components/ui'
|
||||
// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
|
||||
// import { CartItem } from '@components/cart'
|
||||
|
||||
export async function getStaticProps({
|
||||
preview,
|
||||
locale,
|
||||
locales,
|
||||
}: GetStaticPropsContext) {
|
||||
const config = { locale, locales }
|
||||
const pagesPromise = commerce.getAllPages({ config, preview })
|
||||
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
|
||||
const { pages } = await pagesPromise
|
||||
const { categories } = await siteInfoPromise
|
||||
return {
|
||||
props: { pages, categories },
|
||||
}
|
||||
}
|
||||
|
||||
export default function Cart() {
|
||||
// const error = null
|
||||
// const success = null
|
||||
// const { data, isLoading, isEmpty } = useCart()
|
||||
|
||||
// const { price: subTotal } = usePrice(
|
||||
// data && {
|
||||
// amount: Number(data.subtotalPrice),
|
||||
// currencyCode: data.currency.code,
|
||||
// }
|
||||
// )
|
||||
// const { price: total } = usePrice(
|
||||
// data && {
|
||||
// amount: Number(data.totalPrice),
|
||||
// currencyCode: data.currency.code,
|
||||
// }
|
||||
// )
|
||||
|
||||
return (
|
||||
<div>
|
||||
This is cart page
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Cart.Layout = Layout
|
||||
13
pages/demo.tsx
Normal file
13
pages/demo.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Layout } from 'src/components/common';
|
||||
|
||||
|
||||
|
||||
export default function Demo() {
|
||||
return <>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
|
||||
</>
|
||||
}
|
||||
|
||||
Demo.Layout = Layout
|
||||
@@ -1,33 +1,19 @@
|
||||
|
||||
import { CardBlog, CollapseCommon, Layout, RelevantBlogPosts } from 'src/components/common';
|
||||
import { Layout } from 'src/components/common';
|
||||
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
|
||||
import {SelectCommon} from 'src/components/common'
|
||||
import card from "../public/assets/images/card.png"
|
||||
import { DeliveryAndPolicyContent } from 'src/components/modules/delivery-policy';
|
||||
|
||||
const CONTENT = [
|
||||
"When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
|
||||
"Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
|
||||
"This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
|
||||
]
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* <HomeBanner />
|
||||
<HomeBanner/>
|
||||
<HomeBanner />
|
||||
<HomeFeature />
|
||||
<HomeCategories />
|
||||
<HomeCollection />
|
||||
<HomeVideo />
|
||||
<HomeCTA /> */}
|
||||
{/* <HomeRecipe />
|
||||
<HomeSubscribe /> */}
|
||||
{/* <HomeRecipe /> */}
|
||||
{/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
|
||||
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
|
||||
<DeliveryAndPolicyContent title="DELIVERY AND POLICY" content={CONTENT} date="APRIL 30, 2021" />
|
||||
<RelevantBlogPosts />
|
||||
{/* todo: uncomment */}
|
||||
<HomeCTA />
|
||||
<HomeRecipe />
|
||||
<HomeSubscribe />
|
||||
|
||||
{/* // todo: uncomment */}
|
||||
{/* <ModalCreateUserInfo/> */}
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,76 +1,16 @@
|
||||
import { Layout } from '@components/common'
|
||||
import commerce from '@lib/api/commerce'
|
||||
import type {
|
||||
GetStaticPathsContext,
|
||||
GetStaticPropsContext,
|
||||
InferGetStaticPropsType
|
||||
} from 'next'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export async function getStaticProps({
|
||||
params,
|
||||
locale,
|
||||
locales,
|
||||
preview,
|
||||
}: GetStaticPropsContext<{ slug: string }>) {
|
||||
const config = { locale, locales }
|
||||
const pagesPromise = commerce.getAllPages({ config, preview })
|
||||
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
|
||||
const productPromise = commerce.getProduct({
|
||||
variables: { slug: params!.slug },
|
||||
config,
|
||||
preview,
|
||||
})
|
||||
import { Layout, RecipeDetail } from 'src/components/common'
|
||||
import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
|
||||
import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
|
||||
|
||||
const allProductsPromise = commerce.getAllProducts({
|
||||
variables: { first: 4 },
|
||||
config,
|
||||
preview,
|
||||
})
|
||||
const { pages } = await pagesPromise
|
||||
const { categories } = await siteInfoPromise
|
||||
const { product } = await productPromise
|
||||
const { products: relatedProducts } = await allProductsPromise
|
||||
|
||||
if (!product) {
|
||||
throw new Error(`Product with slug '${params!.slug}' not found`)
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
pages,
|
||||
product,
|
||||
relatedProducts,
|
||||
categories,
|
||||
},
|
||||
revalidate: 200,
|
||||
}
|
||||
}
|
||||
|
||||
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',
|
||||
}
|
||||
}
|
||||
|
||||
export default function Slug({
|
||||
product,
|
||||
relatedProducts,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
const router = useRouter()
|
||||
|
||||
return <div>This is product page</div>
|
||||
export default function Slug() {
|
||||
return <>
|
||||
<ProductInfoDetail />
|
||||
<RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
|
||||
<RecommendedRecipes data={RECIPE_DATA_TEST} />
|
||||
<ReleventProducts />
|
||||
<ViewedProducts />
|
||||
</>
|
||||
}
|
||||
|
||||
Slug.Layout = Layout
|
||||
|
||||
130
pages/test.tsx
130
pages/test.tsx
@@ -1,101 +1,8 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
ButtonCommon,
|
||||
Layout,
|
||||
ModalCommon,
|
||||
ProductCarousel,
|
||||
Layout, ModalInfo
|
||||
} from 'src/components/common'
|
||||
import { CollectionCarcousel } from 'src/components/modules/home'
|
||||
import image5 from '../public/assets/images/image5.png'
|
||||
import image6 from '../public/assets/images/image6.png'
|
||||
import image7 from '../public/assets/images/image7.png'
|
||||
import image8 from '../public/assets/images/image8.png'
|
||||
const dataTest = [
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Carrot',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image7.src,
|
||||
},
|
||||
{
|
||||
name: 'Salad',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image8.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Carrot',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image7.src,
|
||||
},
|
||||
{
|
||||
name: 'Salad',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image8.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
]
|
||||
export default function Test() {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const onClose = () => {
|
||||
@@ -107,38 +14,9 @@ export default function Test() {
|
||||
return (
|
||||
<>
|
||||
<ButtonCommon onClick={onOpen}>open</ButtonCommon>
|
||||
<ModalCommon visible={visible} onClose={onClose}>
|
||||
<div className="">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
|
||||
officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod
|
||||
itaque, officia magni molestias! Architecto deserunt soluta laborum
|
||||
commodi nesciunt delectus similique temporibus distinctio? Facere
|
||||
eaque minima enim modi magni, laudantium, animi mollitia beatae
|
||||
repudiandae maxime labore error nesciunt, nisi est?
|
||||
</div>
|
||||
</ModalCommon>
|
||||
<ProductCarousel
|
||||
data={dataTest}
|
||||
itemKey="product-2"
|
||||
isDot
|
||||
option={{
|
||||
slidesPerView: 1,
|
||||
breakpoints: {
|
||||
'(min-width: 640px)': {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
'(min-width: 768px)': {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
'(min-width: 1024px)': {
|
||||
slidesPerView: 4.5,
|
||||
},
|
||||
'(min-width: 1280px)': {
|
||||
slidesPerView: 5.5,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ModalInfo visible={visible} onClose={onClose}>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
|
||||
</ModalInfo>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user