chore: comment almost everything, build

This commit is contained in:
Reza Babaei
2021-09-18 22:09:54 +03:00
committed by Reza Babaei
parent 0e344461f4
commit 099be721b5
60 changed files with 850 additions and 972 deletions

View File

@@ -1,6 +1,6 @@
import { FC, useEffect, useState, useCallback } from 'react'
import { Logo, Button, Input } from '@components/ui'
import useLogin from '@framework/auth/use-login'
// import useLogin from '@framework/auth/use-login'
import { useUI } from '@components/ui/context'
import { validate } from 'email-validator'
@@ -16,7 +16,7 @@ const LoginView: FC<Props> = () => {
const [disabled, setDisabled] = useState(false)
const { setModalView, closeModal } = useUI()
const login = useLogin()
// const login = useLogin()
const handleLogin = async (e: React.SyntheticEvent<EventTarget>) => {
e.preventDefault()
@@ -29,14 +29,14 @@ const LoginView: FC<Props> = () => {
try {
setLoading(true)
setMessage('')
await login({
email,
password,
})
// await login({
// email,
// password,
// })
setLoading(false)
closeModal()
} catch ({ errors }) {
setMessage(errors[0].message)
// setMessage(errors[0].message)
setLoading(false)
setDisabled(false)
}
@@ -59,17 +59,17 @@ const LoginView: FC<Props> = () => {
return (
<form
onSubmit={handleLogin}
className="w-80 flex flex-col justify-between p-3"
className="flex flex-col justify-between p-3 w-80"
>
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>
<div className="flex flex-col space-y-3">
{message && (
<div className="text-red border border-red p-3">
<div className="p-3 border text-red border-red">
{message}. Did you {` `}
<a
className="text-accent-9 inline font-bold hover:underline cursor-pointer"
className="inline font-bold cursor-pointer text-accent-9 hover:underline"
onClick={() => setModalView('FORGOT_VIEW')}
>
forgot your password?
@@ -87,11 +87,11 @@ const LoginView: FC<Props> = () => {
>
Log In
</Button>
<div className="pt-1 text-center text-sm">
<div className="pt-1 text-sm text-center">
<span className="text-accent-7">Don't have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"
className="font-bold cursor-pointer text-accent-9 hover:underline"
onClick={() => setModalView('SIGNUP_VIEW')}
>
Sign Up

View File

@@ -3,7 +3,7 @@ import { validate } from 'email-validator'
import { Info } from '@components/icons'
import { useUI } from '@components/ui/context'
import { Logo, Button, Input } from '@components/ui'
import useSignup from '@framework/auth/use-signup'
// import useSignup from '@framework/auth/use-signup'
interface Props {}
@@ -18,7 +18,7 @@ const SignUpView: FC<Props> = () => {
const [dirty, setDirty] = useState(false)
const [disabled, setDisabled] = useState(false)
const signup = useSignup()
// const signup = useSignup()
const { setModalView, closeModal } = useUI()
const handleSignup = async (e: React.SyntheticEvent<EventTarget>) => {
@@ -32,12 +32,12 @@ const SignUpView: FC<Props> = () => {
try {
setLoading(true)
setMessage('')
await signup({
email,
firstName,
lastName,
password,
})
// await signup({
// email,
// firstName,
// lastName,
// password,
// })
setLoading(false)
closeModal()
} catch ({ errors }) {
@@ -63,14 +63,14 @@ const SignUpView: FC<Props> = () => {
return (
<form
onSubmit={handleSignup}
className="w-80 flex flex-col justify-between p-3"
className="flex flex-col justify-between p-3 w-80"
>
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>
<div className="flex flex-col space-y-4">
{message && (
<div className="text-red border border-red p-3">{message}</div>
<div className="p-3 border text-red border-red">{message}</div>
)}
<Input placeholder="First Name" onChange={setFirstName} />
<Input placeholder="Last Name" onChange={setLastName} />
@@ -80,12 +80,12 @@ const SignUpView: FC<Props> = () => {
<span className="inline-block align-middle ">
<Info width="15" height="15" />
</span>{' '}
<span className="leading-6 text-sm">
<span className="text-sm leading-6">
<strong>Info</strong>: Passwords must be longer than 7 chars and
include numbers.{' '}
</span>
</span>
<div className="pt-2 w-full flex flex-col">
<div className="flex flex-col w-full pt-2">
<Button
variant="slim"
type="submit"
@@ -96,11 +96,11 @@ const SignUpView: FC<Props> = () => {
</Button>
</div>
<span className="pt-1 text-center text-sm">
<span className="pt-1 text-sm text-center">
<span className="text-accent-7">Do you have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"
className="font-bold cursor-pointer text-accent-9 hover:underline"
onClick={() => setModalView('LOGIN_VIEW')}
>
Log In

View File

@@ -6,9 +6,9 @@ import s from './CartItem.module.css'
import { Trash, Plus, Minus, Cross } from '@components/icons'
import { useUI } from '@components/ui/context'
import type { LineItem } from '@commerce/types/cart'
import usePrice from '@framework/product/use-price'
import useUpdateItem from '@framework/cart/use-update-item'
import useRemoveItem from '@framework/cart/use-remove-item'
// import usePrice from '@framework/product/use-price'
// import useUpdateItem from '@framework/cart/use-update-item'
// import useRemoveItem from '@framework/cart/use-remove-item'
import Quantity from '@components/ui/Quantity'
type ItemOption = {
@@ -31,36 +31,36 @@ const CartItem = ({
const { closeSidebarIfPresent } = useUI()
const [removing, setRemoving] = useState(false)
const [quantity, setQuantity] = useState<number>(item.quantity)
const removeItem = useRemoveItem()
const updateItem = useUpdateItem({ item })
// const removeItem = useRemoveItem()
// const updateItem = useUpdateItem({ item })
const { price } = usePrice({
amount: item.variant.price * item.quantity,
baseAmount: item.variant.listPrice * item.quantity,
currencyCode,
})
// const { price } = usePrice({
// amount: item.variant.price * item.quantity,
// baseAmount: item.variant.listPrice * item.quantity,
// currencyCode,
// })
const handleChange = async ({
target: { value },
}: ChangeEvent<HTMLInputElement>) => {
setQuantity(Number(value))
await updateItem({ quantity: Number(value) })
}
// const handleChange = async ({
// target: { value },
// }: ChangeEvent<HTMLInputElement>) => {
// setQuantity(Number(value))
// await updateItem({ quantity: Number(value) })
// }
const increaseQuantity = async (n = 1) => {
const val = Number(quantity) + n
setQuantity(val)
await updateItem({ quantity: val })
}
// const increaseQuantity = async (n = 1) => {
// const val = Number(quantity) + n
// setQuantity(val)
// await updateItem({ quantity: val })
// }
const handleRemove = async () => {
setRemoving(true)
try {
await removeItem(item)
} catch (error) {
setRemoving(false)
}
}
// const handleRemove = async () => {
// setRemoving(true)
// try {
// await removeItem(item)
// } catch (error) {
// setRemoving(false)
// }
// }
// TODO: Add a type for this
const options = (item as any).options
@@ -82,8 +82,8 @@ const CartItem = ({
})}
{...rest}
>
<div className="flex flex-row space-x-4 py-4">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
<div className="flex flex-row py-4 space-x-4">
<div className="relative z-0 w-16 h-16 overflow-hidden cursor-pointer bg-violet">
<Link href={`/product/${item.path}`}>
<a>
<Image
@@ -98,7 +98,7 @@ const CartItem = ({
</a>
</Link>
</div>
<div className="flex-1 flex flex-col text-base">
<div className="flex flex-col flex-1 text-base">
<Link href={`/product/${item.path}`}>
<a>
<span
@@ -114,18 +114,18 @@ const CartItem = ({
{options.map((option: ItemOption, i: number) => (
<div
key={`${item.id}-${option.name}`}
className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
className="inline-flex items-center justify-center text-sm font-semibold text-accent-7"
>
{option.name}
{option.name === 'Color' ? (
<span
className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
className="inline-flex items-center justify-center w-5 h-5 p-1 mx-2 overflow-hidden bg-transparent border rounded-full text-accent-9"
style={{
backgroundColor: `${option.value}`,
}}
></span>
) : (
<span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
<span className="inline-flex items-center justify-center h-5 p-1 mx-2 overflow-hidden bg-transparent border rounded-full text-accent-9">
{option.value}
</span>
)}
@@ -139,10 +139,10 @@ const CartItem = ({
)}
</div>
<div className="flex flex-col justify-between space-y-2 text-sm">
<span>{price}</span>
{/* <span>{price}</span> */}
</div>
</div>
{variant === 'default' && (
{/* {variant === 'default' && (
<Quantity
value={quantity}
handleRemove={handleRemove}
@@ -150,7 +150,7 @@ const CartItem = ({
increase={() => increaseQuantity(1)}
decrease={() => increaseQuantity(-1)}
/>
)}
)} */}
</li>
)
}

View File

@@ -6,54 +6,54 @@ import CartItem from '../CartItem'
import { Button, Text } from '@components/ui'
import { useUI } from '@components/ui/context'
import { Bag, Cross, Check } from '@components/icons'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
// import useCart from '@framework/cart/use-cart'
// import usePrice from '@framework/product/use-price'
import SidebarLayout from '@components/common/SidebarLayout'
const CartSidebarView: FC = () => {
const { closeSidebar, setSidebarView } = useUI()
const { data, isLoading, isEmpty } = useCart()
// 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,
}
)
// 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,
// }
// )
const handleClose = () => closeSidebar()
const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
// const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
const error = null
const success = null
// const error = null
// const success = null
return (
<SidebarLayout
className={cn({
[s.empty]: error || success || isLoading || isEmpty,
})}
// className={cn({
// [s.empty]: error || success || isLoading || isEmpty,
// })}
handleClose={handleClose}
>
{isLoading || isEmpty ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
{/* {isLoading || isEmpty ? (
<div className="flex flex-col items-center justify-center flex-1 px-4">
<span className="flex items-center justify-center w-16 h-16 p-12 border border-dashed rounded-full border-primary bg-secondary text-secondary">
<Bag className="absolute" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty
</h2>
<p className="text-accent-3 px-10 text-center pt-2">
<p className="px-10 pt-2 text-center text-accent-3">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
) : error ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
<div className="flex flex-col items-center justify-center flex-1 px-4">
<span className="flex items-center justify-center w-16 h-16 border border-white rounded-full">
<Cross width={24} height={24} />
</span>
<h2 className="pt-6 text-xl font-light text-center">
@@ -62,8 +62,8 @@ const CartSidebarView: FC = () => {
</h2>
</div>
) : success ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
<div className="flex flex-col items-center justify-center flex-1 px-4">
<span className="flex items-center justify-center w-16 h-16 border border-white rounded-full">
<Check />
</span>
<h2 className="pt-6 text-xl font-light text-center">
@@ -72,7 +72,7 @@ const CartSidebarView: FC = () => {
</div>
) : (
<>
<div className="px-4 sm:px-6 flex-1">
<div className="flex-1 px-4 sm:px-6">
<Link href="/cart">
<a>
<Text variant="sectionHeading" onClick={handleClose}>
@@ -91,7 +91,7 @@ const CartSidebarView: FC = () => {
</ul>
</div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
<div className="sticky bottom-0 left-0 right-0 z-20 flex-shrink-0 w-full px-6 py-6 text-sm border-t sm:px-6 bg-accent-0">
<ul className="pb-2">
<li className="flex justify-between py-1">
<span>Subtotal</span>
@@ -106,7 +106,7 @@ const CartSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
<div className="flex justify-between py-3 mb-2 font-bold border-t border-accent-2">
<span>Total</span>
<span>{total}</span>
</div>
@@ -123,7 +123,7 @@ const CartSidebarView: FC = () => {
</div>
</div>
</>
)}
)} */}
</SidebarLayout>
)
}

View File

@@ -4,80 +4,80 @@ import CartItem from '@components/cart/CartItem'
import { Button, Text } from '@components/ui'
import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
import useCheckout from '@framework/checkout/use-checkout'
// import useCart from '@framework/cart/use-cart'
// import usePrice from '@framework/product/use-price'
// import useCheckout from '@framework/checkout/use-checkout'
import ShippingWidget from '../ShippingWidget'
import PaymentWidget from '../PaymentWidget'
import s from './CheckoutSidebarView.module.css'
const CheckoutSidebarView: FC = () => {
const { setSidebarView, closeSidebar } = useUI()
const { data: cartData } = useCart()
const { data: checkoutData, submit: onCheckout } = useCheckout()
// const { data: cartData } = useCart()
// const { data: checkoutData, submit: onCheckout } = useCheckout()
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
event.preventDefault()
// async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
// event.preventDefault()
await onCheckout()
// await onCheckout()
closeSidebar()
}
// closeSidebar()
// }
const { price: subTotal } = usePrice(
cartData && {
amount: Number(cartData.subtotalPrice),
currencyCode: cartData.currency.code,
}
)
const { price: total } = usePrice(
cartData && {
amount: Number(cartData.totalPrice),
currencyCode: cartData.currency.code,
}
)
// const { price: subTotal } = usePrice(
// cartData && {
// amount: Number(cartData.subtotalPrice),
// currencyCode: cartData.currency.code,
// }
// )
// const { price: total } = usePrice(
// cartData && {
// amount: Number(cartData.totalPrice),
// currencyCode: cartData.currency.code,
// }
// )
return (
<SidebarLayout
className={s.root}
handleBack={() => setSidebarView('CART_VIEW')}
>
<div className="px-4 sm:px-6 flex-1">
<div className="flex-1 px-4 sm:px-6">
<Link href="/cart">
<a>
<Text variant="sectionHeading">Checkout</Text>
</a>
</Link>
<PaymentWidget
{/* <PaymentWidget
isValid={checkoutData?.hasPayment}
onClick={() => setSidebarView('PAYMENT_VIEW')}
/>
<ShippingWidget
isValid={checkoutData?.hasShipping}
onClick={() => setSidebarView('SHIPPING_VIEW')}
/>
/> */}
<ul className={s.lineItemsList}>
{cartData!.lineItems.map((item: any) => (
{/* {cartData!.lineItems.map((item: any) => (
<CartItem
key={item.id}
item={item}
currencyCode={cartData!.currency.code}
variant="display"
/>
))}
))} */}
</ul>
</div>
<form
onSubmit={handleSubmit}
className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm"
// onSubmit={handleSubmit}
className="sticky bottom-0 left-0 right-0 z-20 flex-shrink-0 w-full px-6 py-6 text-sm border-t sm:px-6 bg-accent-0"
>
<ul className="pb-2">
<li className="flex justify-between py-1">
<span>Subtotal</span>
<span>{subTotal}</span>
{/* <span>{subTotal}</span> */}
</li>
<li className="flex justify-between py-1">
<span>Taxes</span>
@@ -88,16 +88,16 @@ const CheckoutSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
<div className="flex justify-between py-3 mb-2 font-bold border-t border-accent-2">
<span>Total</span>
<span>{total}</span>
{/* <span>{total}</span> */}
</div>
<div>
{/* Once data is correcly filled */}
<Button
type="submit"
width="100%"
disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
// disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
>
Confirm Purchase
</Button>

View File

@@ -8,7 +8,7 @@ import { Avatar } from '@components/common'
import { Moon, Sun } from '@components/icons'
import { useUI } from '@components/ui/context'
import ClickOutside from '@lib/click-outside'
import useLogout from '@framework/auth/use-logout'
// import useLogout from '@framework/auth/use-logout'
import {
disableBodyScroll,
@@ -36,7 +36,7 @@ const LINKS = [
]
const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
const logout = useLogout()
// const logout = useLogout()
const { pathname } = useRouter()
const { theme, setTheme } = useTheme()
const [display, setDisplay] = useState(false)
@@ -110,7 +110,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
<li>
<a
className={cn(s.link, 'border-t border-accent-2 mt-4')}
onClick={() => logout()}
// onClick={() => logout()}
>
Logout
</a>

View File

@@ -2,8 +2,8 @@ import { FC } from 'react'
import Link from 'next/link'
import cn from 'classnames'
import type { LineItem } from '@commerce/types/cart'
import useCart from '@framework/cart/use-cart'
import useCustomer from '@framework/customer/use-customer'
// import useCart from '@framework/cart/use-cart'
// import useCustomer from '@framework/customer/use-customer'
import { Avatar } from '@components/common'
import { Heart, Bag } from '@components/icons'
import { useUI } from '@components/ui/context'
@@ -19,7 +19,7 @@ const countItem = (count: number, item: LineItem) => count + item.quantity
const UserNav: FC<Props> = ({ className }) => {
// const { data } = useCart()
const { data: customer } = useCustomer()
// const { data: customer } = useCustomer()
const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
// const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
@@ -50,17 +50,17 @@ const UserNav: FC<Props> = ({ className }) => {
)}
{process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
<li className={s.item}>
{customer ? (
{/* {customer ? (
<DropdownMenu />
) : (
<button
className={s.avatarButton}
aria-label="Menu"
onClick={() => openModal()}
>
<Avatar />
</button>
)}
) : ( */}
<button
className={s.avatarButton}
aria-label="Menu"
onClick={() => openModal()}
>
<Avatar />
</button>
{/* )} */}
</li>
)}
</ul>

View File

@@ -5,7 +5,7 @@ import type { Product } from '@commerce/types/product'
import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton'
import usePrice from '@framework/product/use-price'
// import usePrice from '@framework/product/use-price'
import ProductTag from '../ProductTag'
interface Props {
@@ -25,11 +25,11 @@ const ProductCard: FC<Props> = ({
noNameTag = false,
variant = 'default',
}) => {
const { price } = usePrice({
amount: product.price.value,
baseAmount: product.price.retailPrice,
currencyCode: product.price.currencyCode!,
})
// const { price } = usePrice({
// amount: product.price.value,
// baseAmount: product.price.retailPrice,
// currencyCode: product.price.currencyCode!,
// })
const rootClassName = cn(
s.root,
@@ -74,7 +74,7 @@ const ProductCard: FC<Props> = ({
<span>{product.name}</span>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
{/* {`${price} ${product.price?.currencyCode}`} */}
</div>
</div>
)}
@@ -104,10 +104,10 @@ const ProductCard: FC<Props> = ({
variant={product.variants[0] as any}
/>
)}
<ProductTag
{/* <ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
/>
/> */}
<div className={s.imageContainer}>
{product?.images && (
<Image

View File

@@ -1,5 +1,5 @@
import s from './ProductSidebar.module.css'
import { useAddItem } from '@framework/cart'
// import { useAddItem } from '@framework/cart'
import { FC, useEffect, useState } from 'react'
import { ProductOptions } from '@components/product'
import type { Product } from '@commerce/types/product'
@@ -16,7 +16,7 @@ interface ProductSidebarProps {
}
const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
const addItem = useAddItem()
// const addItem = useAddItem()
const { openSidebar } = useUI()
const [loading, setLoading] = useState(false)
const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
@@ -29,11 +29,11 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
const addToCart = async () => {
setLoading(true)
try {
await addItem({
productId: String(product.id),
variantId: String(variant ? variant.id : product.variants[0].id),
})
openSidebar()
// await addItem({
// productId: String(product.id),
// variantId: String(variant ? variant.id : product.variants[0].id),
// })
// openSidebar()
setLoading(false)
} catch (err) {
setLoading(false)
@@ -48,12 +48,12 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
setSelectedOptions={setSelectedOptions}
/>
<Text
className="pb-4 break-words w-full max-w-xl"
className="w-full max-w-xl pb-4 break-words"
html={product.descriptionHtml || product.description}
/>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<Rating value={4} />
<div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
<div className="pr-1 text-sm font-medium text-accent-6">36 reviews</div>
</div>
<div>
{process.env.COMMERCE_CART_ENABLED && (

View File

@@ -4,7 +4,7 @@ import { NextSeo } from 'next-seo'
import s from './ProductView.module.css'
import { FC } from 'react'
import type { Product } from '@commerce/types/product'
import usePrice from '@framework/product/use-price'
// import usePrice from '@framework/product/use-price'
import { WishlistButton } from '@components/wishlist'
import { ProductSlider, ProductCard } from '@components/product'
import { Container, Text } from '@components/ui'
@@ -16,22 +16,22 @@ interface ProductViewProps {
}
const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
const { price } = usePrice({
amount: product.price.value,
baseAmount: product.price.retailPrice,
currencyCode: product.price.currencyCode!,
})
// const { price } = usePrice({
// amount: product.price.value,
// baseAmount: product.price.retailPrice,
// currencyCode: product.price.currencyCode!,
// })
return (
<>
<Container className="max-w-none w-full" clean>
<Container className="w-full max-w-none" clean>
<div className={cn(s.root, 'fit')}>
<div className={cn(s.main, 'fit')}>
<ProductTag
{/* <ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
fontSize={32}
/>
/> */}
<div className={s.sliderContainer}>
<ProductSlider key={product.id}>
{product.images.map((image, i) => (
@@ -61,13 +61,13 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
<ProductSidebar key={product.id} product={product} className={s.sidebar} />
</div>
<hr className="mt-7 border-accent-2" />
<section className="py-12 px-6 mb-10">
<section className="px-6 py-12 mb-10">
<Text variant="sectionHeading">Related Products</Text>
<div className={s.relatedProductsGrid}>
{relatedProducts.map((p) => (
<div
key={p.path}
className="animated fadeIn bg-accent-0 border border-accent-2"
className="border animated fadeIn bg-accent-0 border-accent-2"
>
<ProductCard
noNameTag

View File

@@ -9,7 +9,7 @@ import { ProductCard } from '@components/product'
import type { Product } from '@commerce/types/product'
import { Container, Skeleton } from '@components/ui'
import useSearch from '@framework/product/use-search'
// import useSearch from '@framework/product/use-search'
import getSlug from '@lib/get-slug'
import rangeMap from '@lib/range-map'
@@ -28,412 +28,415 @@ import {
useSearchMeta,
} from '@lib/search'
export default function Search({ categories, brands }: SearchPropsType) {
const [activeFilter, setActiveFilter] = useState('')
const [toggleFilter, setToggleFilter] = useState(false)
const router = useRouter()
const { asPath, locale } = router
const { q, sort } = router.query
// `q` can be included but because categories and designers can't be searched
// in the same way of products, it's better to ignore the search input if one
// of those is selected
const query = filterQuery({ sort })
const { pathname, category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find((cat: any) => cat.slug === category)
const activeBrand = brands.find(
(b: any) => getSlug(b.node.path) === `brands/${brand}`
)?.node
const { data } = useSearch({
search: typeof q === 'string' ? q : '',
categoryId: activeCategory?.id,
brandId: (activeBrand as any)?.entityId,
sort: typeof sort === 'string' ? sort : '',
locale,
})
const handleClick = (event: any, filter: string) => {
if (filter !== activeFilter) {
setToggleFilter(true)
} else {
setToggleFilter(!toggleFilter)
}
setActiveFilter(filter)
}
return (
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
{/* Categories */}
<div className="relative inline-block w-full">
<div className="lg:hidden">
<span className="rounded-md shadow-sm">
<button
type="button"
onClick={(e) => handleClick(e, 'categories')}
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
>
{activeCategory?.name
? `Category: ${activeCategory?.name}`
: 'All Categories'}
<svg
className="-mr-1 ml-2 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</span>
</div>
<div
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
activeFilter !== 'categories' || toggleFilter !== true
? 'hidden'
: ''
}`}
>
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<ul>
<li
className={cn(
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
underline: !activeCategory?.name,
}
)}
>
<Link
href={{ pathname: getCategoryPath('', brand), query }}
>
<a
onClick={(e) => handleClick(e, 'categories')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
All Categories
</a>
</Link>
</li>
{categories.map((cat: any) => (
<li
key={cat.path}
className={cn(
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
underline: activeCategory?.id === cat.id,
}
)}
>
<Link
href={{
pathname: getCategoryPath(cat.path, brand),
query,
}}
>
<a
onClick={(e) => handleClick(e, 'categories')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
{cat.name}
</a>
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
{/* Designs */}
<div className="relative inline-block w-full">
<div className="lg:hidden mt-3">
<span className="rounded-md shadow-sm">
<button
type="button"
onClick={(e) => handleClick(e, 'brands')}
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
>
{activeBrand?.name
? `Design: ${activeBrand?.name}`
: 'All Designs'}
<svg
className="-mr-1 ml-2 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</span>
</div>
<div
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
activeFilter !== 'brands' || toggleFilter !== true
? 'hidden'
: ''
}`}
>
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<ul>
<li
className={cn(
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
underline: !activeBrand?.name,
}
)}
>
<Link
href={{
pathname: getDesignerPath('', category),
query,
}}
>
<a
onClick={(e) => handleClick(e, 'brands')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
All Designers
</a>
</Link>
</li>
{brands.flatMap(({ node }: { node: any }) => (
<li
key={node.path}
className={cn(
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
// @ts-ignore Shopify - Fix this types
underline: activeBrand?.entityId === node.entityId,
}
)}
>
<Link
href={{
pathname: getDesignerPath(node.path, category),
query,
}}
>
<a
onClick={(e) => handleClick(e, 'brands')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
{node.name}
</a>
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
{/* Products */}
<div className="col-span-8 order-3 lg:order-none">
{(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
<span
className={cn('animated', {
fadeIn: data.found,
hidden: !data.found,
})}
>
Showing {data.products.length} results{' '}
{q && (
<>
for "<strong>{q}</strong>"
</>
)}
</span>
<span
className={cn('animated', {
fadeIn: !data.found,
hidden: data.found,
})}
>
{q ? (
<>
There are no products that match "<strong>{q}</strong>"
</>
) : (
<>
There are no products that match the selected category.
</>
)}
</span>
</>
) : q ? (
<>
Searching for: "<strong>{q}</strong>"
</>
) : (
<>Searching...</>
)}
</div>
)}
{data ? (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{data.products.map((product: Product) => (
<ProductCard
variant="simple"
key={product.path}
className="animated fadeIn"
product={product}
imgProps={{
width: 480,
height: 480,
}}
/>
))}
</div>
) : (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{rangeMap(12, (i) => (
<Skeleton key={i}>
<div className="w-60 h-60" />
</Skeleton>
))}
</div>
)}{' '}
</div>
{/* Sort */}
<div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
<div className="relative inline-block w-full">
<div className="lg:hidden">
<span className="rounded-md shadow-sm">
<button
type="button"
onClick={(e) => handleClick(e, 'sort')}
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
>
{sort ? SORT[sort as keyof typeof SORT] : 'Relevance'}
<svg
className="-mr-1 ml-2 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</span>
</div>
<div
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
}`}
>
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<ul>
<li
className={cn(
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
underline: !sort,
}
)}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<a
onClick={(e) => handleClick(e, 'sort')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
Relevance
</a>
</Link>
</li>
{Object.entries(SORT).map(([key, text]) => (
<li
key={key}
className={cn(
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{
underline: sort === key,
}
)}
>
<Link
href={{
pathname,
query: filterQuery({ q, sort: key }),
}}
>
<a
onClick={(e) => handleClick(e, 'sort')}
className={
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
}
>
{text}
</a>
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</Container>
)
export default function Search() {
return <div />
}
// export default function Search({ categories, brands }: SearchPropsType) {
// const [activeFilter, setActiveFilter] = useState('')
// const [toggleFilter, setToggleFilter] = useState(false)
// const router = useRouter()
// const { asPath, locale } = router
// const { q, sort } = router.query
// // `q` can be included but because categories and designers can't be searched
// // in the same way of products, it's better to ignore the search input if one
// // of those is selected
// const query = filterQuery({ sort })
// const { pathname, category, brand } = useSearchMeta(asPath)
// const activeCategory = categories.find((cat: any) => cat.slug === category)
// const activeBrand = brands.find(
// (b: any) => getSlug(b.node.path) === `brands/${brand}`
// )?.node
// const { data } = useSearch({
// search: typeof q === 'string' ? q : '',
// categoryId: activeCategory?.id,
// brandId: (activeBrand as any)?.entityId,
// sort: typeof sort === 'string' ? sort : '',
// locale,
// })
// const handleClick = (event: any, filter: string) => {
// if (filter !== activeFilter) {
// setToggleFilter(true)
// } else {
// setToggleFilter(!toggleFilter)
// }
// setActiveFilter(filter)
// }
// return (
// <Container>
// <div className="grid grid-cols-1 gap-4 mt-3 mb-20 lg:grid-cols-12">
// <div className="order-1 col-span-8 lg:col-span-2 lg:order-none">
// {/* Categories */}
// <div className="relative inline-block w-full">
// <div className="lg:hidden">
// <span className="rounded-md shadow-sm">
// <button
// type="button"
// onClick={(e) => handleClick(e, 'categories')}
// className="flex justify-between w-full px-4 py-3 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-sm border-accent-3 bg-accent-0 text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8"
// id="options-menu"
// aria-haspopup="true"
// aria-expanded="true"
// >
// {activeCategory?.name
// ? `Category: ${activeCategory?.name}`
// : 'All Categories'}
// <svg
// className="w-5 h-5 ml-2 -mr-1"
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 20 20"
// fill="currentColor"
// >
// <path
// fillRule="evenodd"
// d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
// clipRule="evenodd"
// />
// </svg>
// </button>
// </span>
// </div>
// <div
// className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
// activeFilter !== 'categories' || toggleFilter !== true
// ? 'hidden'
// : ''
// }`}
// >
// <div className="rounded-sm shadow-xs bg-accent-0 lg:bg-none lg:shadow-none">
// <div
// role="menu"
// aria-orientation="vertical"
// aria-labelledby="options-menu"
// >
// <ul>
// <li
// className={cn(
// 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// underline: !activeCategory?.name,
// }
// )}
// >
// <Link
// href={{ pathname: getCategoryPath('', brand), query }}
// >
// <a
// onClick={(e) => handleClick(e, 'categories')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// All Categories
// </a>
// </Link>
// </li>
// {categories.map((cat: any) => (
// <li
// key={cat.path}
// className={cn(
// 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// underline: activeCategory?.id === cat.id,
// }
// )}
// >
// <Link
// href={{
// pathname: getCategoryPath(cat.path, brand),
// query,
// }}
// >
// <a
// onClick={(e) => handleClick(e, 'categories')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// {cat.name}
// </a>
// </Link>
// </li>
// ))}
// </ul>
// </div>
// </div>
// </div>
// </div>
// {/* Designs */}
// <div className="relative inline-block w-full">
// <div className="mt-3 lg:hidden">
// <span className="rounded-md shadow-sm">
// <button
// type="button"
// onClick={(e) => handleClick(e, 'brands')}
// className="flex justify-between w-full px-4 py-3 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-sm border-accent-3 bg-accent-0 text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8"
// id="options-menu"
// aria-haspopup="true"
// aria-expanded="true"
// >
// {activeBrand?.name
// ? `Design: ${activeBrand?.name}`
// : 'All Designs'}
// <svg
// className="w-5 h-5 ml-2 -mr-1"
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 20 20"
// fill="currentColor"
// >
// <path
// fillRule="evenodd"
// d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
// clipRule="evenodd"
// />
// </svg>
// </button>
// </span>
// </div>
// <div
// className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
// activeFilter !== 'brands' || toggleFilter !== true
// ? 'hidden'
// : ''
// }`}
// >
// <div className="rounded-sm shadow-xs bg-accent-0 lg:bg-none lg:shadow-none">
// <div
// role="menu"
// aria-orientation="vertical"
// aria-labelledby="options-menu"
// >
// <ul>
// <li
// className={cn(
// 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// underline: !activeBrand?.name,
// }
// )}
// >
// <Link
// href={{
// pathname: getDesignerPath('', category),
// query,
// }}
// >
// <a
// onClick={(e) => handleClick(e, 'brands')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// All Designers
// </a>
// </Link>
// </li>
// {brands.flatMap(({ node }: { node: any }) => (
// <li
// key={node.path}
// className={cn(
// 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// // @ts-ignore Shopify - Fix this types
// underline: activeBrand?.entityId === node.entityId,
// }
// )}
// >
// <Link
// href={{
// pathname: getDesignerPath(node.path, category),
// query,
// }}
// >
// <a
// onClick={(e) => handleClick(e, 'brands')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// {node.name}
// </a>
// </Link>
// </li>
// ))}
// </ul>
// </div>
// </div>
// </div>
// </div>
// </div>
// {/* Products */}
// <div className="order-3 col-span-8 lg:order-none">
// {(q || activeCategory || activeBrand) && (
// <div className="mb-12 transition duration-75 ease-in">
// {data ? (
// <>
// <span
// className={cn('animated', {
// fadeIn: data.found,
// hidden: !data.found,
// })}
// >
// Showing {data.products.length} results{' '}
// {q && (
// <>
// for "<strong>{q}</strong>"
// </>
// )}
// </span>
// <span
// className={cn('animated', {
// fadeIn: !data.found,
// hidden: data.found,
// })}
// >
// {q ? (
// <>
// There are no products that match "<strong>{q}</strong>"
// </>
// ) : (
// <>
// There are no products that match the selected category.
// </>
// )}
// </span>
// </>
// ) : q ? (
// <>
// Searching for: "<strong>{q}</strong>"
// </>
// ) : (
// <>Searching...</>
// )}
// </div>
// )}
// {data ? (
// <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
// {data.products.map((product: Product) => (
// <ProductCard
// variant="simple"
// key={product.path}
// className="animated fadeIn"
// product={product}
// imgProps={{
// width: 480,
// height: 480,
// }}
// />
// ))}
// </div>
// ) : (
// <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
// {rangeMap(12, (i) => (
// <Skeleton key={i}>
// <div className="w-60 h-60" />
// </Skeleton>
// ))}
// </div>
// )}{' '}
// </div>
// {/* Sort */}
// <div className="order-2 col-span-8 lg:col-span-2 lg:order-none">
// <div className="relative inline-block w-full">
// <div className="lg:hidden">
// <span className="rounded-md shadow-sm">
// <button
// type="button"
// onClick={(e) => handleClick(e, 'sort')}
// className="flex justify-between w-full px-4 py-3 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-sm border-accent-3 bg-accent-0 text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8"
// id="options-menu"
// aria-haspopup="true"
// aria-expanded="true"
// >
// {sort ? SORT[sort as keyof typeof SORT] : 'Relevance'}
// <svg
// className="w-5 h-5 ml-2 -mr-1"
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 20 20"
// fill="currentColor"
// >
// <path
// fillRule="evenodd"
// d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
// clipRule="evenodd"
// />
// </svg>
// </button>
// </span>
// </div>
// <div
// className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
// activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
// }`}
// >
// <div className="rounded-sm shadow-xs bg-accent-0 lg:bg-none lg:shadow-none">
// <div
// role="menu"
// aria-orientation="vertical"
// aria-labelledby="options-menu"
// >
// <ul>
// <li
// className={cn(
// 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// underline: !sort,
// }
// )}
// >
// <Link href={{ pathname, query: filterQuery({ q }) }}>
// <a
// onClick={(e) => handleClick(e, 'sort')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// Relevance
// </a>
// </Link>
// </li>
// {Object.entries(SORT).map(([key, text]) => (
// <li
// key={key}
// className={cn(
// 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
// {
// underline: sort === key,
// }
// )}
// >
// <Link
// href={{
// pathname,
// query: filterQuery({ q, sort: key }),
// }}
// >
// <a
// onClick={(e) => handleClick(e, 'sort')}
// className={
// 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
// }
// >
// {text}
// </a>
// </Link>
// </li>
// ))}
// </ul>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </Container>
// )
// }
Search.Layout = Layout

View File

@@ -2,10 +2,10 @@ import React, { FC, useState } from 'react'
import cn from 'classnames'
import { useUI } from '@components/ui'
import { Heart } from '@components/icons'
import useAddItem from '@framework/wishlist/use-add-item'
import useCustomer from '@framework/customer/use-customer'
import useWishlist from '@framework/wishlist/use-wishlist'
import useRemoveItem from '@framework/wishlist/use-remove-item'
// import useAddItem from '@framework/wishlist/use-add-item'
// import useCustomer from '@framework/customer/use-customer'
// import useWishlist from '@framework/wishlist/use-wishlist'
// import useRemoveItem from '@framework/wishlist/use-remove-item'
import s from './WishlistButton.module.css'
import type { Product, ProductVariant } from '@commerce/types/product'
@@ -20,10 +20,10 @@ const WishlistButton: FC<Props> = ({
className,
...props
}) => {
const { data } = useWishlist()
const addItem = useAddItem()
const removeItem = useRemoveItem()
const { data: customer } = useCustomer()
// const { data } = useWishlist()
// const addItem = useAddItem()
// const removeItem = useRemoveItem()
// const { data: customer } = useCustomer()
const { openModal, setModalView } = useUI()
const [loading, setLoading] = useState(false)
@@ -41,22 +41,22 @@ const WishlistButton: FC<Props> = ({
if (loading) return
// A login is required before adding an item to the wishlist
if (!customer) {
setModalView('LOGIN_VIEW')
return openModal()
}
// if (!customer) {
// setModalView('LOGIN_VIEW')
// return openModal()
// }
setLoading(true)
try {
if (itemInWishlist) {
await removeItem({ id: itemInWishlist.id! })
} else {
await addItem({
productId,
variantId: variant?.id!,
})
}
// if (itemInWishlist) {
// await removeItem({ id: itemInWishlist.id! })
// } else {
// await addItem({
// productId,
// variantId: variant?.id!,
// })
// }
setLoading(false)
} catch (err) {

View File

@@ -8,9 +8,9 @@ import { Button, Text } from '@components/ui'
import { useUI } from '@components/ui/context'
import type { Product } from '@commerce/types/product'
import usePrice from '@framework/product/use-price'
import useAddItem from '@framework/cart/use-add-item'
import useRemoveItem from '@framework/wishlist/use-remove-item'
// import usePrice from '@framework/product/use-price'
// import useAddItem from '@framework/cart/use-add-item'
// import useRemoveItem from '@framework/wishlist/use-remove-item'
interface Props {
product: Product
@@ -19,11 +19,11 @@ interface Props {
const placeholderImg = '/product-img-placeholder.svg'
const WishlistCard: FC<Props> = ({ product }) => {
const { price } = usePrice({
amount: product.price?.value,
baseAmount: product.price?.retailPrice,
currencyCode: product.price?.currencyCode!,
})
// const { price } = usePrice({
// amount: product.price?.value,
// baseAmount: product.price?.retailPrice,
// currencyCode: product.price?.currencyCode!,
// })
// @ts-ignore Wishlist is not always enabled
const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
const [loading, setLoading] = useState(false)
@@ -71,7 +71,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
</div>
<div className="col-span-7">
<h3 className="text-2xl mb-2">
<h3 className="mb-2 text-2xl">
<Link href={`/product${product.path}`}>
<a>{product.name}</a>
</Link>
@@ -91,8 +91,8 @@ const WishlistCard: FC<Props> = ({ product }) => {
Add to Cart
</Button>
</div>
<div className="col-span-2 flex flex-col justify-between">
<div className="flex justify-end font-bold">{price}</div>
<div className="flex flex-col justify-between col-span-2">
{/* <div className="flex justify-end font-bold">{price}</div> */}
<div className="flex justify-end">
<button onClick={handleRemove}>
<Trash />

View File

@@ -9,7 +9,7 @@ export { default as checkoutToCart } from './checkout-to-cart'
export { default as handleLogin, handleAutomaticLogin } from './handle-login'
export { default as handleAccountActivation } from './handle-account-activation'
export { default as throwUserErrors } from './throw-user-errors'
export * from './queries'
export * from './mutations'
// export * from './queries'
// export * from './mutations'
export * from './normalize'
export * from './customer-token'

View File

@@ -1,7 +1,7 @@
import {
SHOPIFY_CHECKOUT_ID_COOKIE,
SHOPIFY_CHECKOUT_URL_COOKIE,
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
WOOCOMMERCE_CHECKOUT_ID_COOKIE,
WOOCOMMERCE_CHECKOUT_URL_COOKIE,
WOOCOMMERCE_CUSTOMER_TOKEN_COOKIE,
} from '../../../const'
import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
import type { CheckoutEndpoint } from '.'
@@ -12,15 +12,15 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
config,
}) => {
const { cookies } = req
const checkoutUrl = cookies[SHOPIFY_CHECKOUT_URL_COOKIE]
const customerCookie = cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE]
const checkoutUrl = cookies[WOOCOMMERCE_CHECKOUT_URL_COOKIE]
const customerCookie = cookies[WOOCOMMERCE_CUSTOMER_TOKEN_COOKIE]
if (customerCookie) {
try {
await config.fetch(associateCustomerWithCheckoutMutation, {
variables: {
checkoutId: cookies[SHOPIFY_CHECKOUT_ID_COOKIE],
customerAccessToken: cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE],
checkoutId: cookies[WOOCOMMERCE_CHECKOUT_ID_COOKIE],
customerAccessToken: cookies[WOOCOMMERCE_CUSTOMER_TOKEN_COOKIE],
},
})
} catch (error) {

View File

@@ -1,10 +1,10 @@
import { GetAPISchema, createEndpoint } from '@commerce/api'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
import type { CheckoutSchema } from '../../../types/checkout'
import type { ShopifyAPI } from '../..'
import type { WOOCOMMERCEAPI } from '../..'
import checkout from './checkout'
export type CheckoutAPI = GetAPISchema<ShopifyAPI, CheckoutSchema>
export type CheckoutAPI = GetAPISchema<WOOCOMMERCEAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']

View File

@@ -43,12 +43,14 @@ export default function getAllProductPathsOperation({
GetAllProductPathsQueryVariables
>(query, { variables })
const products = data?.products?.edges
? data.products.edges.map((edge) => ({
path: `/${edge?.node?.slug}`,
}))
: []
return {
products: data?.products?.edges
? data.products.edges.map(({ node: { slug } }) => ({
path: `/${slug}`,
}))
: [],
products,
}
}

View File

@@ -62,8 +62,8 @@ export default function getAllProductsOperation({
let products: Product[] = []
if (data?.products?.edges) {
data?.products?.edges?.map(({ node }) =>
products.push(normalizeProduct(node as SimpleProduct))
data?.products?.edges?.map((edge) =>
products.push(normalizeProduct(edge?.node as SimpleProduct))
)
}

View File

@@ -3,5 +3,5 @@
export { default as getAllProducts } from './get-all-products'
export { default as getAllProductPaths } from './get-all-product-paths'
export { default as getProduct } from './get-product'
export { default as getSiteInfo } from './get-site-info'
// export { default as getSiteInfo } from './get-site-info'
// export { default as login } from './login'

View File

@@ -1,4 +1,6 @@
export { default as useCart } from './use-cart'
export { default as useAddItem } from './use-add-item'
export { default as useUpdateItem } from './use-update-item'
export { default as useRemoveItem } from './use-remove-item'
// export { default as useCart } from './use-cart'
// export { default as useAddItem } from './use-add-item'
// export { default as useUpdateItem } from './use-update-item'
// export { default as useRemoveItem } from './use-remove-item'
export {}

View File

@@ -46,16 +46,18 @@ export const handler: MutationHook<AddItemHook> = {
return checkoutToCart(checkoutLineItemsAdd)
},
useHook: ({ fetch }) => () => {
const { mutate } = useCart()
useHook:
({ fetch }) =>
() => {
const { mutate } = useCart()
return useCallback(
async function addItem(input) {
const data = await fetch({ input })
await mutate(data, false)
return data
},
[fetch, mutate]
)
},
return useCallback(
async function addItem(input) {
const data = await fetch({ input })
await mutate(data, false)
return data
},
[fetch, mutate]
)
},
}

View File

@@ -1 +1,3 @@
export { default as useCustomer } from './use-customer'
// export { default as useCustomer } from './use-customer'
export {}

View File

@@ -1,16 +1,16 @@
import { WOOCOMMERCE_CHECKOUT_ID_COOKIE } from './const'
import { handler as useCart } from './cart/use-cart'
import { handler as useAddItem } from './cart/use-add-item'
import { handler as useUpdateItem } from './cart/use-update-item'
import { handler as useRemoveItem } from './cart/use-remove-item'
// import { handler as useCart } from './cart/use-cart'
// import { handler as useAddItem } from './cart/use-add-item'
// import { handler as useUpdateItem } from './cart/use-update-item'
// import { handler as useRemoveItem } from './cart/use-remove-item'
import fetcher from './fetcher'
export const wooCommerceProvider = {
locale: 'en-us',
fetcher,
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
// cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
cartCookie: WOOCOMMERCE_CHECKOUT_ID_COOKIE,
}

View File

@@ -1,8 +1,8 @@
import * as Core from '@commerce/types/login'
import type { CustomerAccessTokenCreateInput } from '../schema'
// import type { CustomerAccessTokenCreateInput } from '../schema'
export * from '@commerce/types/login'
export type LoginOperation = Core.LoginOperation & {
variables: CustomerAccessTokenCreateInput
variables: unknown
}

View File

@@ -1,15 +1,15 @@
export { default as handleFetchResponse } from './handle-fetch-response'
export { default as getSearchVariables } from './get-search-variables'
export { default as getSortVariables } from './get-sort-variables'
export { default as getBrands } from './get-brands'
export { default as getCategories } from './get-categories'
export { default as getCheckoutId } from './get-checkout-id'
export { default as checkoutCreate } from './checkout-create'
export { default as checkoutToCart } from './checkout-to-cart'
export { default as handleLogin, handleAutomaticLogin } from './handle-login'
export { default as handleAccountActivation } from './handle-account-activation'
export { default as throwUserErrors } from './throw-user-errors'
// export { default as getSearchVariables } from './get-search-variables'
// export { default as getSortVariables } from './get-sort-variables'
// export { default as getBrands } from './get-brands'
// export { default as getCategories } from './get-categories'
// export { default as getCheckoutId } from './get-checkout-id'
// export { default as checkoutCreate } from './checkout-create'
// export { default as checkoutToCart } from './checkout-to-cart'
// export { default as handleLogin, handleAutomaticLogin } from './handle-login'
// export { default as handleAccountActivation } from './handle-account-activation'
// export { default as throwUserErrors } from './throw-user-errors'
export * from './queries'
export * from './mutations'
export * from './normalize'
export * from './customer-token'
// export * from './customer-token'

View File

@@ -8,10 +8,10 @@ const normalizeProductImages = ({
const edges_ =
edges
?.filter((edge) => edge?.node)
.map(({ node }) => {
.map((edge) => {
return {
url: node.sourceUrl,
alt: node.altText ?? node.title,
url: edge?.node?.sourceUrl ?? '',
alt: edge?.node?.altText ?? edge?.node?.title ?? '',
}
}) ?? []

View File

@@ -8,15 +8,15 @@ export async function getSearchStaticProps({
locales,
}: GetStaticPropsContext) {
const config = { locale, locales }
const pagesPromise = commerce.getAllPages({ config, preview })
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
const { pages } = await pagesPromise
const { categories, brands } = await siteInfoPromise
// const pagesPromise = commerce.getAllPages({ config, preview })
// const siteInfoPromise = commerce.getSiteInfo({ config, preview })
// const { pages } = await pagesPromise
// const { categories, brands } = await siteInfoPromise
return {
props: {
pages,
categories,
brands,
pages: [],
categories: [],
brands: [],
},
revalidate: 200,
}

View File

@@ -3,27 +3,27 @@ import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
import { Text } from '@components/ui'
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,
}
}
// 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,
// }
// }
export default function NotFound() {
return (
<div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
<div className="flex flex-col items-center justify-center max-w-2xl py-20 mx-8 sm:mx-auto fit">
<Text variant="heading">Not Found</Text>
<Text className="">
The requested page doesn't exist or you don't have access to it.

View File

@@ -18,67 +18,65 @@ export async function getStaticProps({
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 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 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
// 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`)
}
// 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
}
// 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
// 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()
// invalidPaths.push(url)
// })
// log()
return {
paths,
paths: [],
fallback: 'blocking',
}
}
export default function Pages({
page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
export default function Pages() {
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 className="max-w-2xl py-20 mx-8 sm:mx-auto">
{/* {page?.body && <Text html={page.body} />} */}
</div>
)
}

View File

@@ -1,177 +1,45 @@
import type { GetStaticPropsContext } from 'next'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
// import useCart from '@framework/cart/use-cart'
// import usePrice from '@framework/product/use-price'
import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
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 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 { 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 className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
<div className="lg:col-span-8">
{isLoading || isEmpty ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
<Bag className="absolute" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty
</h2>
<p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
) : error ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
<Cross width={24} height={24} />
</span>
<h2 className="pt-6 text-xl font-light text-center">
We couldnt process the purchase. Please check your card
information and try again.
</h2>
</div>
) : success ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
<Check />
</span>
<h2 className="pt-6 text-xl font-light text-center">
Thank you for your order.
</h2>
</div>
) : (
<div className="px-4 sm:px-6 flex-1">
<Text variant="pageHeading">My Cart</Text>
<Text variant="sectionHeading">Review your Order</Text>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
{data!.lineItems.map((item: any) => (
<CartItem
key={item.id}
item={item}
currencyCode={data?.currency.code!}
/>
))}
</ul>
<div className="my-6">
<Text>
Before you leave, take a look at these items. We picked them
just for you
</Text>
<div className="flex py-6 space-x-6">
{[1, 2, 3, 4, 5, 6].map((x) => (
<div
key={x}
className="border border-accent-3 w-full h-24 bg-accent-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
/>
))}
</div>
</div>
</div>
)}
</div>
<div className="lg:col-span-4">
<div className="flex-shrink-0 px-4 py-24 sm:px-6">
{process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
<>
{/* Shipping Address */}
{/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
<div className="mr-5">
<MapPin />
</div>
<div className="text-sm text-center font-medium">
<span className="uppercase">+ Add Shipping Address</span>
{/* <span>
1046 Kearny Street.<br/>
San Franssisco, California
</span> */}
</div>
</div>
{/* Payment Method */}
{/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
<div className="mr-5">
<CreditCard />
</div>
<div className="text-sm text-center font-medium">
<span className="uppercase">+ Add Payment Method</span>
{/* <span>VISA #### #### #### 2345</span> */}
</div>
</div>
</>
)}
<div className="border-t border-accent-2">
<ul className="py-3">
<li className="flex justify-between py-1">
<span>Subtotal</span>
<span>{subTotal}</span>
</li>
<li className="flex justify-between py-1">
<span>Taxes</span>
<span>Calculated at checkout</span>
</li>
<li className="flex justify-between py-1">
<span>Estimated Shipping</span>
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-10">
<span>Total</span>
<span>{total}</span>
</div>
</div>
<div className="flex flex-row justify-end">
<div className="w-full lg:w-72">
{isEmpty ? (
<Button href="/" Component="a" width="100%">
Continue Shopping
</Button>
) : (
<Button href="/checkout" Component="a" width="100%">
Proceed to Checkout
</Button>
)}
</div>
</div>
</div>
</div>
</div>
)
// 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 />
}
Cart.Layout = Layout

View File

@@ -4,34 +4,34 @@ import { Bag } from '@components/icons'
import { Layout } from '@components/common'
import { Container, Text } from '@components/ui'
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
// 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 },
}
}
// return {
// props: { pages, categories },
// }
// }
export default function Orders() {
return (
<Container>
<Text variant="pageHeading">My Orders</Text>
<div className="flex-1 p-24 flex flex-col justify-center items-center ">
<span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">
<div className="flex flex-col items-center justify-center flex-1 p-24 ">
<span className="flex items-center justify-center w-16 h-16 p-12 border border-dashed rounded-full border-secondary bg-primary text-primary">
<Bag className="absolute" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
No orders found
</h2>
<p className="text-accent-6 px-10 text-center pt-2">
<p className="px-10 pt-2 text-center text-accent-6">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>

View File

@@ -1,33 +1,33 @@
import type { GetStaticPropsContext } from 'next'
import useCustomer from '@framework/customer/use-customer'
// import useCustomer from '@framework/customer/use-customer'
import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
import { Container, Text } from '@components/ui'
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
// 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 },
}
}
// return {
// props: { pages, categories },
// }
// }
export default function Profile() {
const { data } = useCustomer()
// const { data } = useCustomer()
return (
<Container>
<Text variant="pageHeading">My Profile</Text>
{data && (
{/* {data && (
<div className="grid lg:grid-cols-12">
<div className="lg:col-span-8 pr-4">
<div className="pr-4 lg:col-span-8">
<div>
<Text variant="sectionHeading">Full Name</Text>
<span>
@@ -40,7 +40,7 @@ export default function Profile() {
</div>
</div>
</div>
)}
)} */}
</Container>
)
}

View File

@@ -1,50 +1,51 @@
import type { GetStaticPropsContext } from 'next'
import commerce from '@lib/api/commerce'
import { Heart } from '@components/icons'
// import type { GetStaticPropsContext } from 'next'
// import commerce from '@lib/api/commerce'
// import { Heart } from '@components/icons'
import { Layout } from '@components/common'
import { Text, Container, Skeleton } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { WishlistCard } from '@components/wishlist'
import useWishlist from '@framework/wishlist/use-wishlist'
// import { useCustomer } from '@framework/customer'
// import { WishlistCard } from '@components/wishlist'
// import useWishlist from '@framework/wishlist/use-wishlist'
import rangeMap from '@lib/range-map'
export async function getStaticProps({
preview,
locale,
locales,
}: GetStaticPropsContext) {
// Disabling page if Feature is not available
if (!process.env.COMMERCE_WISHLIST_ENABLED) {
return {
notFound: true,
}
}
// export async function getStaticProps({
// preview,
// locale,
// locales,
// }: GetStaticPropsContext) {
// // Disabling page if Feature is not available
// if (!process.env.COMMERCE_WISHLIST_ENABLED) {
// return {
// notFound: true,
// }
// }
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 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,
},
}
}
// return {
// props: {
// pages,
// categories,
// },
// }
// }
export default function Wishlist() {
const { data: customer } = useCustomer()
// @ts-ignore Shopify - Fix this types
const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
// const { data: customer } = useCustomer()
// // @ts-ignore Shopify - Fix this types
// const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
return (
<Container>
<div className="mt-3 mb-20">
<Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col">
{isLoading ? (
<div className="flex flex-col group">
{/* {isLoading ? (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{rangeMap(12, (i) => (
<Skeleton key={i}>
@@ -53,14 +54,14 @@ export default function Wishlist() {
))}
</div>
) : isEmpty ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
<div className="flex flex-col items-center justify-center flex-1 px-12 py-24 ">
<span className="flex items-center justify-center w-16 h-16 p-12 border border-dashed rounded-lg border-secondary bg-primary text-primary">
<Heart className="absolute" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your wishlist is empty
</h2>
<p className="text-accent-6 px-10 text-center pt-2">
<p className="px-10 pt-2 text-center text-accent-6">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
@@ -72,7 +73,7 @@ export default function Wishlist() {
<WishlistCard key={item.id} product={item.product! as any} />
))}
</div>
)}
)}*/}
</div>
</div>
</Container>