From 6aa5fa70cf5ccd2825e5657ec1a90e370dea3bcf Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 16 Oct 2023 11:16:33 +0700 Subject: Fix buy action before and after login --- .../components/elements/Navbar/NavbarDesktop.jsx | 7 +- src/lib/auth/components/IsAuth.jsx | 2 +- src/lib/auth/hooks/useLogin.js | 2 +- src/lib/cart/components/Cartheader.jsx | 325 +++++++++++---------- src/lib/checkout/components/Checkout.jsx | 4 - .../product/components/Product/ProductDesktop.jsx | 44 +-- .../product/components/Product/ProductMobile.jsx | 18 ++ src/pages/shop/product/[slug].jsx | 28 +- 8 files changed, 247 insertions(+), 183 deletions(-) diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index fb94e4a6..d9f5658e 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -40,7 +40,7 @@ const NavbarDesktop = () => { const router = useRouter() const { product } = useProductContext() - + useEffect(() => { if (router.pathname === '/shop/product/[slug]') { setPayloadWa({ @@ -110,7 +110,9 @@ const NavbarDesktop = () => {
Quotation - + + + { +
-
-
-
-
-
Keranjang Belanja
- - Lihat Semua - -
-
-
- {!auth && ( -
-

- Silahkan{' '} - - Login - {' '} - Untuk Melihat Daftar Keranjang Belanja Anda -

-
- )} - {isLoading && - itemLoading.map((item) => ( -
-
-
- + + + {isHovered && ( + <> + + + + +
+
Keranjang Belanja
+ + Lihat Semua + +
+
+
+ {!auth && ( +
+

+ Silahkan{' '} + + Login + {' '} + Untuk Melihat Daftar Keranjang Belanja Anda +

-
-
-
-
+ )} + {isLoading && + itemLoading.map((item) => ( +
+
+
+ +
+
+
+
+
+
+
+
+ ))} + {auth && products.length === 0 && !isLoading && ( +
+

+ Tidak Ada Produk di Keranjang Belanja Anda +

-
-
- ))} - {auth && products.length === 0 && !isLoading && ( -
-

- Tidak Ada Produk di Keranjang Belanja Anda -

-
- )} - {auth && products.length > 0 && !isLoading && ( - <> -
    - {products && - products?.map((product, index) => ( - <> -
  • -
    -
    - - {product?.name} - -
    -
    - - {' '} -

    - {product.parent.name} -

    - - - {product?.hasFlashsale && ( -
    -
    - {product?.price?.discountPercentage}% + )} + {auth && products.length > 0 && !isLoading && ( + <> +
      + {products && + products?.map((product, index) => ( + <> +
    • +
      +
      + + {product?.name} +
      -
      - {currencyFormat(product?.price?.price)} +
      + + {' '} +

      + {product.parent.name} +

      + + + {product?.hasFlashsale && ( +
      +
      + {product?.price?.discountPercentage}% +
      +
      + {currencyFormat(product?.price?.price)} +
      +
      + )} +
      +
      + {product?.price?.priceDiscount > 0 ? ( + currencyFormat(product?.price?.priceDiscount) + ) : ( + + + Call For Price + + + )} +
      +
      - )} -
      -
      - {product?.price?.priceDiscount > 0 ? ( - currencyFormat(product?.price?.priceDiscount) - ) : ( - - - Call For Price - - - )} -
      -
      -
      -
    -
    • - - ))} -
-
- - )} -
- {auth && products.length > 0 && !isLoading && ( - <> -
- Subtotal Sebelum PPN : - {currencyFormat(subTotal)} -
-
- -
- - )} -
-
+ + + ))} + +
+ + )} +
+ {auth && products.length > 0 && !isLoading && ( + <> +
+ Subtotal Sebelum PPN : + {currencyFormat(subTotal)} +
+
+ +
+ + )} + + + + )} +
) } diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 35236e79..511fcdba 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -5,7 +5,6 @@ import useAuth from '@/core/hooks/useAuth' import { getItemAddress } from '@/core/utils/address' import addressesApi from '@/lib/address/api/addressesApi' import { - ArrowLongLeftIcon, BanknotesIcon, ChevronLeftIcon, ClockIcon, @@ -17,17 +16,14 @@ 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 { useRouter } from 'next/router' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' import axios from 'axios' import Image from '@/core/components/elements/Image/Image' -import imageNext from 'next/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 BottomPopup from '@/core/components/elements/Popup/BottomPopup' import { useQuery } from 'react-query' import { gtagPurchase } from '@/core/utils/googleTag' diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 855c9f75..701750b2 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -90,38 +90,38 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { } const updateCart = (variantId, quantity, source) => { - let dataUpdate + let dataUpdate = { + productId: variantId, + quantity, + selected: true, + source: source === 'buy' ? 'buy' : null + } + if (product.variants.length > 1) { let variantIndex = product.variants.findIndex((varian) => varian.id == variantId) - dataUpdate = { - productId: variantId, - quantity, - programLineId: product.variants[variantIndex].programActive, - selected: true, - source: source === 'buy' ? 'buy' : null - } + dataUpdate['programLineId'] = product.variants[variantIndex].programActive } else { - dataUpdate = { - productId: variantId, - quantity, - programLineId: promotionActiveId, - selected: true, - source: source === 'buy' ? 'buy' : null - } + dataUpdate['programLineId'] = promotionActiveId } + updateItemCart(dataUpdate) } - const handleAddToCart = (variantId) => { - if (!auth) { - router.push(`/login?next=/shop/product/${slug}`) - return - } + const redirectToLogin = (action, variantId, quantity) => { + const nextURL = `/shop/product/${slug}?action=${action}&variantId=${variantId}&qty=${quantity}` + router.push(`/login?next=${encodeURIComponent(nextURL)}`) + return true + } + const handleAddToCart = (variantId) => { const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return + if (!auth) { + return redirectToLogin('add_to_cart', variantId, quantity) + } + let source = 'cart' updateCart(variantId, quantity, source) setRefreshCart(true) @@ -141,6 +141,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const quantity = variantQuantityRefs.current[variant].value if (!validQuantity(quantity)) return + if (!auth) { + return redirectToLogin('buy', variant, quantity) + } + let source = 'buy' updateCart(variant, quantity, source) router.push(`/shop/checkout?source=buy`) diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 402490f7..70ac1cbc 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -20,9 +20,12 @@ import odooApi from '@/core/api/odooApi' import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import Breadcrumb from './Breadcrumb' +import useAuth from '@/core/hooks/useAuth' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() + const auth = useAuth() + const { slug } = router.query const [quantity, setQuantity] = useState('1') const [selectedVariant, setSelectedVariant] = useState(null) @@ -128,9 +131,20 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return isValid } + const redirectToLogin = (action) => { + const nextURL = `/shop/product/${slug}?action=${action}&variantId=${activeVariant.id}&qty=${quantity}` + router.push(`/login?next=${encodeURIComponent(nextURL)}`) + return true + } + const handleClickCart = () => { if (!validAction()) return gtagAddToCart(activeVariant, quantity) + + if (!auth) { + return redirectToLogin('add_to_cart') + } + updateItemCart({ productId: activeVariant.id, quantity, @@ -143,6 +157,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const handleClickBuy = () => { if (!validAction()) return + if (!auth) { + return redirectToLogin('buy') + } + updateItemCart({ productId: activeVariant.id, quantity, diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index 4c17ab37..d8366d3c 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -9,6 +9,7 @@ import cookie from 'cookie' import axios from 'axios' import { useProductContext } from '@/contexts/ProductContext' import { useEffect } from 'react' +import { updateItemCart } from '@/core/utils/cart' const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) const Product = dynamic(() => import('@/lib/product/components/Product/Product')) @@ -22,7 +23,10 @@ export async function getServerSideProps(context) { const authToken = auth?.token || '' let response = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + getIdFromSlug(slug) +'&auth=' + tier + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + + getIdFromSlug(slug) + + '&auth=' + + tier ) let product = response.data // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) @@ -39,7 +43,6 @@ export async function getServerSideProps(context) { } export default function ProductDetail({ product }) { - console.log(product); const router = useRouter() const { setProduct } = useProductContext() @@ -49,6 +52,27 @@ export default function ProductDetail({ product }) { } }, [product, setProduct]) + useEffect(() => { + const { action, variantId, qty } = router.query + const addToCart = async () => { + const data = { + productId: variantId, + quantity: qty, + selected: true, + programLineId: null, + source: action + } + console.log('data dr test', data) + await updateItemCart(data) + const redirectURL = action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart' + router.push(redirectURL) + } + + if (action && variantId && qty) { + addToCart() + } + }, [router]) + if (!product) return return ( -- cgit v1.2.3