From cd01ba82733062db99075ad7690bdb52fb85745a Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 3 Feb 2023 17:03:45 +0700 Subject: no message --- src/components/products/ProductCategories.js | 56 ++++++++++++++++++++++++++++ src/components/products/ProductSimilar.js | 25 +++++++++++++ src/components/variants/VariantCard.js | 43 +++++++++++++++++++-- src/pages/index.js | 50 +++---------------------- src/pages/my/invoice/[id].js | 5 ++- src/pages/my/invoices.js | 2 +- src/pages/my/transaction/[id].js | 1 + src/pages/shop/checkout.js | 2 + src/pages/shop/product/[slug].js | 21 +++-------- src/pages/shop/quotation/index.js | 34 ++++++++--------- 10 files changed, 154 insertions(+), 85 deletions(-) create mode 100644 src/components/products/ProductCategories.js create mode 100644 src/components/products/ProductSimilar.js diff --git a/src/components/products/ProductCategories.js b/src/components/products/ProductCategories.js new file mode 100644 index 00000000..dc1325b7 --- /dev/null +++ b/src/components/products/ProductCategories.js @@ -0,0 +1,56 @@ +import { useEffect, useState } from "react"; +import ProductSlider from "./ProductSlider"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { LazyLoadComponent } from "react-lazy-load-image-component"; +import { SkeletonProduct } from "../elements/Skeleton"; + +const ProductCategory = ({ id }) => { + const [ content, setContent ] = useState(null); + + useEffect(() => { + const loadContent = async () => { + if (!content) { + const dataContent = await apiOdoo('GET', `/api/v1/categories_homepage?id=${id}`); + setContent(dataContent[0]); + } + } + loadContent(); + }, [id, content]); + + return ( +
+ { content ? ( + + ) : } +
+ ); +} + +export default function ProductCategories() { + const [ contentIds, setContentIds ] = useState([]); + + useEffect(() => { + const getContentIds = async () => { + const dataContentIds = await apiOdoo('GET', '/api/v1/categories_homepage/ids'); + setContentIds(dataContentIds); + } + getContentIds(); + }, []); + + return contentIds.map((contentId) => ( + + + + )); +} \ No newline at end of file diff --git a/src/components/products/ProductSimilar.js b/src/components/products/ProductSimilar.js new file mode 100644 index 00000000..9e2292cb --- /dev/null +++ b/src/components/products/ProductSimilar.js @@ -0,0 +1,25 @@ +import apiOdoo from '@/core/utils/apiOdoo'; +import { useEffect, useState } from 'react'; +import ProductSlider from './ProductSlider'; + +export default function ProductSimilar({ productId }) { + const [similarProducts, setSimilarProducts] = useState(null); + + useEffect(() => { + const getSimilarProducts = async () => { + if (productId && !similarProducts) { + const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${productId}/similar?limit=20`); + setSimilarProducts(dataSimilarProducts); + } + } + getSimilarProducts(); + }, [productId, similarProducts]); + + + return ( +
+

Kamu Mungkin Juga Suka

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js index cb4d8272..2d27371b 100644 --- a/src/components/variants/VariantCard.js +++ b/src/components/variants/VariantCard.js @@ -2,12 +2,27 @@ import { createSlug } from "@/core/utils/slug"; import Image from "../elements/Image"; import Link from "../elements/Link"; import currencyFormat from "@/core/utils/currencyFormat"; +import { useRouter } from "next/router"; +import { toast } from "react-hot-toast"; +import { createOrUpdateItemCart } from "@/core/utils/cart"; export default function VariantCard({ data, - openOnClick = true + openOnClick = true, + buyMore = false }) { let product = data; + const router = useRouter(); + + const addItemToCart = () => { + toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 }); + createOrUpdateItemCart(product.id, 1); + return; + }; + + const checkoutItem = () => { + router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`); + } const Card = () => (
@@ -38,9 +53,29 @@ export default function VariantCard({ if (openOnClick) { return ( - - - + <> + + + + { buyMore && ( +
+ + +
+ ) } + ); } diff --git a/src/pages/index.js b/src/pages/index.js index 49300883..fcf47b34 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -16,6 +16,8 @@ import Layout from "@/components/layouts/Layout"; import ManufactureCard from "@/components/manufactures/ManufactureCard"; import Footer from "@/components/layouts/Footer"; import Image from "@/components/elements/Image"; +import ProductCategories from "@/components/products/ProductCategories"; +import { LazyLoadComponent } from "react-lazy-load-image-component"; export async function getServerSideProps() { const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`); @@ -26,8 +28,6 @@ export async function getServerSideProps() { export default function Home({ heroBanners }) { const [manufactures, setManufactures] = useState(null); const [popularProducts, setPopularProducts] = useState(null); - const [categoryProductIds, setCategoryProductIds] = useState(null); - const [categoryProducts, setCategoryProducts] = useState([]); useEffect(() => { const getManufactures = async () => { @@ -43,33 +43,6 @@ export default function Home({ heroBanners }) { getPopularProducts(); }, []); - useEffect(() => { - const getCategoryProductIds = async () => { - if (!categoryProductIds) { - const dataCategoryProductIds = await apiOdoo('GET', '/api/v1/categories_homepage/ids'); - setCategoryProductIds(dataCategoryProductIds) - } - } - getCategoryProductIds(); - }, [ categoryProductIds ]); - - useEffect(() => { - const getCategoryProducts = async () => { - const currentCategoryId = categoryProductIds ? categoryProductIds[categoryProducts.length] : false; - if (currentCategoryId) { - const isAdded = categoryProducts.findIndex((categoryProduct) => categoryProduct.id == currentCategoryId); - if (isAdded < 0) { - const dataCategoryProducts = await apiOdoo('GET', `/api/v1/categories_homepage?id=${currentCategoryId}`); - setCategoryProducts((categoryProducts) => ([ - ...categoryProducts, - ...dataCategoryProducts - ])); - } - } - } - getCategoryProducts(); - }, [ categoryProducts, categoryProductIds ]); - return ( <>
@@ -104,22 +77,9 @@ export default function Home({ heroBanners }) {
- { categoryProducts?.map((categoryProduct, index) => ( -
- -
- )) } + + +
Platform Belanja B2B Alat Teknik & Industri di Indonesia
diff --git a/src/pages/my/invoice/[id].js b/src/pages/my/invoice/[id].js index 05247210..10f625a9 100644 --- a/src/pages/my/invoice/[id].js +++ b/src/pages/my/invoice/[id].js @@ -93,7 +93,7 @@ export default function DetailInvoice() {

Faktur Pembelian

- { invoice.efaktur_token ? ( + { invoice.efaktur ? (
Faktur Pajak diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js index a508ef77..428d71fb 100644 --- a/src/pages/my/transaction/[id].js +++ b/src/pages/my/transaction/[id].js @@ -72,6 +72,7 @@ export default function DetailTransaction() { )) }
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 && (
+
{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }

{ selectedAddress.shipping.name }

{ selectedAddress.shipping.mobile }

{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }

@@ -261,6 +262,7 @@ export default function Checkout() { { selectedAddress.invoicing && (
+
{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }

{ selectedAddress.invoicing.name }

{ selectedAddress.invoicing.mobile }

{ selectedAddress.invoicing.street } { selectedAddress.invoicing.street2 }

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, @@ -82,15 +83,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) => { @@ -281,11 +273,10 @@ export default function ProductDetail({ product }) {
- -
-

Kamu Mungkin Juga Suka

- -
+ + + +