diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Alert.js | 3 | ||||
| -rw-r--r-- | src/pages/shop/cart.js | 86 |
2 files changed, 67 insertions, 22 deletions
diff --git a/src/components/Alert.js b/src/components/Alert.js index 68fb84b1..64268e05 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -7,6 +7,9 @@ const Alert = ({ children, className, type }) => { case 'success': typeClass = ' bg-green-100 text-green-900 ' break; + case 'warning': + typeClass = ' bg-yellow-100 text-yellow-900 ' + break; } return ( <div className={"rounded w-full text-medium p-3" + typeClass + className}>{children}</div> diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 9958a7bb..818629b8 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -1,20 +1,41 @@ import { useEffect, useState } from "react"; -import Header from "../../components/Header"; -import Layout from "../../components/Layout"; -import Link from "../../components/Link"; -import { createOrUpdateItemCart, deleteItemCart, getCart } from "../../helpers/cart"; -import ChevronLeftIcon from "../../icons/chevron-left.svg"; -import MinusIcon from "../../icons/minus.svg"; -import PlusIcon from "../../icons/plus.svg"; -import TrashIcon from "../../icons/trash.svg"; +import { toast } from "react-hot-toast"; +import Head from "next/head"; +import { + TrashIcon, + PlusIcon, + MinusIcon, + ChevronLeftIcon, +} from "@heroicons/react/24/solid"; +import { + ExclamationTriangleIcon, + HeartIcon, + HomeIcon +} from "@heroicons/react/24/outline"; + +// Helpers +import { + createOrUpdateItemCart, + deleteItemCart, + getCart +} from "../../helpers/cart"; +import { createSlug } from "../../helpers/slug"; import apiOdoo from "../../helpers/apiOdoo"; import currencyFormat from "../../helpers/currencyFormat"; -import { createSlug } from "../../helpers/slug"; + +// Components import ConfirmAlert from "../../components/ConfirmAlert"; -import { toast } from "react-hot-toast"; import Image from "../../components/Image"; +import Layout from "../../components/Layout"; +import Link from "../../components/Link"; +import Alert from "../../components/Alert"; + +export async function getServerSideProps(context) { + const previousRoute = context.req.headers.referer || '/'; + return { props: { previousRoute } }; +} -export default function Cart() { +export default function Cart({ previousRoute }) { const [products, setProducts] = useState([]); const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0); const [totalTaxAmount, setTotalTaxAmount] = useState(0); @@ -134,8 +155,27 @@ export default function Cart() { onClose={hideDeleteConfirmation} onSubmit={deleteItem} /> - <Header title={`Keranjang Belanja - Indoteknik`}/> + <Head> + <title>Keranjang Belanja - Indoteknik</title> + </Head> <Layout> + <div className="flex justify-between p-4"> + {/* --- Start Title */} + <Link href={previousRoute} className="flex gap-x-2 text-gray_r-12"> + <ChevronLeftIcon className="w-6"/> + <h1>Keranjang Saya</h1> + </Link> + {/* --- End Title */} + + {/* --- Start Icons */} + <div className="flex gap-x-3"> + <HeartIcon className="w-6 stroke-2"/> + <Link href="/"> + <HomeIcon className="w-6 stroke-2 text-gray_r-12"/> + </Link> + </div> + {/* --- End Icons */} + </div> {/* jsx-start: Progress Bar */} <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md"> @@ -159,15 +199,17 @@ export default function Cart() { </div> </div> {/* [End] Progress Bar */} - <div className="p-4"> - {/* [Start] Title */} - <Link href="/" className="flex gap-x-2 mb-8"> - <ChevronLeftIcon className="w-6 stroke-gray_r-12"/> - <h1 className="text-gray_r-12">Keranjang Saya</h1> - </Link> - {/* [End] Title */} + {/* --- Start Alert */} + <Alert type="warning" className="text-caption-2 mt-3 flex gap-x-3"> + <ExclamationTriangleIcon className="w-14"/> + <span> + Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami. + </span> + </Alert> + {/* ---- End Alert */} + <div className="p-4"> {/* [Start] Product List */} <div className="flex flex-col gap-y-6 mb-8"> {products.map((product, index) => ( @@ -208,14 +250,14 @@ export default function Cart() { className="btn-red p-2 rounded" onClick={() => showDeleteConfirmation(product.id)} > - <TrashIcon className="stroke-red_r-12 w-3"/> + <TrashIcon className="text-red_r-11 w-3"/> </button> <button className="btn-light p-2 rounded" disabled={product.quantity == 1} onClick={() => minusQuantity(product.id)} > - <MinusIcon className={'stroke-gray_r-12 w-3' + (product.quantity == 1 ? ' stroke-gray_r-11' : '')}/> + <MinusIcon className={'text-gray_r-12 w-3' + (product.quantity == 1 ? ' text-gray_r-11' : '')}/> </button> <input type="number" @@ -225,7 +267,7 @@ export default function Cart() { value={product.quantity} /> <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}> - <PlusIcon className="stroke-gray_r-12 w-3"/> + <PlusIcon className="text-gray_r-12 w-3"/> </button> </div> </div> |