mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
chore: comment almost everything, build
This commit is contained in:
Reza Babaei
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}`}>
|
||||
<Image
|
||||
onClick={() => closeSidebarIfPresent()}
|
||||
@@ -96,7 +96,7 @@ const CartItem = ({
|
||||
/>
|
||||
</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}`}>
|
||||
<span
|
||||
className={s.productName}
|
||||
@@ -110,18 +110,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>
|
||||
)}
|
||||
@@ -135,10 +135,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}
|
||||
@@ -146,7 +146,7 @@ const CartItem = ({
|
||||
increase={() => increaseQuantity(1)}
|
||||
decrease={() => increaseQuantity(-1)}
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,124 +6,33 @@ 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 handleClose = () => closeSidebar()
|
||||
const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
|
||||
// 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 error = null
|
||||
const success = null
|
||||
// const error = null
|
||||
// const success = null
|
||||
|
||||
return (
|
||||
<SidebarLayout
|
||||
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">
|
||||
<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">
|
||||
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 couldn’t 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">
|
||||
<Link href="/cart">
|
||||
<Text variant="sectionHeading" onClick={handleClose}>
|
||||
My Cart
|
||||
</Text>
|
||||
</Link>
|
||||
<ul className={s.lineItemsList}>
|
||||
{data!.lineItems.map((item: any) => (
|
||||
<CartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
currencyCode={data!.currency.code}
|
||||
/>
|
||||
))}
|
||||
</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">
|
||||
<ul className="pb-2">
|
||||
<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>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-2">
|
||||
<span>Total</span>
|
||||
<span>{total}</span>
|
||||
</div>
|
||||
<div>
|
||||
{process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
|
||||
<Button Component="a" width="100%" onClick={goToCheckout}>
|
||||
Proceed to Checkout ({total})
|
||||
</Button>
|
||||
) : (
|
||||
<Button href="/checkout" Component="a" width="100%">
|
||||
Proceed to Checkout
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</SidebarLayout>
|
||||
)
|
||||
return <div />
|
||||
}
|
||||
|
||||
export default CartSidebarView
|
||||
|
||||
@@ -4,8 +4,8 @@ import { FC } from 'react'
|
||||
import CartItem from '@components/cart/CartItem'
|
||||
import { Button, Text } from '@components/ui'
|
||||
import { useUI } from '@components/ui/context'
|
||||
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 ShippingWidget from '../ShippingWidget'
|
||||
import PaymentWidget from '../PaymentWidget'
|
||||
import SidebarLayout from '@components/common/SidebarLayout'
|
||||
@@ -13,27 +13,27 @@ import s from './CheckoutSidebarView.module.css'
|
||||
|
||||
const CheckoutSidebarView: FC = () => {
|
||||
const { setSidebarView } = useUI()
|
||||
const { data } = useCart()
|
||||
// const { data } = 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,
|
||||
// }
|
||||
// )
|
||||
|
||||
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">
|
||||
<Text variant="sectionHeading">Checkout</Text>
|
||||
</Link>
|
||||
@@ -42,22 +42,22 @@ const CheckoutSidebarView: FC = () => {
|
||||
<ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
|
||||
|
||||
<ul className={s.lineItemsList}>
|
||||
{data!.lineItems.map((item: any) => (
|
||||
{/* {data!.lineItems.map((item: any) => (
|
||||
<CartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
currencyCode={data!.currency.code}
|
||||
variant="display"
|
||||
/>
|
||||
))}
|
||||
))} */}
|
||||
</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>
|
||||
<span>{subTotal}</span>
|
||||
{/* <span>{subTotal}</span> */}
|
||||
</li>
|
||||
<li className="flex justify-between py-1">
|
||||
<span>Taxes</span>
|
||||
@@ -68,9 +68,9 @@ 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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,9 +50,9 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
)}
|
||||
{process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
|
||||
<li className={s.item}>
|
||||
{customer ? (
|
||||
{/* {customer ? (
|
||||
<DropdownMenu />
|
||||
) : (
|
||||
) : ( */}
|
||||
<button
|
||||
className={s.avatarButton}
|
||||
aria-label="Menu"
|
||||
@@ -60,7 +60,7 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
>
|
||||
<Avatar />
|
||||
</button>
|
||||
)}
|
||||
{/* )} */}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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 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
|
||||
|
||||
@@ -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)
|
||||
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 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 { 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 { 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)
|
||||
}
|
||||
// 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>
|
||||
// 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="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>
|
||||
// {/* 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="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>
|
||||
)
|
||||
}
|
||||
// {/* 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
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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']
|
||||
|
||||
|
||||
@@ -43,12 +43,14 @@ export default function getAllProductPathsOperation({
|
||||
GetAllProductPathsQueryVariables
|
||||
>(query, { variables })
|
||||
|
||||
return {
|
||||
products: data?.products?.edges
|
||||
? data.products.edges.map(({ node: { slug } }) => ({
|
||||
path: `/${slug}`,
|
||||
const products = data?.products?.edges
|
||||
? data.products.edges.map((edge) => ({
|
||||
path: `/${edge?.node?.slug}`,
|
||||
}))
|
||||
: [],
|
||||
: []
|
||||
|
||||
return {
|
||||
products,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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))
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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 {}
|
||||
|
||||
@@ -46,7 +46,9 @@ export const handler: MutationHook<AddItemHook> = {
|
||||
|
||||
return checkoutToCart(checkoutLineItemsAdd)
|
||||
},
|
||||
useHook: ({ fetch }) => () => {
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() => {
|
||||
const { mutate } = useCart()
|
||||
|
||||
return useCallback(
|
||||
@@ -1 +1,3 @@
|
||||
export { default as useCustomer } from './use-customer'
|
||||
// export { default as useCustomer } from './use-customer'
|
||||
|
||||
export {}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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 ?? '',
|
||||
}
|
||||
}) ?? []
|
||||
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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) {
|
||||
// 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>
|
||||
)
|
||||
}
|
||||
|
||||
192
pages/cart.tsx
192
pages/cart.tsx
@@ -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 couldn’t 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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
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 } 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'
|
||||
|
||||
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 || 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 group">
|
||||
{/* {isLoading || isEmpty ? (
|
||||
<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>
|
||||
@@ -61,7 +61,7 @@ export default function Wishlist() {
|
||||
data.items?.map((item) => (
|
||||
<WishlistCard key={item.id} product={item.product! as any} />
|
||||
))
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user