summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/elements/ConfirmAlert.js4
-rw-r--r--src/components/elements/Image.js10
-rw-r--r--src/components/layouts/AppBar.js6
-rw-r--r--src/components/products/ProductCategories.js16
-rw-r--r--src/components/products/ProductSlider.js2
-rw-r--r--src/components/transactions/TransactionStatusBadge.js14
-rw-r--r--src/components/variants/VariantCard.js9
-rw-r--r--src/components/variants/VariantGroupCard.js31
-rw-r--r--src/pages/index.js20
-rw-r--r--src/pages/my/address/index.js4
-rw-r--r--src/pages/my/invoices.js108
-rw-r--r--src/pages/my/transaction/[id].js47
-rw-r--r--src/pages/shop/cart.js4
-rw-r--r--src/styles/globals.css4
14 files changed, 178 insertions, 101 deletions
diff --git a/src/components/elements/ConfirmAlert.js b/src/components/elements/ConfirmAlert.js
index 96f4029d..37e6a450 100644
--- a/src/components/elements/ConfirmAlert.js
+++ b/src/components/elements/ConfirmAlert.js
@@ -16,8 +16,8 @@ const ConfirmAlert = ({
<p className="h2 mb-2">{title}</p>
<p className="text-gray_r-11 mb-6">{caption}</p>
<div className="flex gap-x-2">
- <button className="flex-1 btn-light" onClick={onClose}>{closeText}</button>
- <button className="flex-1 btn-red" onClick={onSubmit}>{submitText}</button>
+ <button className="flex-1 btn-yellow" onClick={onClose}>{closeText}</button>
+ <button className="flex-1 btn-solid-red" onClick={onSubmit}>{submitText}</button>
</div>
</div>
</>
diff --git a/src/components/elements/Image.js b/src/components/elements/Image.js
index 8981547a..e03d81f7 100644
--- a/src/components/elements/Image.js
+++ b/src/components/elements/Image.js
@@ -1,7 +1,7 @@
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/opacity.css";
-export default function Image({ src, alt, className = "" }) {
+const Image = ({ src, alt, className = "" }) => {
return (
<LazyLoadImage
effect="opacity"
@@ -10,4 +10,10 @@ export default function Image({ src, alt, className = "" }) {
className={className}
/>
);
-} \ No newline at end of file
+}
+
+Image.defaultProps = {
+ test: false
+}
+
+export default Image \ No newline at end of file
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
index 534cfe02..fe74c940 100644
--- a/src/components/layouts/AppBar.js
+++ b/src/components/layouts/AppBar.js
@@ -1,4 +1,4 @@
-import { Bars3Icon, ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, ChevronLeftIcon, HomeIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
import Head from "next/head";
import { useRouter } from "next/router";
import Link from "../elements/Link";
@@ -28,8 +28,8 @@ const AppBar = ({ title }) => {
{/* --- Start Icons */}
<div className="flex gap-x-4 items-center">
- <Link href="/my/wishlist">
- <HeartIcon className="w-6 stroke-2 text-gray_r-12"/>
+ <Link href="/shop/cart">
+ <ShoppingCartIcon className="w-6 stroke-2 text-gray_r-12"/>
</Link>
<Link href="/">
<HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
diff --git a/src/components/products/ProductCategories.js b/src/components/products/ProductCategories.js
index 54ca854b..3b671f29 100644
--- a/src/components/products/ProductCategories.js
+++ b/src/components/products/ProductCategories.js
@@ -18,7 +18,7 @@ const ProductCategory = ({ id }) => {
}, [id, content]);
return (
- <div className="my-6 px-4 pt-4 relative">
+ <div className="p-4 relative bg-yellow_r-2">
{ content ? (
<ProductSlider
products={{
@@ -50,9 +50,13 @@ export default function ProductCategories() {
getContentIds();
}, [ contentIds ]);
- return contentIds.map((contentId) => (
- <LazyLoadComponent placeholder={<SkeletonProduct/>} key={contentId}>
- <ProductCategory id={contentId} />
- </LazyLoadComponent>
- ));
+ return (
+ <div className="flex flex-col gap-y-6">
+ { contentIds.map((contentId) => (
+ <LazyLoadComponent placeholder={<SkeletonProduct/>} key={contentId}>
+ <ProductCategory id={contentId} />
+ </LazyLoadComponent>
+ )) }
+ </div>
+ )
} \ No newline at end of file
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index 11fab069..662a6511 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -19,7 +19,7 @@ export default function ProductSlider({
return (
<>
{ bannerMode && (
- <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (activeIndex > 0 ? 'opacity-10' : 'opacity-100')} />
+ <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (activeIndex > 0 ? 'opacity-0' : 'opacity-100')} />
) }
<Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove} prefix="product">
{ bannerMode && (
diff --git a/src/components/transactions/TransactionStatusBadge.js b/src/components/transactions/TransactionStatusBadge.js
index d8da6033..f94fd3fd 100644
--- a/src/components/transactions/TransactionStatusBadge.js
+++ b/src/components/transactions/TransactionStatusBadge.js
@@ -6,7 +6,7 @@ const TransactionStatusBadge = ({ status }) => {
switch (status) {
case 'cancel':
badgeProps.className.push('badge-solid-red');
- badgeProps.text = 'Batal'
+ badgeProps.text = 'Pesanan Batal'
break;
case 'draft':
badgeProps.className.push('badge-red');
@@ -14,19 +14,23 @@ const TransactionStatusBadge = ({ status }) => {
break;
case 'waiting':
badgeProps.className.push('badge-yellow');
- badgeProps.text = 'Dikonfirmasi'
+ badgeProps.text = 'Pesanan diterima'
break;
case 'sale':
badgeProps.className.push('badge-yellow');
- badgeProps.text = 'Pesanan Diproses'
+ badgeProps.text = 'Pesanan diproses'
break;
case 'shipping':
badgeProps.className.push('badge-green');
- badgeProps.text = 'Pesanan Dikirim'
+ badgeProps.text = 'Pesanan dikirim'
+ break;
+ case 'partial_shipping':
+ badgeProps.className.push('badge-green');
+ badgeProps.text = 'Dikirim sebagian'
break;
case 'done':
badgeProps.className.push('badge-solid-green');
- badgeProps.text = 'Selesai'
+ badgeProps.text = 'Pesanan Selesai'
break;
}
badgeProps.className = badgeProps.className.join(' ');
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js
index 2d27371b..a821480c 100644
--- a/src/components/variants/VariantCard.js
+++ b/src/components/variants/VariantCard.js
@@ -41,6 +41,15 @@ export default function VariantCard({
{product.code || '-'}
{product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
</p>
+ <div className="flex flex-wrap gap-x-1 items-center mt-auto">
+ {product.price.discount_percentage > 0 && (
+ <>
+ <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
+ <span className="badge-red">{product.price.discount_percentage}%</span>
+ </>
+ )}
+ <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
+ </div>
<p className="text-caption-2 text-gray_r-11 mt-1">
{currencyFormat(product.price.price_discount)} × {product.quantity} Barang
</p>
diff --git a/src/components/variants/VariantGroupCard.js b/src/components/variants/VariantGroupCard.js
new file mode 100644
index 00000000..98f2d739
--- /dev/null
+++ b/src/components/variants/VariantGroupCard.js
@@ -0,0 +1,31 @@
+import { useState } from "react"
+import VariantCard from "./VariantCard"
+
+export default function VariantGroupCard({
+ variants,
+ ...props
+}) {
+ const [ showAll, setShowAll ] = useState(false)
+ const variantsToShow = showAll ? variants : variants.slice(0, 2)
+
+ return (
+ <>
+ { variantsToShow?.map((variant, index) => (
+ <VariantCard
+ key={index}
+ data={variant}
+ {...props}
+ />
+ )) }
+ { variants.length > 2 && (
+ <button
+ type="button"
+ className="btn-light py-2 w-full"
+ onClick={() => setShowAll(!showAll)}
+ >
+ { !showAll ? 'Lihat Semua' : 'Tutup' }
+ </button>
+ ) }
+ </>
+ )
+} \ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index dd81e817..65999ff6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -18,6 +18,15 @@ import Footer from "@/components/layouts/Footer";
import Image from "@/components/elements/Image";
import ProductCategories from "@/components/products/ProductCategories";
+const swiperBanner = {
+ pagination: { dynamicBullets: true },
+ autoplay: {
+ delay: 6000,
+ disableOnInteraction: false
+ },
+ modules: [Pagination, Autoplay]
+}
+
export async function getServerSideProps() {
const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
@@ -48,12 +57,9 @@ export default function Home({ heroBanners }) {
<Layout>
<Swiper
slidesPerView={1}
- pagination={{dynamicBullets: true}}
- modules={[Pagination, Autoplay]}
- autoplay={{
- delay: 6000,
- disableOnInteraction: false
- }}
+ pagination={swiperBanner.pagination}
+ modules={swiperBanner.modules}
+ autoplay={swiperBanner.autoplay}
>
{
heroBanners?.map((banner, index) => (
@@ -79,7 +85,7 @@ export default function Home({ heroBanners }) {
}
</Swiper>
</div>
- <div className="my-6 p-4 pt-0">
+ <div className="my-6 p-4 py-0">
<h2 className="mb-4">Produk Populer</h2>
<ProductSlider products={popularProducts} simpleProductTitleLine />
</div>
diff --git a/src/pages/my/address/index.js b/src/pages/my/address/index.js
index 7026d5ea..5cad4410 100644
--- a/src/pages/my/address/index.js
+++ b/src/pages/my/address/index.js
@@ -56,7 +56,7 @@ export default function Address() {
return (
<div
key={index}
- className={"p-4 rounded-md border " + (selectedAdress && selectedAdress == address.id ? "border-yellow_r-7 bg-yellow_r-8" : "border-gray_r-7") }
+ className={"p-4 rounded-md border " + (selectedAdress && selectedAdress == address.id ? "bg-gray_r-4" : "border-gray_r-7") }
>
<div onClick={() => changeSelectedAddress(address.id)}>
<div className="flex gap-x-2" >
@@ -73,7 +73,7 @@ export default function Address() {
{ address.street }
</p>
</div>
- <Link href={`/my/address/${address.id}/edit`} className="btn-light mt-3 w-full text-gray_r-11">Ubah Alamat</Link>
+ <Link href={`/my/address/${address.id}/edit`} className="btn-light bg-white mt-3 w-full text-gray_r-11">Ubah Alamat</Link>
</div>
);
}) }
diff --git a/src/pages/my/invoices.js b/src/pages/my/invoices.js
index ed9ba660..9b2e77dc 100644
--- a/src/pages/my/invoices.js
+++ b/src/pages/my/invoices.js
@@ -1,71 +1,71 @@
-import WithAuth from "@/components/auth/WithAuth";
-import Alert from "@/components/elements/Alert";
-import Link from "@/components/elements/Link";
-import AppBar from "@/components/layouts/AppBar";
-import Layout from "@/components/layouts/Layout";
-import apiOdoo from "@/core/utils/apiOdoo";
-import { useAuth } from "@/core/utils/auth";
-import currencyFormat from "@/core/utils/currencyFormat";
-import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
-import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import { useEffect, useRef, useState } from "react";
+import WithAuth from "@/components/auth/WithAuth"
+import Alert from "@/components/elements/Alert"
+import Link from "@/components/elements/Link"
+import Pagination from "@/components/elements/Pagination"
+import AppBar from "@/components/layouts/AppBar"
+import Layout from "@/components/layouts/Layout"
+import apiOdoo from "@/core/utils/apiOdoo"
+import { useAuth } from "@/core/utils/auth"
+import currencyFormat from "@/core/utils/currencyFormat"
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup"
+import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
+import { useRouter } from "next/router"
+import { useEffect, useRef, useState } from "react"
export default function Invoices() {
- const [ auth ] = useAuth();
- const router = useRouter();
+ const [ auth ] = useAuth()
+ const router = useRouter()
const {
q,
page = 1
- } = router.query;
+ } = router.query
- const [ invoices, setInvoices ] = useState([]);
- const [ activePopupId, setActivePopupId ] = useState(null);
+ const [ invoices, setInvoices ] = useState([])
- const [ pageCount, setPageCount ] = useState(0);
- const [ isLoading, setIsLoading ] = useState(true);
+ const [ pageCount, setPageCount ] = useState(0)
+ const [ isLoading, setIsLoading ] = useState(true)
- const searchQueryRef = useRef();
+ const searchQueryRef = useRef()
useEffect(() => {
const loadInvoices = async () => {
if (auth) {
- const limit = 10;
- let offset = (page - 1) * 10;
- let queryParams = [`limit=${limit}`, `offset=${offset}`];
- if (q) queryParams.push(`name=${q}`);
- queryParams = queryParams.join('&');
- queryParams = queryParams ? '?' + queryParams : '';
+ const limit = 10
+ let offset = (page - 1) * 10
+ let queryParams = [`limit=${limit}`, `offset=${offset}`]
+ if (q) queryParams.push(`name=${q}`)
+ queryParams = queryParams.join('&')
+ queryParams = queryParams ? '?' + queryParams : ''
- const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`);
- setInvoices(dataInvoices);
- setPageCount(Math.ceil(dataInvoices.sale_order_total / limit));
- setIsLoading(false);
- };
- };
- loadInvoices();
- }, [ auth, q, page ]);
+ const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`)
+ setInvoices(dataInvoices)
+ setPageCount(Math.ceil(dataInvoices.sale_order_total / limit))
+ setIsLoading(false)
+ }
+ }
+ loadInvoices()
+ }, [ auth, q, page ])
const actionSearch = (e) => {
- e.preventDefault();
- let queryParams = [];
- if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`);
- queryParams = queryParams.join('&');
- queryParams = queryParams ? `?${queryParams}` : '';
- router.push(`/my/invoices${queryParams}`);
- };
+ e.preventDefault()
+ let queryParams = []
+ if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`)
+ queryParams = queryParams.join('&')
+ queryParams = queryParams ? `?${queryParams}` : ''
+ router.push(`/my/invoices${queryParams}`)
+ }
const downloadInvoice = (data) => {
- const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`;
- window.open(url, 'download');
- closePopup();
- };
+ const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`
+ window.open(url, 'download')
+ closePopup()
+ }
const downloadTaxInvoice = (data) => {
- const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${data.token}`;
- window.open(url, 'download');
- closePopup();
- };
+ const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${data.token}`
+ window.open(url, 'download')
+ closePopup()
+ }
const childrenPopup = (data) => (
<div className="flex flex-col gap-y-6">
@@ -83,7 +83,7 @@ export default function Invoices() {
Download Faktur Pajak
</button>
</div>
- );
+ )
const {
closePopup,
@@ -92,7 +92,7 @@ export default function Invoices() {
} = useBottomPopup({
title: 'Lainnya',
children: childrenPopup
- });
+ })
return (
<WithAuth>
@@ -169,8 +169,12 @@ export default function Invoices() {
</div>
)) }
</div>
+
+ <div className="pb-6 pt-2">
+ <Pagination currentPage={page} pageCount={pageCount} url={`/my/invoices${q ? `?q=${q}` : ''}`} />
+ </div>
{ BottomPopup }
</Layout>
</WithAuth>
- );
+ )
} \ No newline at end of file
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 51004839..fb806aa4 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -6,7 +6,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
-import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
@@ -19,6 +18,7 @@ import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
import { toast } from "react-hot-toast";
import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
import getFileBase64 from "@/core/utils/getFileBase64";
+import VariantGroupCard from "@/components/variants/VariantGroupCard";
export default function DetailTransaction() {
const router = useRouter();
@@ -116,6 +116,16 @@ export default function DetailTransaction() {
window.open(url, 'download')
};
+ const checkout = async () => {
+ if (!transaction.purchase_order_file) {
+ toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan')
+ return
+ }
+ await apiOdoo('POST', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}/checkout`)
+ toast.success('Berhasil melanjutkan pesanan')
+ loadTransaction()
+ }
+
return (
<WithAuth>
<Layout className="pb-4">
@@ -166,13 +176,10 @@ export default function DetailTransaction() {
<p className="h2 p-4">Detail Produk</p>
<div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
- { transaction?.products?.map((product, index) => (
- <VariantCard
- key={index}
- data={product}
- buyMore
- />
- )) }
+ <VariantGroupCard
+ variants={transaction?.products}
+ buyMore
+ />
<div className="flex justify-between mt-3 font-medium">
<p>Total Belanja</p>
<p>{ currencyFormat(transaction?.amount_total || 0) }</p>
@@ -219,6 +226,14 @@ export default function DetailTransaction() {
<LineDivider />
<div className="px-4">
+ { transaction?.status == 'draft' && (
+ <button
+ className="btn-yellow w-full mt-4"
+ onClick={checkout}
+ >
+ Lanjutkan Transaksi
+ </button>
+ ) }
<button
className="btn-light w-full mt-4"
disabled={transaction?.status != 'draft'}
@@ -226,13 +241,15 @@ export default function DetailTransaction() {
>
Download Quotation
</button>
- <button
- className="btn-light w-full mt-4"
- disabled={transaction?.status != 'waiting'}
- onClick={() => openConfirmAlert(transaction)}
- >
- Batalkan Transaksi
- </button>
+ { transaction?.status != 'draft' && (
+ <button
+ className="btn-light w-full mt-4"
+ disabled={transaction?.status != 'waiting'}
+ onClick={() => openConfirmAlert(transaction)}
+ >
+ Batalkan Transaksi
+ </button>
+ ) }
</div>
</>
) : (
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index ef62bb23..1178781b 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -207,13 +207,13 @@ export default function Cart() {
{product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
</p>
<div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
- <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
{product.price.discount_percentage > 0 && (
<>
- <span className="badge-red">{product.price.discount_percentage}%</span>
<p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
+ <span className="badge-red">{product.price.discount_percentage}%</span>
</>
)}
+ <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
</div>
<div className="flex items-center">
<p className="mr-auto text-caption-2 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0a1b7a3d..b871a325 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -378,10 +378,6 @@ html, body {
@apply hidden;
}
-.swiper[prefix="product"] {
- @apply pb-4;
-}
-
.swiper-slide {
@apply !h-auto;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 20:53:51 +0000