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 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, } } 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 Wishlist() { const { data: customer } = useCustomer() // @ts-ignore Shopify - Fix this types const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true }) return (
My Wishlist
{isLoading ? (
{rangeMap(12, (i) => (
))}
) : isEmpty ? (

Your wishlist is empty

Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

) : (
{data && // @ts-ignore - Wishlist Item Type data.items?.map((item) => ( ))}
)}
) } Wishlist.Layout = Layout