summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/cart/components/Cart.jsx66
-rw-r--r--src/lib/checkout/api/checkoutApi.js9
-rw-r--r--src/lib/checkout/components/Checkout.jsx90
-rw-r--r--src/lib/checkout/components/CheckoutOld.jsx811
-rw-r--r--src/lib/invoice/components/Invoices.jsx2
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx47
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx7
-rw-r--r--src/lib/promotinProgram/components/HomePage.jsx7
8 files changed, 917 insertions, 122 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 561a0064..31aa034d 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
import NextImage from 'next/image'
import currencyFormat from '@/core/utils/currencyFormat'
import { useEffect, useState } from 'react'
-import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { addCart, deleteItemCart, getCart, getCartApi, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
import { createSlug } from '@/core/utils/slug'
import { useRouter } from 'next/router'
@@ -19,28 +19,34 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
import whatsappUrl from '@/core/utils/whatsappUrl'
import useAuth from '@/core/hooks/useAuth'
-
-const { useQuery } = require('react-query')
-const { getCartApi } = require('../api/CartApi')
-
const Cart = () => {
const router = useRouter()
const [products, setProducts] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
const auth = useAuth()
- const { data: listCart } = useQuery('listCart', getCartApi)
+
+
+ const [cart, setCart] = useState(null)
useEffect(() => {
if (!auth) return
}, [auth])
useEffect(() => {
- if(listCart){
- setProducts(listCart.products)
+ const cart = async () => {
+ const listCart = await getCartApi()
+ setCart(listCart)
}
- }, [listCart])
+ cart()
+ })
+
+ useEffect(() => {
+ if(cart){
+ setProducts(cart.products)
+ setIsLoading(false)
+ }
+ }, [cart])
- console.log('product', products)
- const { cart } = useCart({ enabled: !products })
const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
const [totalTaxAmount, setTotalTaxAmount] = useState(0)
@@ -50,20 +56,6 @@ const Cart = () => {
const [productRecomendation, setProductRecomendation] = useState(null)
- useEffect(() => {
- if (cart.data && !products) {
- const productsWithQuantity = cart.data.map((product) => {
- const productInCart = getItemCart({ productId: product.id })
- if (!productInCart) return
- return {
- ...product,
- quantity: productInCart.quantity,
- selected: productInCart.selected
- }
- })
- setProducts(productsWithQuantity)
- }
- }, [cart, products])
useEffect(() => {
if (!products) return
@@ -73,11 +65,6 @@ const Cart = () => {
let calculateTotalDiscountAmount = 0
for (const product of products) {
if (product.quantity == '') continue
- updateItemCart({
- productId: product.id,
- quantity: product.quantity,
- selected: product.selected
- })
if (!product.selected) continue
let priceBeforeTax = product.price.price / 1.11
@@ -127,8 +114,11 @@ const Cart = () => {
quantity = value != '' && value < 1 ? 1 : value
break
}
- productsToUpdate[productIndex].quantity = quantity
+ let qty = quantity
+ productsToUpdate[productIndex].quantity = qty
+
setProducts([...productsToUpdate])
+ addCart(productId, qty, productsToUpdate[productIndex].selected)
}
const toggleSelected = (productId) => {
@@ -136,8 +126,12 @@ const Cart = () => {
if (productIndex < 0) return
let productsToUpdate = products
- productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
+ let isSelected = !productsToUpdate[productIndex].selected
+ productsToUpdate[productIndex].selected = isSelected
+
+
setProducts([...productsToUpdate])
+ addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
}
const selectedProduct = () => {
@@ -190,13 +184,13 @@ const Cart = () => {
</div>
<div className='flex flex-col gap-y-4 h-screen'>
- {cart.isLoading && (
+ {isLoading && (
<div className='flex justify-center my-4'>
<Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
)}
- {!cart.isLoading && (!products || products?.length == 0) && (
+ {!isLoading && (!products || products?.length == 0) && (
<div className='px-4'>
<Alert className='text-center my-2' type='info'>
Keranjang belanja anda masih kosong
@@ -335,7 +329,7 @@ const Cart = () => {
</tr>
</thead>
<tbody>
- {cart.isLoading && (
+ {isLoading && (
<tr>
<td colSpan={6}>
<div className='flex justify-center my-2'>
@@ -344,7 +338,7 @@ const Cart = () => {
</td>
</tr>
)}
- {!cart.isLoading && (!products || products?.length == 0) && (
+ {!isLoading && (!products || products?.length == 0) && (
<tr>
<td colSpan={6}>Keranjang belanja anda masih kosong</td>
</tr>
diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
index b76c9b7f..94de8721 100644
--- a/src/lib/checkout/api/checkoutApi.js
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -1,7 +1,7 @@
import odooApi from '@/core/api/odooApi'
import { getAuth } from '@/core/utils/auth'
-const checkoutApi = async ({ data }) => {
+export const checkoutApi = async ({ data }) => {
const auth = getAuth()
const dataCheckout = await odooApi(
'POST',
@@ -11,4 +11,9 @@ const checkoutApi = async ({ data }) => {
return dataCheckout
}
-export default checkoutApi
+export const getProductsCheckout = async () => {
+ const id = getAuth()?.id
+ const products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout`)
+
+ return products
+}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 088b641b..09fdbd86 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,15 +4,14 @@ import Link from '@/core/components/elements/Link/Link'
import useAuth from '@/core/hooks/useAuth'
import { getItemAddress } from '@/core/utils/address'
import addressesApi from '@/lib/address/api/addressesApi'
-import CartApi from '@/lib/cart/api/CartApi'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
import React, { useEffect, useRef, useState } from 'react'
import _ from 'lodash'
-import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCartApi } from '@/core/utils/cart'
import currencyFormat from '@/core/utils/currencyFormat'
import { toast } from 'react-hot-toast'
import getFileBase64 from '@/core/utils/getFileBase64'
-import checkoutApi from '../api/checkoutApi'
+// import checkoutApi from '../api/checkoutApi'
import { useRouter } from 'next/router'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import axios from 'axios'
@@ -24,12 +23,18 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
import { createSlug } from '@/core/utils/slug'
import { Button, Modal } from 'flowbite-react'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useQuery } from 'react-query'
const SELF_PICKUP_ID = 32
+const { checkoutApi } = require('../api/checkoutApi')
+const { getProductsCheckout } = require('../api/checkoutApi')
+
const Checkout = () => {
const router = useRouter()
const auth = useAuth()
+ const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
const [selectedAddress, setSelectedAddress] = useState({
shipping: null,
invoicing: null
@@ -66,8 +71,6 @@ const Checkout = () => {
}, [addresses])
const [products, setProducts] = useState(null)
- const [totalAmount, setTotalAmount] = useState(0)
- const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
const [totalWeight, setTotalWeight] = useState(0)
const [priceCheck, setPriceCheck] = useState(false)
const [listExpedisi, setExpedisi] = useState([])
@@ -96,52 +99,10 @@ const Checkout = () => {
}, [])
useEffect(() => {
- const loadProducts = async () => {
- let variantIds = ''
- let { query } = router
- if (query?.productId) {
- variantIds = query.productId
- } else {
- const cart = getCart()
- variantIds = _.filter(cart, (o) => o.selected == true)
- .map((o) => o.productId)
- .join(',')
- }
-
- const dataProducts = await CartApi({ variantIds })
- const productsWithQuantity = dataProducts?.map((product) => {
- if (product.price.priceDiscount == 0) setPriceCheck(true)
- return {
- ...product,
- quantity: query.quantity
- ? query.quantity
- : getItemCart({ productId: product.id }).quantity
- }
- })
- setProducts(productsWithQuantity)
- }
- loadProducts()
- }, [router])
-
- useEffect(() => {
- if (products) {
- let calculateTotalAmount = 0
- let calculateTotalDiscountAmount = 0
- let calcuateTotalWeight = 0
- products.forEach((product) => {
- calculateTotalAmount += product.price.price * product.quantity
- calculateTotalDiscountAmount +=
- (product.price.price - product.price.priceDiscount) * product.quantity
- calcuateTotalWeight += product.weight * product.quantity
- if (product.weight == 0) {
- setCheckWeight(true)
- }
- })
- setTotalAmount(calculateTotalAmount)
- setTotalDiscountAmount(calculateTotalDiscountAmount)
- setTotalWeight(calcuateTotalWeight * 1000)
- }
- }, [products])
+ setProducts(cartCheckout?.products)
+ setCheckWeight(cartCheckout?.hasProductWithoutWeight)
+ setTotalWeight(cartCheckout?.totalWeight.g)
+ }, [cartCheckout])
useEffect(() => {
const loadServiceRajaOngkir = async () => {
@@ -240,7 +201,6 @@ const Checkout = () => {
setIsLoading(false)
window.location.href = payment.data.redirectUrl
}
- const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
return (
<>
@@ -304,19 +264,19 @@ const Checkout = () => {
<div className='flex flex-col gap-y-4'>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Total Belanja</div>
- <div>{currencyFormat(totalAmount)}</div>
+ <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Total Diskon</div>
- <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Subtotal</div>
- <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+ <div>{currencyFormat(cartCheckout?.subtotal)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>PPN 11%</div>
- <div>{currencyFormat(taxTotal)}</div>
+ <div>{currencyFormat(cartCheckout?.tax)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>
@@ -329,10 +289,7 @@ const Checkout = () => {
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(
- totalAmount -
- totalDiscountAmount +
- taxTotal +
+ {currencyFormat(cartCheckout?.grandTotal +
Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
)}
</div>
@@ -526,19 +483,19 @@ const Checkout = () => {
<div className='flex flex-col gap-y-4'>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Total Belanja</div>
- <div>{currencyFormat(totalAmount)}</div>
+ <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Total Diskon</div>
- <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>Subtotal</div>
- <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+ <div>{currencyFormat(cartCheckout?.subtotal)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>PPN 11%</div>
- <div>{currencyFormat(taxTotal)}</div>
+ <div>{currencyFormat(cartCheckout?.tax)}</div>
</div>
<div className='flex gap-x-2 justify-between'>
<div className='text-gray_r-11'>
@@ -554,10 +511,7 @@ const Checkout = () => {
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(
- totalAmount -
- totalDiscountAmount +
- taxTotal +
+ {currencyFormat(cartCheckout?.grandTotal +
Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
)}
</div>
diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx
new file mode 100644
index 00000000..088b641b
--- /dev/null
+++ b/src/lib/checkout/components/CheckoutOld.jsx
@@ -0,0 +1,811 @@
+import Alert from '@/core/components/elements/Alert/Alert'
+import Divider from '@/core/components/elements/Divider/Divider'
+import Link from '@/core/components/elements/Link/Link'
+import useAuth from '@/core/hooks/useAuth'
+import { getItemAddress } from '@/core/utils/address'
+import addressesApi from '@/lib/address/api/addressesApi'
+import CartApi from '@/lib/cart/api/CartApi'
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import React, { useEffect, useRef, useState } from 'react'
+import _ from 'lodash'
+import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { toast } from 'react-hot-toast'
+import getFileBase64 from '@/core/utils/getFileBase64'
+import checkoutApi from '../api/checkoutApi'
+import { useRouter } from 'next/router'
+import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
+import axios from 'axios'
+import Image from '@/core/components/elements/Image/Image'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import ExpedisiList from '../api/ExpedisiList'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { createSlug } from '@/core/utils/slug'
+import { Button, Modal } from 'flowbite-react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+
+const SELF_PICKUP_ID = 32
+
+const Checkout = () => {
+ const router = useRouter()
+ const auth = useAuth()
+ const [selectedAddress, setSelectedAddress] = useState({
+ shipping: null,
+ invoicing: null
+ })
+ const [addresses, setAddresses] = useState(null)
+
+ useEffect(() => {
+ if (!auth) return
+
+ const getAddresses = async () => {
+ const dataAddresses = await addressesApi()
+ setAddresses(dataAddresses)
+ }
+
+ getAddresses()
+ }, [auth])
+
+ useEffect(() => {
+ if (!addresses) return
+
+ const matchAddress = (key) => {
+ const addressToMatch = getItemAddress(key)
+ const foundAddress = addresses.filter((address) => address.id == addressToMatch)
+ if (foundAddress.length > 0) {
+ return foundAddress[0]
+ }
+ return addresses[0]
+ }
+
+ setSelectedAddress({
+ shipping: matchAddress('shipping'),
+ invoicing: matchAddress('invoicing')
+ })
+ }, [addresses])
+
+ const [products, setProducts] = useState(null)
+ const [totalAmount, setTotalAmount] = useState(0)
+ const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+ const [totalWeight, setTotalWeight] = useState(0)
+ const [priceCheck, setPriceCheck] = useState(false)
+ const [listExpedisi, setExpedisi] = useState([])
+ const [listserviceExpedisi, setListServiceExpedisi] = useState([])
+ const [selectedExpedisi, setSelectedExpedisi] = useState(0)
+ const [selectedCarrierId, setselectedCarrierId] = useState(0)
+ const [selectedCarrier, setselectedCarrier] = useState(0)
+ const [biayaKirim, setBiayaKirim] = useState(0)
+ const [checkWeigth, setCheckWeight] = useState(false)
+ const [selectedServiceType, setSelectedServiceType] = useState(null)
+ const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
+ const [etd, setEtd] = useState(null)
+ const [etdFix, setEtdFix] = useState(null)
+
+ useEffect(() => {
+ const loadExpedisi = async () => {
+ let dataExpedisi = await ExpedisiList()
+ dataExpedisi = dataExpedisi.map((expedisi) => ({
+ value: expedisi.id,
+ label: expedisi.name,
+ carrierId: expedisi.deliveryCarrierId
+ }))
+ setExpedisi(dataExpedisi)
+ }
+ loadExpedisi()
+ }, [])
+
+ useEffect(() => {
+ const loadProducts = async () => {
+ let variantIds = ''
+ let { query } = router
+ if (query?.productId) {
+ variantIds = query.productId
+ } else {
+ const cart = getCart()
+ variantIds = _.filter(cart, (o) => o.selected == true)
+ .map((o) => o.productId)
+ .join(',')
+ }
+
+ const dataProducts = await CartApi({ variantIds })
+ const productsWithQuantity = dataProducts?.map((product) => {
+ if (product.price.priceDiscount == 0) setPriceCheck(true)
+ return {
+ ...product,
+ quantity: query.quantity
+ ? query.quantity
+ : getItemCart({ productId: product.id }).quantity
+ }
+ })
+ setProducts(productsWithQuantity)
+ }
+ loadProducts()
+ }, [router])
+
+ useEffect(() => {
+ if (products) {
+ let calculateTotalAmount = 0
+ let calculateTotalDiscountAmount = 0
+ let calcuateTotalWeight = 0
+ products.forEach((product) => {
+ calculateTotalAmount += product.price.price * product.quantity
+ calculateTotalDiscountAmount +=
+ (product.price.price - product.price.priceDiscount) * product.quantity
+ calcuateTotalWeight += product.weight * product.quantity
+ if (product.weight == 0) {
+ setCheckWeight(true)
+ }
+ })
+ setTotalAmount(calculateTotalAmount)
+ setTotalDiscountAmount(calculateTotalDiscountAmount)
+ setTotalWeight(calcuateTotalWeight * 1000)
+ }
+ }, [products])
+
+ useEffect(() => {
+ const loadServiceRajaOngkir = async () => {
+ const body = {
+ origin: 2127,
+ destination: selectedAddress.shipping.rajaongkirCityId,
+ weight: totalWeight,
+ courier: selectedCarrier,
+ originType: 'subdistrict',
+ destinationType: 'subdistrict'
+ }
+ setBiayaKirim(0)
+ const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
+ setListServiceExpedisi(dataService.data[0].costs)
+ if (dataService.data[0].costs[0]) {
+ setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value)
+ setselectedExpedisiService(
+ dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service
+ )
+ setEtd(dataService.data[0].costs[0]?.cost[0].etd)
+ toast.success('Harap pilih tipe layanan pengiriman')
+ } else {
+ toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+ }
+ }
+ if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
+ loadServiceRajaOngkir()
+ } else {
+ setListServiceExpedisi()
+ setBiayaKirim(0)
+ setselectedExpedisiService()
+ setEtd()
+ }
+ }, [selectedCarrier, selectedAddress, totalWeight])
+
+ useEffect(() => {
+ if (selectedServiceType) {
+ let serviceType = selectedServiceType.split(',')
+ setBiayaKirim(serviceType[0])
+ setselectedExpedisiService(serviceType[1])
+ setEtd(serviceType[2])
+ }
+ }, [selectedServiceType])
+
+ useEffect(() => {
+ if (etd) setEtdFix(calculateEstimatedArrival(etd))
+ }, [etd])
+
+ useEffect(() => {
+ if (selectedExpedisi) {
+ let serviceType = selectedExpedisi.split(',')
+ setselectedCarrier(serviceType[0])
+ setselectedCarrierId(serviceType[1])
+ setListServiceExpedisi([])
+ }
+ }, [selectedExpedisi])
+
+ const poNumber = useRef(null)
+ const poFile = useRef(null)
+
+ const [isLoading, setIsLoading] = useState(false)
+
+ const checkout = async () => {
+ const file = poFile.current.files[0]
+ if (typeof file !== 'undefined' && file.size > 5000000) {
+ toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
+ return
+ }
+ setIsLoading(true)
+ const productOrder = products.map((product) => ({
+ product_id: product.id,
+ quantity: product.quantity
+ }))
+ let data = {
+ partner_shipping_id: auth.partnerId,
+ partner_invoice_id: auth.partnerId,
+ order_line: JSON.stringify(productOrder),
+ delivery_amount: biayaKirim,
+ carrier_id: selectedCarrierId,
+ delivery_service_type: selectedExpedisiService,
+ type: 'sale_order'
+ }
+ if (poNumber.current.value) data.po_number = poNumber.current.value
+ if (typeof file !== 'undefined') data.po_file = await getFileBase64(file)
+
+ const isCheckouted = await checkoutApi({ data })
+ if (!isCheckouted?.id) {
+ toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
+ return
+ }
+
+ for (const product of products) deleteItemCart({ productId: product.id })
+ const payment = await axios.post(
+ `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
+ )
+ setIsLoading(false)
+ window.location.href = payment.data.redirectUrl
+ }
+ const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+ return (
+ <>
+ <MobileView>
+ <div className='p-4'>
+ <Alert type='info' className='text-caption-2 flex gap-x-3'>
+ <div>
+ <ExclamationCircleIcon className='w-7 text-blue-700' />
+ </div>
+ <span className='leading-5'>
+ Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami
+ disini
+ </span>
+ </Alert>
+ </div>
+
+ <Divider />
+
+ {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
+ {selectedCarrierId != SELF_PICKUP_ID && (
+ <>
+ <SectionAddress
+ address={selectedAddress.shipping}
+ label='Alamat Pengiriman'
+ url='/my/address?select=shipping'
+ />
+ <Divider />
+ <SectionAddress
+ address={selectedAddress.invoicing}
+ label='Alamat Penagihan'
+ url='/my/address?select=invoice'
+ />
+ </>
+ )}
+ <Divider />
+ <SectionValidation address={selectedAddress.invoicing} />
+ <SectionExpedisi
+ address={selectedAddress.shipping}
+ listExpedisi={listExpedisi}
+ setSelectedExpedisi={setSelectedExpedisi}
+ checkWeigth={checkWeigth}
+ />
+ <Divider />
+ <SectionListService
+ listserviceExpedisi={listserviceExpedisi}
+ setSelectedServiceType={setSelectedServiceType}
+ />
+
+ <div className='p-4 flex flex-col gap-y-4'>
+ {products && <VariantGroupCard openOnClick={false} variants={products} />}
+ </div>
+
+ <Divider />
+
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Ringkasan Pesanan</div>
+ <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+ </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'>
+ <div className='text-gray_r-11'>Total Belanja</div>
+ <div>{currencyFormat(totalAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Total Diskon</div>
+ <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Subtotal</div>
+ <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>PPN 11%</div>
+ <div>{currencyFormat(taxTotal)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>
+ Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+ </div>
+ <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
+ </div>
+ </div>
+ <hr className='my-4 border-gray_r-6' />
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>Grand Total</div>
+ <div className='font-semibold text-gray_r-12'>
+ {currencyFormat(
+ totalAmount -
+ totalDiscountAmount +
+ taxTotal +
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
+ </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' className='inline font-normal'>
+ Syarat & Ketentuan
+ </Link>{' '}
+ yang berlaku
+ </p>
+ </div>
+
+ <Divider />
+
+ <div className='p-4'>
+ <div className='font-medium'>Purchase Order</div>
+
+ <div className='mt-4 flex gap-x-3'>
+ <div className='w-6/12'>
+ <label className='form-label font-normal'>Dokumen PO</label>
+ <input
+ type='file'
+ className='form-input mt-2 h-12'
+ accept='image/*,application/pdf'
+ ref={poFile}
+ />
+ </div>
+ <div className='w-6/12'>
+ <label className='form-label font-normal'>Nomor PO</label>
+ <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
+ </div>
+ </div>
+ <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
+ </div>
+
+ <Divider />
+
+ <div className='flex gap-x-3 p-4'>
+ <button
+ className='flex-1 btn-yellow'
+ onClick={checkout}
+ disabled={
+ isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
+ }
+ >
+ {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+ </button>
+ </div>
+ {priceCheck && (
+ <div className='px-4 mb-4'>
+ <span className='text-danger-500'>
+ *) Terdapat produk yang belum memiliki harga,{' '}
+ <a href={whatsappUrl()} className='underline'>
+ Hubungi Kami untuk meminta harga.
+ </a>
+ </span>
+ </div>
+ )}
+ </MobileView>
+
+ <DesktopView>
+ <div className='container mx-auto py-10 flex'>
+ <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
+ {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
+ {selectedCarrierId != SELF_PICKUP_ID && (
+ <>
+ <SectionAddress
+ address={selectedAddress.shipping}
+ label='Alamat Pengiriman'
+ url='/my/address?select=shipping'
+ />
+ <Divider />
+ <SectionAddress
+ address={selectedAddress.invoicing}
+ label='Alamat Penagihan'
+ url='/my/address?select=invoice'
+ />
+ </>
+ )}
+ <Divider />
+ <SectionValidation address={selectedAddress.invoicing} />
+ <SectionExpedisi
+ address={selectedAddress.shipping}
+ listExpedisi={listExpedisi}
+ setSelectedExpedisi={setSelectedExpedisi}
+ checkWeigth={checkWeigth}
+ />
+ <Divider />
+ <SectionListService
+ listserviceExpedisi={listserviceExpedisi}
+ setSelectedServiceType={setSelectedServiceType}
+ />
+
+ <div className='p-4'>
+ <div className='font-medium'>Detail Pesanan</div>
+ <table className='table-checkout'>
+ <thead>
+ <tr>
+ <th>Nama Produk</th>
+ <th>Jumlah</th>
+ <th>Harga</th>
+ <th>Subtotal</th>
+ </tr>
+ </thead>
+ <tbody>
+ {products?.map((product) => (
+ <tr key={product.id}>
+ <td className='flex'>
+ <div className='w-[20%] flex-shrink-0'>
+ <Image
+ src={product?.parent?.image}
+ alt={product?.name}
+ className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+ />
+ </div>
+ <div className='px-2 text-left'>
+ <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+ {product?.parent?.name}
+ </div>
+ <div className='text-gray_r-11 mt-2'>
+ {product?.code}{' '}
+ {product?.attributes.length > 0
+ ? `| ${product?.attributes.join(', ')}`
+ : ''}
+ </div>
+ <div className='text-gray_r-11 mt-2'>
+ Berat item : {product?.weight} Kg
+ </div>
+ </div>
+ </td>
+ <td>
+ <input
+ className='form-input w-16 py-2 text-center bg-gray_r-1'
+ type='number'
+ value={product?.quantity}
+ disabled
+ />
+ </td>
+ <td>
+ {product?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center justify-center mt-3'>
+ <div className='text-gray_r-11 line-through text-caption-1'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ <div className='badge-solid-red'>
+ {product?.price?.discountPercentage}%
+ </div>
+ </div>
+ )}
+ <div className='font-normal mt-1'>
+ {product.price.priceDiscount > 0
+ ? currencyFormat(product?.price?.priceDiscount)
+ : 'Call For Price'}
+ </div>
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {product.price.priceDiscount > 0 ? (
+ currencyFormat(product?.price?.priceDiscount * product?.quantity)
+ ) : (
+ <a
+ href={whatsappUrl('product', {
+ name: product.name,
+ url: createSlug('/shop/product/', product.name, product.id, true)
+ })}
+ className='underline'
+ >
+ Call For Price{' '}
+ </a>
+ )}
+ </div>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div className='w-1/4 pl-4'>
+ <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Ringkasan Pesanan</div>
+ <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+ </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'>
+ <div className='text-gray_r-11'>Total Belanja</div>
+ <div>{currencyFormat(totalAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Total Diskon</div>
+ <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Subtotal</div>
+ <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>PPN 11%</div>
+ <div>{currencyFormat(taxTotal)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>
+ Biaya Kirim
+ <p className='text-xs mt-3'>{etdFix}</p>
+ </div>
+ <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
+ </div>
+ </div>
+
+ <hr className='my-4 border-gray_r-6' />
+
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>Grand Total</div>
+ <div className='font-semibold text-gray_r-12'>
+ {currencyFormat(
+ totalAmount -
+ totalDiscountAmount +
+ taxTotal +
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
+ </div>
+ <p className='text-caption-2 text-gray_r-11 leading-5'>
+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
+ <Link href='/syarat-ketentuan' className='inline font-normal'>
+ Syarat & Ketentuan
+ </Link>{' '}
+ yang berlaku
+ </p>
+
+ <hr className='my-4 border-gray_r-6' />
+
+ <div className='font-medium mt-4'>
+ Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span>
+ </div>
+
+ <div className='mt-4 flex gap-x-3'>
+ <div className='w-6/12'>
+ <label className='form-label font-normal'>Dokumen PO</label>
+ <input
+ type='file'
+ className='form-input mt-2 h-12'
+ accept='image/*,application/pdf'
+ ref={poFile}
+ />
+ </div>
+ <div className='w-6/12'>
+ <label className='form-label font-normal'>Nomor PO</label>
+ <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
+ </div>
+ </div>
+ <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
+
+ <hr className='my-4 border-gray_r-6' />
+
+ <button
+ className='w-full btn-yellow mt-4'
+ onClick={checkout}
+ disabled={
+ isLoading ||
+ !products ||
+ products?.length == 0 ||
+ priceCheck ||
+ selectedCarrier == 0 ||
+ (selectedCarrier != 1 && biayaKirim == 0)
+ }
+ >
+ {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+ </button>
+ {priceCheck && (
+ <div className='mt-4'>
+ <span className='text-danger-500'>
+ *) Terdapat produk yang belum memiliki harga,{' '}
+ <a href={whatsappUrl()} className='underline'>
+ Hubungi Kami untuk meminta harga.
+ </a>
+ </span>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ </DesktopView>
+ </>
+ )
+}
+
+const SectionAddress = ({ address, label, url }) => (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>{label}</div>
+ <Link className='text-caption-1' href={url}>
+ Pilih Alamat Lain
+ </Link>
+ </div>
+
+ {address && (
+ <div className='mt-4 text-caption-1'>
+ <div className='badge-red mb-2'>
+ {address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'}
+ </div>
+ <p className='font-medium'>{address.name}</p>
+ <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
+ <p className='mt-1 text-gray_r-11'>
+ {address.street}, {address?.city?.name}
+ </p>
+ </div>
+ )}
+ </div>
+)
+
+const SectionValidation = ({ address }) =>
+ address?.rajaongkirCityId == 0 && (
+ <BottomPopup active={true} title='Update Alamat'>
+ <div className='leading-7 text-gray_r-12/80'>
+ Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
+ </div>
+ <div className='flex justify-center mt-6 gap-x-4'>
+ <Link
+ className='btn-solid-red w-full md:w-fit text-white'
+ href={`/my/address/${address?.id}/edit`}
+ >
+ Update Alamat
+ </Link>
+ </div>
+ </BottomPopup>
+ )
+
+const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+ address?.rajaongkirCityId > 0 && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Pilih Expedisi : </div>
+ <div>
+ <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+ <option value='0,0'>Pengiriman</option>
+ <option value='1,32'>SELF PICKUP</option>
+ {checkWeigth != true &&
+ listExpedisi.map((expedisi) => (
+ <option
+ disabled={checkWeigth}
+ value={expedisi.label + ',' + expedisi.carrierId}
+ key={expedisi.value}
+ >
+ {' '}
+ {expedisi.label.toUpperCase()}{' '}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ {checkWeigth == true && (
+ <p className='mt-4 text-gray_r-11 leading-6'>
+ Mohon maaf, pengiriman hanya tersedia untuk self pickup karena terdapat barang yang belum
+ diatur beratnya. Mohon atur berat barang dengan menghubungi admin melalui{' '}
+ <a
+ className='text-danger-500 inline'
+ href='https://api.whatsapp.com/send?phone=628128080622'
+ >
+ tautan ini
+ </a>
+ </p>
+ )}
+ </div>
+ )
+
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+ listserviceExpedisi?.length > 0 && (
+ <>
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Service Type Expedisi : </div>
+ <div>
+ <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}>
+ {listserviceExpedisi.map((service) => (
+ <option
+ value={
+ service.cost[0].value +
+ ',' +
+ service.description +
+ '-' +
+ service.service +
+ ',' +
+ extractDuration(service.cost[0].etd)
+ }
+ key={service.service}
+ >
+ {' '}
+ {service.description} - {service.service.toUpperCase()}
+ {extractDuration(service.cost[0].etd) &&
+ ` (Estimasi Tiba ${extractDuration(service.cost[0].etd)} Hari)`}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ </div>
+ <Divider />
+ </>
+ )
+
+function addDays(date, days) {
+ const result = new Date(date)
+ result.setDate(result.getDate() + days)
+ return result
+}
+
+function formatDate(date) {
+ const day = date.getDate()
+ const month = date.toLocaleString('default', { month: 'short' })
+ return `${day} ${month}`
+}
+
+function calculateEstimatedArrival(duration) {
+ if (duration) {
+ let estimationDate = duration.split('-')
+ estimationDate[0] = parseInt(estimationDate[0])
+ estimationDate[1] = parseInt(estimationDate[1])
+ const from = addDays(new Date(), estimationDate[0] + 3)
+ const to = addDays(new Date(), estimationDate[1] + 3)
+
+ let etdText = `*Estimasi tiba ${formatDate(from)}`
+
+ if (estimationDate[1] > estimationDate[0]) {
+ etdText += ` - ${formatDate(to)}`
+ }
+
+ return etdText
+ }
+
+ return ''
+}
+
+const extractDuration = (text) => {
+ const matches = text.match(/\d+(?:-\d+)?/g)
+
+ if (matches && matches.length === 1) {
+ const parts = matches[0].split('-')
+ const min = parseInt(parts[0])
+ const max = parseInt(parts[1])
+
+ if (min === max) {
+ return min.toString()
+ }
+
+ return matches[0]
+ }
+
+ return ''
+}
+
+const PickupAddress = ({ label }) => (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>{label}</div>
+ </div>
+ <div className='mt-4 text-caption-1'>
+ <p className='font-medium'>Indoteknik</p>
+ <p className='mt-2 mb-2 text-gray_r-11 leading-6'>
+ Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. Penjaringan, Kota Jkt Utara,
+ Daerah Khusus Ibukota Jakarta, Indonesia Kodepos : 14440
+ </p>
+ <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
+ <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p>
+ </div>
+ </div>
+)
+
+export default Checkout
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index b74af8c0..5edcfdbf 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -33,8 +33,6 @@ const Invoices = () => {
}
const { invoices } = useInvoices({ query })
- console.log('bangke', invoices)
-
const [inputQuery, setInputQuery] = useState(q)
const [toOthers, setToOthers] = useState(null)
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index f1a001a6..d9c95327 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -1,4 +1,5 @@
import Image from '@/core/components/elements/Image/Image'
+import ImageNext from 'next/image'
import Link from '@/core/components/elements/Link/Link'
import DesktopView from '@/core/components/views/DesktopView'
import currencyFormat from '@/core/utils/currencyFormat'
@@ -58,7 +59,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
}
const handleAddToCart = (variantId) => {
- if(!auth) {
+ if (!auth) {
router.push(`/login?next=/shop/product/${slug}`)
return
}
@@ -165,11 +166,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
)}
</div>
</div>
- <div className='pt-3'>
- <div className='flex mt-1'>
- <PromotionType></PromotionType>
+ {product.variants.length <= 1 && (
+ <div className='pt-3'>
+ <div className='flex mt-1'>
+ <PromotionType></PromotionType>
+ </div>
</div>
- </div>
+ )}
</div>
</div>
@@ -328,7 +331,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
</tr>
</thead>
<tbody>
- {product.variants.map((variant) => (
+ {product.variants.map((variant, index) => (
<tr key={variant.id}>
<td>{variant.code}</td>
<td>{variant.attributes.join(', ') || '-'}</td>
@@ -367,6 +370,27 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
/>
</td>
<td className='flex gap-x-3'>
+ {index == 0 ? (
+ <ImageNext
+ src='/images/noun-applied-check2.svg'
+ alt=''
+ height={60}
+ width={60}
+ onClick={() => setPromotionType(true)}
+ className='cursor-pointer'
+ ></ImageNext>
+ ) : (
+ <div className='w-[60px] flex justify-center'>
+ <ImageNext
+ src='/images/noun-discount-5796402.svg'
+ alt=''
+ height={30}
+ width={30}
+ onClick={() => setPromotionType(true)}
+ className='cursor-pointer'
+ ></ImageNext>
+ </div>
+ )}
<button
type='button'
onClick={() => handleAddToCart(variant.id)}
@@ -396,7 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
<ProductSimilar query={productSimilarQuery} />
</LazyLoad>
</div>
-
+ <BottomPopup
+ className=' !h-[75%]'
+ title='Pakai Promo'
+ active={promotionType}
+ close={() => setPromotionType(false)}
+ >
+ <div className='flex mt-4'>
+ <PromotionType isModal={true}></PromotionType>
+ </div>
+ </BottomPopup>
<BottomPopup
className='!container'
title='Berhasil Ditambahkan'
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 1c2974b0..4da237ed 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -171,9 +171,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
<Divider />
<div className='p-4'>
- <div className='mb-5'>
- <PromotionType></PromotionType>
- </div>
<div>
<label className='flex justify-between'>
Pilih Varian:
@@ -189,6 +186,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
isSearchable={product.variantTotal > 10}
/>
</div>
+ <div className='mt-5'>
+ <PromotionType></PromotionType>
+ </div>
+
<div className='mt-4 mb-2'>Jumlah</div>
<div className='flex gap-x-3'>
<div className='w-2/12'>
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
index 8d159899..c0968161 100644
--- a/src/lib/promotinProgram/components/HomePage.jsx
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -27,7 +27,6 @@ const HomePage = () => {
}
)
-
useEffect(() => {
if (titlePromotion && titlePromotion.length > 0) {
setActiveTab(titlePromotion[0].name)
@@ -36,11 +35,11 @@ const HomePage = () => {
setActiveBanner(titlePromotion[0].banner)
productPromotionRefetch()
}
- }, [titlePromotion])
+ }, [titlePromotion, productPromotionRefetch])
useEffect(() => {
if (productPromotion) {
- setparentPromotions(() => {
+ setparentPromotions((parentPromotions) => {
return parentPromotions.map((title) => {
if (title.id === activeId && title.products === undefined) {
return {
@@ -52,7 +51,7 @@ const HomePage = () => {
})
})
}
- }, [productPromotion, parentPromotions, activeId])
+ }, [productPromotion, activeId])
const { isMobile, isDesktop } = useDevice()
const handleTabClick = (id, label, banner) => {
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 09:48:20 +0000