diff --git a/.gitignore b/.gitignore index 7003ab1c..d30e9d5b 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local +yarn.lock # vercel .vercel @@ -39,4 +40,5 @@ yarn-error.log* *.tsbuildinfo # TODO ignoring for now but unsure of what's generating it. -/localStorage \ No newline at end of file +/localStorage + diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx index 9ff395c5..c17606f9 100644 --- a/src/components/breadcrumb.tsx +++ b/src/components/breadcrumb.tsx @@ -19,7 +19,7 @@ export default function Breadcrumb({ entries }: IBreadcrumb): JSX.Element { > {entries.length > 1 && entries.map((entry, index, array) => ( - + {array.length === index + 1 ? ( {entry.label} diff --git a/src/components/cart/Cart.tsx b/src/components/cart/Cart.tsx index 3b648eda..ac79b385 100644 --- a/src/components/cart/Cart.tsx +++ b/src/components/cart/Cart.tsx @@ -26,8 +26,8 @@ export default function Cart({ }: ICart): JSX.Element { return ( - {items.map((item) => ( - - - {item.image?.href && ( - - )} - - + {items.map((item) => { + const { + display_price: { discount, without_discount, without_tax }, + } = item.meta; + return ( - - - {item.name} - - - {item.meta.display_price.without_tax.unit.formatted} + + + + {item.name} + - - - - - } - variant="text" - _hover={{ color: "gray.700" }} - onClick={() => { - handleRemoveItem(item.id); + + - - - ))} + gap={{ base: 4 }} + mt={-30} + > + + {item.image?.href && ( + + )} + + + + {item.description} + + + +
+ + Each + +
+ {discount && without_discount && discount.value.amount < 0 ? ( +
+
+ + {without_discount.unit.formatted} + +
+
+ + {without_tax.unit.formatted} + +
+
+ ) : ( +
+ + {without_tax.unit.formatted} + +
+ )} + + +
+ + Quantity + +
+
+ +
+
+ +
+ + +
+ + Total + +
+
+ + {item.meta.display_price.without_tax.value.formatted} + +
+ + + + ); + })} ); } diff --git a/src/components/cart/CartMenu.tsx b/src/components/cart/CartMenu.tsx index 1a2791a7..e93ca766 100644 --- a/src/components/cart/CartMenu.tsx +++ b/src/components/cart/CartMenu.tsx @@ -29,10 +29,14 @@ export default function CartMenu(): JSX.Element { onOpen={onOpen} > - - + - + ); } diff --git a/src/components/cart/OrderComplete.tsx b/src/components/cart/OrderComplete.tsx index 33b05183..01d3d2a4 100644 --- a/src/components/cart/OrderComplete.tsx +++ b/src/components/cart/OrderComplete.tsx @@ -113,7 +113,7 @@ export default function OrderComplete({ @@ -78,8 +84,8 @@ const MobileNavBar = ({ nav }: IMobileNavBar): JSX.Element => {

diff --git a/src/components/header/navigation/NavItem.tsx b/src/components/header/navigation/NavItem.tsx index b7e8184b..c7cd9772 100644 --- a/src/components/header/navigation/NavItem.tsx +++ b/src/components/header/navigation/NavItem.tsx @@ -31,8 +31,11 @@ const NavItem = ({ item, headerPadding }: INavItem): JSX.Element => { {item.name} diff --git a/src/components/header/navigation/NavItemContent.tsx b/src/components/header/navigation/NavItemContent.tsx index b35ca435..874c7670 100644 --- a/src/components/header/navigation/NavItemContent.tsx +++ b/src/components/header/navigation/NavItemContent.tsx @@ -17,14 +17,14 @@ interface INavItemContent { const menuItemInteractionStyle = { bg: "none", - color: "brand.primary", + color: "brand.secondary", }; const menuItemStyleProps = { _hover: menuItemInteractionStyle, _active: menuItemInteractionStyle, _focus: menuItemInteractionStyle, - color: "gray.500", + color: "gray.600", margin: "1", }; @@ -51,6 +51,7 @@ const NavItemContent = ({ item, triggered }: INavItemContent): JSX.Element => { fontWeight="semibold" {...menuItemStyleProps} onClick={triggered} + _hover={{ color: "brand.primary" }} > Browse All @@ -65,7 +66,7 @@ const NavItemContent = ({ item, triggered }: INavItemContent): JSX.Element => { columns={{ base: 1, sm: 2, md: 4 }} spacing={10} borderBottom="1px solid" - borderColor="gray.100" + borderColor="gray.300" paddingBottom={2} > {item.children.map((parent: NavigationNode, index: number) => { diff --git a/src/components/product/CartActions.tsx b/src/components/product/CartActions.tsx index e37d9602..d39728d4 100644 --- a/src/components/product/CartActions.tsx +++ b/src/components/product/CartActions.tsx @@ -19,7 +19,7 @@ const CartActions = ({ productId }: ICartActions): JSX.Element => { mt={4} py="7" bg="brand.primary" - color="white" + color="brand.buttontext" textTransform="uppercase" _hover={{ transform: "translateY(-2px)", diff --git a/src/components/product/Price.tsx b/src/components/product/Price.tsx index 024c1fb8..2b57fe27 100644 --- a/src/components/product/Price.tsx +++ b/src/components/product/Price.tsx @@ -1,18 +1,25 @@ import { useColorModeValue, Text } from "@chakra-ui/react"; +import { TextProps } from "@chakra-ui/layout"; -interface IPriceProps { +interface IPriceProps extends TextProps { price: string; currency: string; size?: string; } -const Price = ({ price, currency, size = "2xl" }: IPriceProps): JSX.Element => { +const Price = ({ + price, + currency, + size = "2xl", + ...props +}: IPriceProps): JSX.Element => { return ( {price} {currency} diff --git a/src/components/product/ProductContainer.tsx b/src/components/product/ProductContainer.tsx index c6b7d771..995b8714 100644 --- a/src/components/product/ProductContainer.tsx +++ b/src/components/product/ProductContainer.tsx @@ -18,7 +18,11 @@ export default function ProductContainer({ }: IProductContainer): JSX.Element { const { extensions } = product.attributes; return ( - + {main_image && ( )} diff --git a/src/components/product/ProductDetails.tsx b/src/components/product/ProductDetails.tsx index afbbd226..807823c9 100644 --- a/src/components/product/ProductDetails.tsx +++ b/src/components/product/ProductDetails.tsx @@ -27,7 +27,7 @@ const ProductDetails = ({ product }: IProductDetails): JSX.Element => { > { return ( {key} - {value} + + {Array.isArray(value) ? "Not Yet Implemented" : value} + ); }); diff --git a/src/components/product/ProductSummary.tsx b/src/components/product/ProductSummary.tsx index 6696ce06..cc9e2b4a 100644 --- a/src/components/product/ProductSummary.tsx +++ b/src/components/product/ProductSummary.tsx @@ -21,7 +21,7 @@ const ProductSummary = ({ product }: IProductSummary): JSX.Element => { {attributes.name} diff --git a/src/components/product/StrikePrice.tsx b/src/components/product/StrikePrice.tsx index 75aab5f9..c583c4fe 100644 --- a/src/components/product/StrikePrice.tsx +++ b/src/components/product/StrikePrice.tsx @@ -1,11 +1,12 @@ import { useColorModeValue, Text } from "@chakra-ui/react"; +import { TextProps } from "@chakra-ui/layout"; -interface IPrice { +interface IPrice extends TextProps { price: string; currency: string; } -const StrikePrice = ({ price, currency }: IPrice): JSX.Element => { +const StrikePrice = ({ price, currency, ...props }: IPrice): JSX.Element => { return ( { fontSize="lg" textDecoration="line-through" ml={3} + {...props} > {price} {currency} diff --git a/src/components/product/carousel/ProductCarousel.tsx b/src/components/product/carousel/ProductCarousel.tsx index e6d39b52..00447ff9 100644 --- a/src/components/product/carousel/ProductCarousel.tsx +++ b/src/components/product/carousel/ProductCarousel.tsx @@ -4,6 +4,7 @@ import "pure-react-carousel/dist/react-carousel.es.css"; import { useState } from "react"; import HorizontalCarousel from "./HorizontalCarousel"; import ProductHighlightCarousel from "./ProductHighlightCarousel"; +import VerticalCarousel from "./VerticalCarousel"; interface IProductCarousel { images: File[]; @@ -20,8 +21,22 @@ const ProductCarousel = ({ completeImages[0] ); + const desiredVisibleSlides = 4; + const numberVisibleSlides = + completeImages.length >= desiredVisibleSlides + ? desiredVisibleSlides + : completeImages.length; + return ( - + + + + - + ({ src: item.link.href, diff --git a/src/components/product/carousel/ProductShowcaseCarousel.tsx b/src/components/product/carousel/ProductShowcaseCarousel.tsx index 646d7cd2..97d75ad8 100644 --- a/src/components/product/carousel/ProductShowcaseCarousel.tsx +++ b/src/components/product/carousel/ProductShowcaseCarousel.tsx @@ -107,7 +107,7 @@ const ProductShowcaseCarousel = ({ diff --git a/src/components/search/SearchPage.tsx b/src/components/search/SearchPage.tsx index 59f9b4cf..40a7ff16 100644 --- a/src/components/search/SearchPage.tsx +++ b/src/components/search/SearchPage.tsx @@ -39,7 +39,11 @@ export const Search = ({ {/* Breadcrumb */} {breadcrumbEntries && ( - + )} diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index e89a882d..355c3371 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -23,6 +23,7 @@ import { BreadcrumbLookup } from "../../lib/types/breadcrumb-lookup"; import SearchBox from "./SearchBox"; import MobileFilters from "./MobileFilters"; import { hierarchicalAttributes } from "../../lib/hierarchical-attributes"; +import { globalBaseWidth } from "../../styles/theme"; interface ISearchResults { lookup?: BreadcrumbLookup; @@ -62,8 +63,14 @@ export default function SearchResults({ const title = slugArray ? resolveTitle(slugArray, lookup) : "All Categories"; return ( - - + + {title} {query && Search results for "{query}"} diff --git a/src/pages/cart.tsx b/src/pages/cart.tsx index 5ada9a4d..82632952 100644 --- a/src/pages/cart.tsx +++ b/src/pages/cart.tsx @@ -13,8 +13,7 @@ export const CartPage: NextPage = () => { return ( = () => { maxW={globalBaseWidth} m="0 auto" w="full" - px={{ base: 8, "2xl": 0 }} - py={10} + padding={{ sm: "0 1rem", lg: "0 2rem", "2xl": "0 5rem" }} > {orderCompleteState ? ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bc03b730..f12f758f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,7 @@ import type { NextPage } from "next"; import { chakra, Grid, GridItem } from "@chakra-ui/react"; -import type { Node, Promotion } from "@moltin/sdk"; +import type { Promotion } from "@moltin/sdk"; import { ProductResponseWithImage } from "../lib/product-types"; import PromotionBanner from "../components/promotion-banner/PromotionBanner"; @@ -10,9 +10,6 @@ import { fetchFeaturedPromotion } from "../components/promotion-banner/fetchFeat import FeaturedProducts from "../components/featured-products/FeaturedProducts"; import { fetchFeaturedProducts } from "../components/featured-products/fetchFeaturedProducts"; -import FeaturedNodes from "../components/featured-nodes/FeaturedNodes"; -import { fetchFeaturedNodes } from "../components/featured-nodes/fetchFeaturedNodes"; - import { withStoreStaticProps } from "../lib/store-wrapper-ssg"; const nodeId = process.env.NEXT_PUBLIC_DEMO_NODE_ID || ""; @@ -21,14 +18,9 @@ const promotionId = process.env.NEXT_PUBLIC_DEMO_PROMO_ID || ""; export interface IHome { promotion?: Promotion; featuredProducts?: ProductResponseWithImage[]; - featuredNodes?: Node[]; } -const Home: NextPage = ({ - promotion, - featuredProducts, - featuredNodes, -}) => { +const Home: NextPage = ({ promotion, featuredProducts }) => { return ( {promotion && ( @@ -54,16 +46,6 @@ const Home: NextPage = ({ /> )} - - {featuredNodes && ( - - )} - ); @@ -77,11 +59,9 @@ export const getStaticProps = withStoreStaticProps(async () => { const featuredProducts = nodeId ? await fetchFeaturedProducts(nodeId) : undefined; - const featuredNodes = await fetchFeaturedNodes(); return { props: { - featuredNodes, ...(promotion && { promotion }), ...(featuredProducts && { featuredProducts }), }, diff --git a/src/pages/products/[productId].tsx b/src/pages/products/[productId].tsx index 2d572613..1977b576 100644 --- a/src/pages/products/[productId].tsx +++ b/src/pages/products/[productId].tsx @@ -27,8 +27,8 @@ export const Product: NextPage = (props: IProduct) => { return (