🎨 styles: product detail page

:%s

pages/[...pages].tsx

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

pages/cart.tsx

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

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss

@@ -8,7 +8,6 @@
     }
     .img {
         width: fit-content;
-        margin: auto;
         margin-top: 0;
 
         @screen sm-only {

src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss

@@ -1,9 +1,9 @@
 @import "../../../../../styles/utilities";
 
 .recipeIngredient {
-    margin: 6rem auto;
+    padding: 6rem 0;
     @screen md {
-        margin: 5.6rem auto;
+        padding: 5.6rem 0;
     }
     .top {
         @apply flex justify-between items-center spacing-horizontal;

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss

@@ -2,8 +2,9 @@
 
 .productInfoDetail {
     @apply spacing-horizontal;
-    margin: 0 auto 4rem;
+    padding-bottom: 4rem;
     @screen md {
         @apply flex;
+        padding-bottom: 5.6rem;
     }
 }

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx

@@ -29,13 +29,14 @@ const ProductInfo = ({ }: Props) => {
             <div className={s.actions}>
                 <QuanittyInput />
                 <div className={s.bottom}>
-                    <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+                    <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.PREORDER}</ButtonCommon>
+                    {/* <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
 
                     <ButtonCommon size='large' type='light'>
                         <span className={s.buttonWithIcon}>
                             <IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
                         </span>
-                    </ButtonCommon>
+                    </ButtonCommon> */}
                 </div>
             </div>
         </section >

src/utils/language.utils.ts

@@ -2,7 +2,8 @@ export const LANGUAGE = {
     BUTTON_LABEL: {
         BUY_NOW: 'Buy now',
         SHOP_NOW: 'Shop now',
-        ADD_TO_CARD: 'Add to Cart'
+        ADD_TO_CARD: 'Add to Cart',
+        PREORDER: 'Pre-Order Now',
     },
     PLACE_HOLDER: {
         SEARCH: 'Search',