From 4990dd0cf5a7c41ded2a1f717be3a6ff3ae144d9 Mon Sep 17 00:00:00 2001 From: Belen Curcio <curciobelen@gmail.com> Date: Sat, 24 Oct 2020 17:55:30 -0300 Subject: [PATCH] Polish and Cart view --- components/cart/index.ts | 1 + .../core/Searchbar/Searchbar.module.css | 4 - components/ui/Text/Text.module.css | 4 + components/ui/Text/Text.tsx | 6 +- pages/cart.tsx | 126 ++++++++++++++++-- pages/orders.tsx | 4 +- pages/profile.tsx | 4 +- pages/wishlist.tsx | 6 +- 8 files changed, 133 insertions(+), 22 deletions(-) diff --git a/components/cart/index.ts b/components/cart/index.ts index 0aff7cdfb..3e53fa34a 100644 --- a/components/cart/index.ts +++ b/components/cart/index.ts @@ -1 +1,2 @@ export { default as CartSidebarView } from './CartSidebarView' +export { default as CartItem } from './CartItem' diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index 0d2265650..2c3ca27f7 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -3,10 +3,6 @@ min-width: 300px; } -.input:focus { - @apply outline-none shadow-outline-gray; -} - .iconContainer { @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; } diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css index a35936b28..00c6fcd40 100644 --- a/components/ui/Text/Text.module.css +++ b/components/ui/Text/Text.module.css @@ -5,3 +5,7 @@ .heading { @apply text-5xl mb-12; } + +.pageHeading { + @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide; +} diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx index 8d6d88539..546396526 100644 --- a/components/ui/Text/Text.tsx +++ b/components/ui/Text/Text.tsx @@ -13,7 +13,7 @@ interface Props { children: React.ReactNode | any } -type Variant = 'heading' | 'body' +type Variant = 'heading' | 'body' | 'pageHeading' const Text: FunctionComponent<Props> = ({ style, @@ -25,7 +25,8 @@ const Text: FunctionComponent<Props> = ({ [P in Variant]: React.ComponentType<any> | string } = { body: 'p', - heading: 'h2', + heading: 'h1', + pageHeading: 'h1', } const Component: @@ -41,6 +42,7 @@ const Text: FunctionComponent<Props> = ({ { [s.body]: variant === 'body', [s.heading]: variant === 'heading', + [s.pageHeading]: variant === 'pageHeading', }, className )} diff --git a/pages/cart.tsx b/pages/cart.tsx index 59f278ee0..9550c8669 100644 --- a/pages/cart.tsx +++ b/pages/cart.tsx @@ -1,7 +1,12 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' import { Layout } from '@components/core' -import { Container } from '@components/ui' +import { Button } from '@components/ui' +import { Bag, Cross, Check } from '@components/icon' +import useCart from '@lib/bigcommerce/cart/use-cart' +import usePrice from '@lib/bigcommerce/use-price' +import { CartItem } from '@components/cart' +import { Text } from '@components/ui' export async function getStaticProps({ preview }: GetStaticPropsContext) { const { pages } = await getAllPages() @@ -10,16 +15,121 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) { } } -export default function Home({}: InferGetStaticPropsType< +export default function Cart({}: InferGetStaticPropsType< typeof getStaticProps >) { + const { data, isEmpty } = useCart() + const { price: subTotal } = usePrice( + data && { + amount: data.base_amount, + currencyCode: data.currency.code, + } + ) + const { price: total } = usePrice( + data && { + amount: data.cart_amount, + currencyCode: data.currency.code, + } + ) + + const items = data?.line_items.physical_items ?? [] + + const error = null + const success = null return ( - <Container> - <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide"> - My Cart - </h2> - </Container> + <div className="grid lg:grid-cols-12"> + <div className="lg:col-span-8"> + {isEmpty ? ( + <div className="flex-1 px-4 flex flex-col justify-center items-center "> + <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white"> + <Bag className="absolute" /> + </span> + <h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> + Your cart is empty + </h2> + <p className="text-accents-2 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"> + <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide"> + My Cart + </h2> + <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2"> + {items.map((item) => ( + <CartItem + key={item.id} + item={item} + currencyCode={data?.currency.code!} + /> + ))} + </ul> + <hr className="mb-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-2"> + {[1, 2, 3, 4, 5, 6].map((x) => ( + <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" /> + ))} + </div> + </div> + )} + </div> + <div className="lg:col-span-4"> + <div className="flex-shrink-0 px-4 py-12 sm:px-6"> + <div className="border-t border-accents-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-accents-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"> + <Button href="/checkout" Component="a" width="100%"> + Proceed to Checkout + </Button> + </div> + </div> + </div> + </div> + </div> ) } -Home.Layout = Layout +Cart.Layout = Layout diff --git a/pages/orders.tsx b/pages/orders.tsx index baa334194..87c74ac8e 100644 --- a/pages/orders.tsx +++ b/pages/orders.tsx @@ -1,10 +1,10 @@ import { Layout } from '@components/core' -import { Container } from '@components/ui' +import { Container, Text } from '@components/ui' export default function Orders() { return ( <Container> - <h2>My Orders</h2> + <Text variant="pageHeading">My Orders</Text> </Container> ) } diff --git a/pages/profile.tsx b/pages/profile.tsx index 665519b3c..a24161221 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,10 +1,10 @@ import { Layout } from '@components/core' -import { Container } from '@components/ui' +import { Container, Text } from '@components/ui' export default function Profile() { return ( <Container> - <h2>My Profile</h2> + <Text variant="pageHeading">My Profile</Text> </Container> ) } diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx index 03723fbc0..b169fc776 100644 --- a/pages/wishlist.tsx +++ b/pages/wishlist.tsx @@ -1,7 +1,7 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' import { Layout } from '@components/core' -import { Container } from '@components/ui' +import { Container, Text } from '@components/ui' import { WishlistCard } from '@components/wishlist' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' @@ -35,9 +35,7 @@ export default function Home({ </ul> </div> <div className="col-span-8"> - <h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-base tracking-wide"> - My Wishlist - </h2> + <Text variant="pageHeading">My Wishlist</Text> <div className="group flex flex-col"> {[1, 2, 3, 4, 5, 6].map((i) => ( <WishlistCard key={i} />