summaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/shop/cart.js277
1 files changed, 139 insertions, 138 deletions
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 5a228077..f4a07295 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -161,167 +161,168 @@ export default function Cart() {
<Layout>
<AppBar title="Keranjang Saya" />
- <ProgressBar
- current={1}
- labels={['Keranjang', 'Pembayaran', 'Selesai']}
- />
-
- <hr className="h-1.5 bg-gray_r-3 border-none"/>
-
- {/* --- Start Alert */}
- {!isLoadingProducts && (
- <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
- <div>
- <ExclamationTriangleIcon className="w-8"/>
- </div>
- <span>
- {products.length > 0 ? (
- <>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</>
- ) : (
- <>Anda belum menambahkan barang apapun ke keranjang.</>
- )}
- </span>
- </Alert>
- )}
- {/* ---- End Alert */}
-
{isLoadingProducts && (
<div className="flex justify-center items-center gap-x-3">
<Spinner className="w-4 h-4 text-gray_r-8 fill-gray_r-12" /> <span>Loading...</span>
</div>
)}
- <hr className="h-1.5 bg-gray_r-3 border-none"/>
+ { !isLoadingProducts && products.length == 0 && (
+ <div className="text-center mt-14">
+ <ExclamationTriangleIcon className="w-12 mx-auto"/>
+ <p className="mt-2 h2">Keranjang belanja anda masih kosong.</p>
+ <Link href="/" className="btn-yellow text-gray_r-12 mx-auto mt-4">Mulai Belanja</Link>
+ </div>
+ ) }
+
+ { !isLoadingProducts && products.length > 0 && (
+ <>
+ <ProgressBar
+ current={1}
+ labels={['Keranjang', 'Pembayaran', 'Selesai']}
+ />
- <div className="p-4">
- {/* [Start] Product List */}
- <div className="flex flex-col gap-y-6">
- {products.map((product, index) => (
- <div className="flex gap-x-3" key={index}>
- <div className="w-4/12 flex items-center gap-x-2">
- <button
- className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')}
- onClick={() => toggleProductToProcess(product.id)}
- ></button>
- <Image
- src={product.parent.image}
- alt={product.parent.name}
- className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
- />
+ <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
+ {/* --- Start Alert */}
+ <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
+ <div>
+ <ExclamationTriangleIcon className="w-8"/>
</div>
- <div className="w-8/12 flex flex-col">
- <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
- {product.parent.name}
- </Link>
- <p className="text-caption-2 text-gray_r-11 mt-1">
- {product.code || '-'}
- {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>
- </>
- ) : ''}
-
- </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>
- <div className="flex gap-x-2 items-center">
- <button
- className="btn-red p-2 rounded"
- onClick={() => showDeleteConfirmation(product.id)}
- >
- <TrashIcon className="text-red_r-11 w-3"/>
- </button>
+ <span>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</span>
+ </Alert>
+ {/* ---- End Alert */}
+
+ <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
+ <div className="p-4">
+ {/* [Start] Product List */}
+ <div className="flex flex-col gap-y-6">
+ {products.map((product, index) => (
+ <div className="flex gap-x-3" key={index}>
+ <div className="w-4/12 flex items-center gap-x-2">
<button
- className="btn-light p-2 rounded"
- disabled={product.quantity == 1}
- onClick={() => minusQuantity(product.id)}
- >
- <MinusIcon className={'text-gray_r-12 w-3' + (product.quantity == 1 ? ' text-gray_r-11' : '')}/>
- </button>
- <input
- type="number"
- className="bg-transparent border-none w-6 text-center outline-none"
- onBlur={(e) => blurQuantity(product.id, e.target.value)}
- onChange={(e) => updateQuantity(product.id, e.target.value)}
- value={product.quantity}
+ className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')}
+ onClick={() => toggleProductToProcess(product.id)}
+ ></button>
+ <Image
+ src={product.parent.image}
+ alt={product.parent.name}
+ className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
/>
- <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
- <PlusIcon className="text-gray_r-12 w-3"/>
- </button>
+ </div>
+ <div className="w-8/12 flex flex-col">
+ <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
+ {product.parent.name}
+ </Link>
+ <p className="text-caption-2 text-gray_r-11 mt-1">
+ {product.code || '-'}
+ {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>
+ </>
+ ) : ''}
+
+ </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>
+ <div className="flex gap-x-2 items-center">
+ <button
+ className="btn-red p-2 rounded"
+ onClick={() => showDeleteConfirmation(product.id)}
+ >
+ <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={'text-gray_r-12 w-3' + (product.quantity == 1 ? ' text-gray_r-11' : '')}/>
+ </button>
+ <input
+ type="number"
+ className="bg-transparent border-none w-6 text-center outline-none"
+ onBlur={(e) => blurQuantity(product.id, e.target.value)}
+ onChange={(e) => updateQuantity(product.id, e.target.value)}
+ value={product.quantity}
+ />
+ <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
+ <PlusIcon className="text-gray_r-12 w-3"/>
+ </button>
+ </div>
+ </div>
</div>
</div>
+ ))}
</div>
+ {/* [End] Product List */}
</div>
- ))}
- </div>
- {/* [End] Product List */}
- </div>
- <hr className="h-1.5 bg-gray_r-3 border-none"/>
+ <hr className="h-1.5 bg-gray_r-3 border-none"/>
- <div className="p-4">
- {/* [Start] Review Order */}
- {products.length > 0 ? (
- <div className="p-4 border border-gray_r-6 rounded-md mb-4">
- <div className="flex justify-between items-center">
- <h2>Ringkasan Pesanan</h2>
- {getProductsToProcess().length > 0 ? (
- <p className="text-gray_r-11 text-caption-1">{getProductsToProcess().length} Barang</p>
- ) : ''}
- </div>
- <hr className="my-4 border-gray_r-6"/>
- <div className="flex flex-col gap-y-4">
- <div className="flex gap-x-2 justify-between">
- <p>Subtotal</p>
- <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+ <div className="p-4">
+ {/* [Start] Review Order */}
+ <div className="p-4 border border-gray_r-6 rounded-md mb-4">
+ <div className="flex justify-between items-center">
+ <h2>Ringkasan Pesanan</h2>
+ {getProductsToProcess().length > 0 && (
+ <p className="text-gray_r-11 text-caption-1">{getProductsToProcess().length} Barang</p>
+ )}
</div>
- <div className="flex gap-x-2 justify-between">
- <p>PPN 11%</p>
- <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex flex-col gap-y-4">
+ <div className="flex gap-x-2 justify-between">
+ <p>Subtotal</p>
+ <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>PPN 11%</p>
+ <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>Total Diskon</p>
+ <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+ </div>
</div>
- <div className="flex gap-x-2 justify-between">
- <p>Total Diskon</p>
- <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex gap-x-2 justify-between mb-4">
+ <p>Grand Total</p>
+ <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
</div>
+ <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
+ <p className="text-caption-2 text-gray_r-10 leading-5">
+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
+ </p>
</div>
- <hr className="my-4 border-gray_r-6"/>
- <div className="flex gap-x-2 justify-between mb-4">
- <p>Grand Total</p>
- <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
+ {/* [End] Review Order */}
+
+ {/* [Start] Submit Button */}
+ <div className="flex gap-x-3">
+ <button
+ className="flex-1 btn-light"
+ disabled={getProductsToProcess().length == 0}
+ >
+ Quotation {getProductsToProcess().length > 0 && `(${getProductsToProcess().length})`}
+ </button>
+ <button
+ className="flex-1 btn-yellow"
+ disabled={getProductsToProcess().length == 0}
+ onClick={() => router.push('/shop/checkout')}
+ >
+ Checkout {getProductsToProcess().length > 0 && `(${getProductsToProcess().length})`}
+ </button>
</div>
- <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
- <p className="text-caption-2 text-gray_r-10 leading-5">
- Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
- </p>
- </div>
- ) : ''}
- {/* [End] Review Order */}
+ {/* [End] Submit Button */}
- {/* [Start] Submit Button */}
- {products.length > 0 ? (
- <div className="flex gap-x-3">
- <button
- className="flex-1 btn-light"
- disabled={getProductsToProcess().length == 0}
- >
- Quotation {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
- </button>
- <button
- className="flex-1 btn-yellow"
- disabled={getProductsToProcess().length == 0}
- onClick={() => router.push('/shop/checkout')}
- >
- Checkout {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
- </button>
</div>
- ) : ''}
- {/* [End] Submit Button */}
- </div>
+ </>
+ ) }
</Layout>
</>
);
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 05:35:41 +0000