From c9366090153e8aba3a673b2b77cbc8acc24e59a5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 15 Dec 2023 17:15:32 +0700 Subject: Update promotion program feature --- src/pages/api/product-variant/[id].js | 2 ++ src/pages/api/product-variant/[id]/promotion/highlight.js | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 src/pages/api/product-variant/[id].js create mode 100644 src/pages/api/product-variant/[id]/promotion/highlight.js (limited to 'src/pages') diff --git a/src/pages/api/product-variant/[id].js b/src/pages/api/product-variant/[id].js new file mode 100644 index 00000000..4186a724 --- /dev/null +++ b/src/pages/api/product-variant/[id].js @@ -0,0 +1,2 @@ +import handler from '~/pages/api/product-variant/[id]'; +export default handler; diff --git a/src/pages/api/product-variant/[id]/promotion/highlight.js b/src/pages/api/product-variant/[id]/promotion/highlight.js new file mode 100644 index 00000000..93b1e781 --- /dev/null +++ b/src/pages/api/product-variant/[id]/promotion/highlight.js @@ -0,0 +1,2 @@ +import handler from '~/pages/api/product-variant/[id]/promotion/highlight'; +export default handler; \ No newline at end of file -- cgit v1.2.3 From 89f32128f37d99b490de7590e2116a9cfd853f89 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 22 Dec 2023 17:33:46 +0700 Subject: Update promotion program feature --- src/pages/api/product-variant/[id]/promotion/[category].js | 2 ++ src/pages/api/promotion-program/[id].js | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 src/pages/api/product-variant/[id]/promotion/[category].js create mode 100644 src/pages/api/promotion-program/[id].js (limited to 'src/pages') diff --git a/src/pages/api/product-variant/[id]/promotion/[category].js b/src/pages/api/product-variant/[id]/promotion/[category].js new file mode 100644 index 00000000..aef03c22 --- /dev/null +++ b/src/pages/api/product-variant/[id]/promotion/[category].js @@ -0,0 +1,2 @@ +import handler from '~/pages/api/product-variant/[id]/promotion/[category]'; +export default handler; diff --git a/src/pages/api/promotion-program/[id].js b/src/pages/api/promotion-program/[id].js new file mode 100644 index 00000000..f2bb550e --- /dev/null +++ b/src/pages/api/promotion-program/[id].js @@ -0,0 +1,2 @@ +import handler from '~/pages/api/promotion-program/[id]'; +export default handler; -- cgit v1.2.3 From 67398e6f10d6f7729d8f1ace7005ef13d32c5ddd Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 4 Jan 2024 10:05:25 +0700 Subject: Update promotion program feature --- src/pages/shop/cart.jsx | 41 ++++++++++------ src/pages/shop/product/[slug].jsx | 98 ++++++++++++++++++++------------------- 2 files changed, 77 insertions(+), 62 deletions(-) (limited to 'src/pages') diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx index 2da58c96..34cae86a 100644 --- a/src/pages/shop/cart.jsx +++ b/src/pages/shop/cart.jsx @@ -1,14 +1,14 @@ -import Seo from '@/core/components/Seo' -import BasicLayout from '@/core/components/layouts/BasicLayout' -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import IsAuth from '@/lib/auth/components/IsAuth' -import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react' -import dynamic from 'next/dynamic' -import Link from 'next/link' +import Seo from '@/core/components/Seo'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import IsAuth from '@/lib/auth/components/IsAuth'; +import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'; +import dynamic from 'next/dynamic'; +import Link from 'next/link'; -const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout')) -const CartComponent = dynamic(() => import('@/lib/cart/components/Cart')) +const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout')); +const CartDetail = dynamic(() => import('~/modules/cart/components/Detail')); export default function Cart() { return ( @@ -18,7 +18,9 @@ export default function Cart() { - +
+ +
@@ -27,20 +29,29 @@ export default function Cart() {
- + Home - Keranjang + + Keranjang + + +
+ +
- - ) + ); } diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index d8366d3c..667373b4 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -1,79 +1,83 @@ -import Seo from '@/core/components/Seo' -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' -import { getIdFromSlug } from '@/core/utils/slug' -import productApi from '@/lib/product/api/productApi' -import PageNotFound from '@/pages/404' -import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import cookie from 'cookie' -import axios from 'axios' -import { useProductContext } from '@/contexts/ProductContext' -import { useEffect } from 'react' -import { updateItemCart } from '@/core/utils/cart' +import Seo from '@/core/components/Seo'; +import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'; +import { getIdFromSlug } from '@/core/utils/slug'; +import productApi from '@/lib/product/api/productApi'; +import PageNotFound from '@/pages/404'; +import dynamic from 'next/dynamic'; +import { useRouter } from 'next/router'; +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')) +const BasicLayout = dynamic(() => + import('@/core/components/layouts/BasicLayout') +); +const Product = dynamic(() => + import('@/lib/product/components/Product/Product') +); export async function getServerSideProps(context) { - const { slug } = context.query - const cookies = context.req.headers.cookie - const cookieObj = cookies ? cookie.parse(cookies) : {} - const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {} - const tier = auth.pricelist ? auth.pricelist : false - const authToken = auth?.token || '' + const { slug } = context.query; + const cookies = context.req.headers.cookie; + const cookieObj = cookies ? cookie.parse(cookies) : {}; + const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}; + const tier = auth.pricelist ? auth.pricelist : false; let response = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + getIdFromSlug(slug) + '&auth=' + tier - ) - let product = response.data + ); + let product = response.data; // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) // let productSolr = null if (product?.length == 1) { - product = product[0] + product = product[0]; } else { - product = null + product = null; } return { - props: { product } - } + props: { product }, + }; } export default function ProductDetail({ product }) { - const router = useRouter() - const { setProduct } = useProductContext() + const router = useRouter(); + const { setProduct } = useProductContext(); useEffect(() => { if (product) { - setProduct(product) + setProduct(product); } - }, [product, setProduct]) + }, [product, setProduct]); useEffect(() => { - const { action, variantId, qty } = router.query + 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) - } + source: action, + }; + + await updateItemCart(data); + const redirectURL = + action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart'; + router.push(redirectURL); + }; if (action && variantId && qty) { - addToCart() + addToCart(); } - }, [router]) + }, [router]); - if (!product) return + if (!product) return ; return ( @@ -87,16 +91,16 @@ export default function ProductDetail({ product }) { url: product?.image, width: 800, height: 800, - alt: product?.name - } + alt: product?.name, + }, ], - type: 'product' + type: 'product', }} additionalMetaTags={[ { name: 'keywords', - content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}` - } + content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`, + }, ]} /> {!product && ( @@ -106,5 +110,5 @@ export default function ProductDetail({ product }) { )} {product && } - ) + ); } -- cgit v1.2.3 From ee0b5893ac039ab05fe8247647364a923d707da3 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 5 Jan 2024 09:30:08 +0700 Subject: Fixing UI cart page --- src/pages/shop/cart.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/pages') diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx index 34cae86a..7475b23d 100644 --- a/src/pages/shop/cart.jsx +++ b/src/pages/shop/cart.jsx @@ -8,7 +8,7 @@ import dynamic from 'next/dynamic'; import Link from 'next/link'; const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout')); -const CartDetail = dynamic(() => import('~/modules/cart/components/Detail')); +const CartDetail = dynamic(() => import('~/pages/shop/cart')); export default function Cart() { return ( -- cgit v1.2.3 From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 13 Jan 2024 10:35:22 +0700 Subject: Refactor src migrate folder --- src/pages/_app.jsx | 99 ++++++++++++++++++-------------- src/pages/shop/product/[slug].jsx | 118 ++------------------------------------ 2 files changed, 62 insertions(+), 155 deletions(-) (limited to 'src/pages') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 3fe1d3cf..aa545863 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,58 +1,73 @@ -import '@/fonts/Inter/inter.css' -import '@/styles/globals.css' -import 'react-loading-skeleton/dist/skeleton.css' +import '@/fonts/Inter/inter.css'; +import '@/styles/globals.css'; +import 'react-loading-skeleton/dist/skeleton.css'; -import NextProgress from 'next-progress' -import { useRouter, Router } from 'next/router' -import { AnimatePresence, motion } from 'framer-motion' -import { Toaster } from 'react-hot-toast' -import { QueryClient, QueryClientProvider } from 'react-query' -import useDevice from '@/core/hooks/useDevice' -import { useEffect, useState } from 'react' -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' -import { SessionProvider } from 'next-auth/react' -import { ProductProvider } from '@/contexts/ProductContext' -import { ProductCartProvider } from '@/contexts/ProductCartContext' -import { ChakraProvider } from '@chakra-ui/react' -import theme from '../../chakra.theme' +import { useEffect, useState } from 'react'; +import dynamic from 'next/dynamic'; +import { useRouter, Router } from 'next/router'; +import { AnimatePresence, motion } from 'framer-motion'; +import { QueryClient, QueryClientProvider } from 'react-query'; -const queryClient = new QueryClient() +import useDevice from '@/core/hooks/useDevice'; +import { ProductProvider } from '@/contexts/ProductContext'; +import { ProductCartProvider } from '@/contexts/ProductCartContext'; +import theme from '../../chakra.theme'; + +const NextProgress = dynamic(() => import('next-progress'), { ssr: false }); +const ChakraProvider = dynamic( + () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider), + { ssr: false } +); +const SessionProvider = dynamic( + () => import('next-auth/react').then((mod) => mod.SessionProvider), + { ssr: false } +); +const LogoSpinner = dynamic( + () => import('@/core/components/elements/Spinner/LogoSpinner'), + { ssr: false } +); +const Toaster = dynamic( + () => import('react-hot-toast').then((mod) => mod.Toaster), + { ssr: false } +); + +const queryClient = new QueryClient(); function MyApp({ Component, pageProps: { session, ...pageProps } }) { - const router = useRouter() - const { isMobile } = useDevice() + const router = useRouter(); + const { isMobile } = useDevice(); - const [animateLoader, setAnimateLoader] = useState(false) + const [animateLoader, setAnimateLoader] = useState(false); useEffect(() => { - const handleRouteChangeStart = () => setAnimateLoader(true) - const handleRouteChangeComplete = () => setAnimateLoader(false) + const handleRouteChangeStart = () => setAnimateLoader(true); + const handleRouteChangeComplete = () => setAnimateLoader(false); - Router.events.on('routeChangeStart', handleRouteChangeStart) - Router.events.on('routeChangeComplete', handleRouteChangeComplete) - Router.events.on('routeChangeError', handleRouteChangeComplete) + Router.events.on('routeChangeStart', handleRouteChangeStart); + Router.events.on('routeChangeComplete', handleRouteChangeComplete); + Router.events.on('routeChangeError', handleRouteChangeComplete); return () => { - Router.events.off('routeChangeStart', handleRouteChangeStart) - Router.events.off('routeChangeComplete', handleRouteChangeComplete) - Router.events.off('routeChangeError', handleRouteChangeComplete) - } - }, []) + Router.events.off('routeChangeStart', handleRouteChangeStart); + Router.events.off('routeChangeComplete', handleRouteChangeComplete); + Router.events.off('routeChangeError', handleRouteChangeComplete); + }; + }, []); - const [toasterStyle, setToasterStyle] = useState({}) + const [toasterStyle, setToasterStyle] = useState({}); useEffect(() => { - let elems = document.querySelectorAll('nav') - let totalNavHeight = 0 + let elems = document.querySelectorAll('nav'); + let totalNavHeight = 0; elems.forEach(function (elem) { - totalNavHeight += elem.offsetHeight - }) + totalNavHeight += elem.offsetHeight; + }); setToasterStyle({ - marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight - }) - }, [isMobile]) + marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight, + }); + }, [isMobile]); return ( @@ -63,7 +78,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { animate={{ opacity: 1 }} exit={{ opacity: 0.4 }} transition={{ - duration: 0.1 + duration: 0.1, }} className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center' > @@ -76,7 +91,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { containerStyle={toasterStyle} toastOptions={{ duration: 3000, - className: 'border border-gray_r-8' + className: 'border border-gray_r-8', }} /> @@ -90,7 +105,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { - ) + ); } -export default MyApp +export default MyApp; diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index 667373b4..73e8987c 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -1,114 +1,6 @@ -import Seo from '@/core/components/Seo'; -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'; -import { getIdFromSlug } from '@/core/utils/slug'; -import productApi from '@/lib/product/api/productApi'; -import PageNotFound from '@/pages/404'; -import dynamic from 'next/dynamic'; -import { useRouter } from 'next/router'; -import cookie from 'cookie'; -import axios from 'axios'; -import { useProductContext } from '@/contexts/ProductContext'; -import { useEffect } from 'react'; -import { updateItemCart } from '@/core/utils/cart'; +import ProductDetailPage, { + getServerSideProps, +} from '~/pages/shop/product/[slug]'; -const BasicLayout = dynamic(() => - import('@/core/components/layouts/BasicLayout') -); -const Product = dynamic(() => - import('@/lib/product/components/Product/Product') -); - -export async function getServerSideProps(context) { - const { slug } = context.query; - const cookies = context.req.headers.cookie; - const cookieObj = cookies ? cookie.parse(cookies) : {}; - const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}; - const tier = auth.pricelist ? auth.pricelist : false; - - let response = await axios( - `${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 } }) - // let productSolr = null - if (product?.length == 1) { - product = product[0]; - } else { - product = null; - } - - return { - props: { product }, - }; -} - -export default function ProductDetail({ product }) { - const router = useRouter(); - const { setProduct } = useProductContext(); - - useEffect(() => { - if (product) { - setProduct(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, - }; - - 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 ( - - - {!product && ( -
- -
- )} - {product && } - - ); -} +export { getServerSideProps }; +export default ProductDetailPage; -- cgit v1.2.3 From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 16 Jan 2024 16:08:43 +0700 Subject: Update improve product detail performance --- src/pages/_app.jsx | 15 ++++++++++++--- src/pages/_document.jsx | 31 +++++++++++++++++++++---------- 2 files changed, 33 insertions(+), 13 deletions(-) (limited to 'src/pages') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index aa545863..9067fd03 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,6 +1,6 @@ import '@/fonts/Inter/inter.css'; import '@/styles/globals.css'; -import 'react-loading-skeleton/dist/skeleton.css'; +// import 'react-loading-skeleton/dist/skeleton.css'; import { useEffect, useState } from 'react'; import dynamic from 'next/dynamic'; @@ -9,8 +9,6 @@ import { AnimatePresence, motion } from 'framer-motion'; import { QueryClient, QueryClientProvider } from 'react-query'; import useDevice from '@/core/hooks/useDevice'; -import { ProductProvider } from '@/contexts/ProductContext'; -import { ProductCartProvider } from '@/contexts/ProductCartContext'; import theme from '../../chakra.theme'; const NextProgress = dynamic(() => import('next-progress'), { ssr: false }); @@ -18,6 +16,17 @@ const ChakraProvider = dynamic( () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider), { ssr: false } ); +const ProductProvider = dynamic( + () => import('@/contexts/ProductContext').then((mod) => mod.ProductProvider), + { ssr: false } +); +const ProductCartProvider = dynamic( + () => + import('@/contexts/ProductCartContext').then( + (mod) => mod.ProductCartProvider + ), + { ssr: false } +); const SessionProvider = dynamic( () => import('next-auth/react').then((mod) => mod.SessionProvider), { ssr: false } diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx index 3762c63b..8eb3f15e 100644 --- a/src/pages/_document.jsx +++ b/src/pages/_document.jsx @@ -1,16 +1,23 @@ -import { Html, Head, Main, NextScript } from 'next/document' -import Script from 'next/script' +import { Html, Head, Main, NextScript } from 'next/document'; +import Script from 'next/script'; export default function MyDocument() { - const env = process.env.NODE_ENV + const env = process.env.NODE_ENV; return ( + + + + - + @@ -20,7 +27,11 @@ export default function MyDocument() { - + +