diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-03 17:03:45 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-03 17:03:45 +0700 |
| commit | cd01ba82733062db99075ad7690bdb52fb85745a (patch) | |
| tree | df86ed690452945463abc77263ac058d5b7f9823 /src/pages/shop | |
| parent | 87af032177192ed1d5d7c68cab911ed102e647bc (diff) | |
no message
Diffstat (limited to 'src/pages/shop')
| -rw-r--r-- | src/pages/shop/checkout.js | 2 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 21 | ||||
| -rw-r--r-- | src/pages/shop/quotation/index.js | 34 |
3 files changed, 24 insertions, 33 deletions
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js index 875cf0f1..8a540bcd 100644 --- a/src/pages/shop/checkout.js +++ b/src/pages/shop/checkout.js @@ -195,6 +195,7 @@ export default function Checkout() { { selectedAddress.shipping && ( <div className="mt-4 text-caption-1"> + <div className="badge-red mb-2">{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }</div> <p className="font-medium">{ selectedAddress.shipping.name }</p> <p className="mt-2 text-gray_r-11">{ selectedAddress.shipping.mobile }</p> <p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }</p> @@ -261,6 +262,7 @@ export default function Checkout() { { selectedAddress.invoicing && ( <div className="mt-4 text-caption-1"> + <div className="badge-red mb-2">{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }</div> <p className="font-medium">{ selectedAddress.invoicing.name }</p> <p className="mt-2 text-gray_r-11">{ selectedAddress.invoicing.mobile }</p> <p className="mt-1 text-gray_r-11">{ selectedAddress.invoicing.street } { selectedAddress.invoicing.street2 }</p> diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index 03fac0be..c3d34806 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -15,6 +15,8 @@ import LineDivider from "@/components/elements/LineDivider"; import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid"; import { useAuth } from "@/core/utils/auth"; import { HeartIcon } from "@heroicons/react/24/outline"; +import { LazyLoadComponent } from "react-lazy-load-image-component"; +import ProductSimilar from "@/components/products/ProductSimilar"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -37,7 +39,6 @@ export default function ProductDetail({ product }) { const { slug } = router.query; const [selectedVariant, setSelectedVariant] = useState(""); const [quantity, setQuantity] = useState("1"); - const [similarProducts, setSimilarProducts] = useState(null); const [activeVariant, setActiveVariant] = useState({ id: product.id, code: product.code, @@ -83,15 +84,6 @@ export default function ProductDetail({ product }) { }, [ product ]); useEffect(() => { - setSimilarProducts(null); - const getSimilarProducts = async () => { - const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getIdFromSlug(slug)}/similar?limit=20`); - setSimilarProducts(dataSimilarProducts); - } - if (slug) getSimilarProducts(); - }, [slug]); - - useEffect(() => { if (selectedVariant != '') { let newActiveVariant = product.variants.filter((variant) => { return variant.id == selectedVariant; @@ -281,11 +273,10 @@ export default function ProductDetail({ product }) { </div> <LineDivider /> - - <div className="p-4"> - <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2> - <ProductSlider products={similarProducts}/> - </div> + + <LazyLoadComponent> + <ProductSimilar productId={getIdFromSlug(slug || '')} /> + </LazyLoadComponent> <Footer /> </Layout> diff --git a/src/pages/shop/quotation/index.js b/src/pages/shop/quotation/index.js index cf2b956d..e1c196db 100644 --- a/src/pages/shop/quotation/index.js +++ b/src/pages/shop/quotation/index.js @@ -16,8 +16,7 @@ export default function Quotation() { const router = useRouter(); const [ auth ] = useAuth(); const [ products, setProducts ] = useState([]); - const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0); - const [ totalTaxAmount, setTotalTaxAmount ] = useState(0); + const [ totalAmount, setTotalAmount ] = useState(0); const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0); useEffect(() => { @@ -43,18 +42,13 @@ export default function Quotation() { useEffect(() => { if (products) { - const productsSelected = products.filter((product) => product.selected == true); - let calculateTotalPriceBeforeTax = 0; - let calculateTotalTaxAmount = 0; + let calculateTotalAmount = 0; let calculateTotalDiscountAmount = 0; - productsSelected.forEach(product => { - let priceBeforeTax = product.price.price / 1.11; - calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity; - calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity; + products.forEach(product => { + calculateTotalAmount += product.price.price * product.quantity; calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity; }); - setTotalPriceBeforeTax(calculateTotalPriceBeforeTax); - setTotalTaxAmount(calculateTotalTaxAmount); + setTotalAmount(calculateTotalAmount); setTotalDiscountAmount(calculateTotalDiscountAmount); } }, [products]); @@ -102,22 +96,26 @@ export default function Quotation() { <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> + <p>Total Belanja</p> + <p className="font-medium">{currencyFormat(totalAmount)}</p> </div> <div className="flex gap-x-2 justify-between"> - <p>PPN 11%</p> - <p className="font-medium">{currencyFormat(totalTaxAmount)}</p> + <p>Total Diskon</p> + <p className="font-medium text-red_r-11">{'- ' + currencyFormat(totalDiscountAmount)}</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> + <p>Subtotal</p> + <p className="font-medium">{currencyFormat(totalAmount - totalDiscountAmount)}</p> + </div> + <div className="flex gap-x-2 justify-between"> + <p>PPN 11% (Incl.)</p> + <p className="font-medium">{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</p> </div> </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> + <p className="font-medium text-yellow_r-11">{currencyFormat(totalAmount - 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"> |
