From 4990dd0cf5a7c41ded2a1f717be3a6ff3ae144d9 Mon Sep 17 00:00:00 2001 From: Belen Curcio 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 = ({ style, @@ -25,7 +25,8 @@ const Text: FunctionComponent = ({ [P in Variant]: React.ComponentType | string } = { body: 'p', - heading: 'h2', + heading: 'h1', + pageHeading: 'h1', } const Component: @@ -41,6 +42,7 @@ const Text: FunctionComponent = ({ { [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 ( - -

- My Cart -

- +
+
+ {isEmpty ? ( +
+ + + +

+ Your cart is empty +

+

+ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +

+
+ ) : error ? ( +
+ + + +

+ We couldn’t process the purchase. Please check your card + information and try again. +

+
+ ) : success ? ( +
+ + + +

+ Thank you for your order. +

+
+ ) : ( +
+

+ My Cart +

+
    + {items.map((item) => ( + + ))} +
+
+ + Before you leave, take a look at these items. We picked them just + for you + +
+ {[1, 2, 3, 4, 5, 6].map((x) => ( +
+ ))} +
+
+ )} +
+
+
+
+
    +
  • + Subtotal + {subTotal} +
    • +
  • + Taxes + Calculated at checkout +
    • +
  • + Estimated Shipping + FREE +
    • +
+
+ Total + {total} +
+
+
+
+ +
+
+
+
+
) } -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 ( -

My Orders

+ My Orders ) } 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 ( -

My Profile

+ My Profile ) } 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({
-

- My Wishlist -

+ My Wishlist
{[1, 2, 3, 4, 5, 6].map((i) => (