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} />