summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/core/components/elements/Footer/BasicFooter.jsx12
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx32
-rw-r--r--src/core/components/elements/Sidebar/Sidebar.jsx13
-rw-r--r--src/core/components/layouts/BasicLayout.jsx5
-rw-r--r--src/core/utils/auth.js2
-rw-r--r--src/core/utils/whatsappUrl.js4
-rw-r--r--src/lib/auth/components/CompanyProfile.jsx2
-rw-r--r--src/lib/auth/components/LoginDesktop.jsx8
-rw-r--r--src/lib/auth/components/LoginMobile.jsx24
-rw-r--r--src/lib/auth/components/Menu.jsx3
-rw-r--r--src/lib/checkout/components/Checkout.jsx752
-rw-r--r--src/lib/product/components/ProductCard.jsx2
12 files changed, 479 insertions, 380 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 9f68c2f7..23bca677 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -83,7 +83,8 @@ const OfficeLocation = () => (
<div>
<div className={headerClassName}>Kantor Pusat</div>
<div className='leading-6 text-gray_r-12/80'>
- Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara
+ <a href='https://goo.gl/maps/3DCJxtki8jUV32pR7' target='_blank' rel='noreferrer' className='text-gray_r-12/80'>
+ Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara</a>
</div>
</div>
)
@@ -186,11 +187,11 @@ const InformationCenter = () => (
<ul className='flex flex-col gap-y-3'>
<li className='text-gray_r-12/80 flex items-center'>
<PhoneArrowUpRightIcon className='w-[18px] mr-2' />
- <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
+ <a href='tel:02129338828' target='_blank' rel='noreferrer'>(021) 2933-8828 / 29</a>
</li>
<li className='text-gray_r-12/80 flex items-center'>
<EnvelopeIcon className='w-[18px] mr-2' />
- <a href='mailto:sales@indoteknik.com'>sales@indoteknik.com</a>
+ <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>sales@indoteknik.com</a>
</li>
<li className='text-gray_r-12/80 flex items-center'>
<DevicePhoneMobileIcon className='w-[18px] mr-2' />
@@ -239,6 +240,9 @@ const SocialMedias = () => (
<a target='_blank' rel='noreferrer' href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'>
<NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} />
</a>
+ <a target='_blank' rel='noreferrer' href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'>
+ <NextImage src='/images/socials/g_maps.png' alt='Linkedin Logo' width={24} height={24} />
+ </a>
</div>
</div>
)
@@ -275,7 +279,7 @@ const Payments = () => (
)
const InternalItemLink = ({ href, children }) => (
- <Link href={href} className='!text-gray_r-12/80 font-normal line-clamp-1'>
+ <Link href={href} className='!text-gray_r-12/80 font-normal line-clamp-1' target="_blank" rel="noopener noreferrer">
{children}
</Link>
)
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 6fdea644..655c4732 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -37,6 +37,7 @@ const NavbarDesktop = () => {
const [templateWA, setTemplateWA] = useState(null)
const [payloadWA, setPayloadWa] = useState(null)
+ const [urlPath, setUrlPath] = useState(null)
const router = useRouter()
@@ -65,6 +66,8 @@ const NavbarDesktop = () => {
}
getProduct()
setTemplateWA('product')
+
+ setUrlPath(router.asPath)
}
return () => {
@@ -100,13 +103,23 @@ const NavbarDesktop = () => {
<Search />
</div>
<div className='flex gap-x-4'>
- <Link href='/my/transactions' className='flex items-center gap-x-2 !text-gray_r-12/80'>
+ <Link
+ href='/my/transactions'
+ target='_blank'
+ rel='noreferrer'
+ className='flex items-center gap-x-2 !text-gray_r-12/80'
+ >
<DocumentCheckIcon className='w-7' />
Daftar
<br />
Quotation
</Link>
- <Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
+ <Link
+ href='/shop/cart'
+ target='_blank'
+ rel='noreferrer'
+ className='flex items-center gap-x-2 !text-gray_r-12/80'
+ >
<div className={`relative ${cartCount > 0 && 'mr-2'}`}>
<ShoppingCartIcon className='w-7' />
{cartCount > 0 && (
@@ -121,12 +134,17 @@ const NavbarDesktop = () => {
Belanja
</span>
</Link>
- <Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
+ <Link
+ target='_blank'
+ rel='noreferrer'
+ href='/my/wishlist'
+ className='flex items-center gap-x-2 !text-gray_r-12/80'
+ >
<HeartIcon className='w-7' />
Wishlist
</Link>
<a
- href={whatsappUrl(templateWA, payloadWA)}
+ href={whatsappUrl(templateWA, payloadWA, urlPath)}
target='_blank'
rel='noreferrer'
className='flex items-center gap-x-1 !text-gray_r-12/80'
@@ -158,12 +176,16 @@ const NavbarDesktop = () => {
<Link
href='/shop/brands'
className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ target='_blank'
+ rel='noreferrer'
>
Semua Brand
</Link>
<Link
href='/shop/search?orderBy=stock'
className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ target='_blank'
+ rel='noreferrer'
>
Ready Stock
</Link>
@@ -178,6 +200,8 @@ const NavbarDesktop = () => {
<Link
href='/video'
className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ target='_blank'
+ rel='noreferrer'
>
Indoteknik TV
</Link>
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index f0bcb7b7..38fcdef8 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,7 +2,7 @@ import Link from '../Link/Link'
import greeting from '@/core/utils/greeting'
import useAuth from '@/core/hooks/useAuth'
import { AnimatePresence, motion } from 'framer-motion'
-import { ChevronDownIcon, ChevronUpIcon, CogIcon } from '@heroicons/react/24/outline'
+import { ChevronDownIcon, ChevronUpIcon, CogIcon, UserIcon } from '@heroicons/react/24/outline'
import { Fragment, useEffect, useState } from 'react'
import odooApi from '@/core/api/odooApi'
@@ -111,8 +111,8 @@ const Sidebar = ({ active, close }) => {
onClick={close}
href='/my/menu'
className='!text-gray_r-11 ml-auto my-auto'
- >
- <CogIcon className='w-6' />
+ >
+ <UserIcon class='h-6 w-6 text-gray-500' />
</Link>
</>
)}
@@ -120,7 +120,12 @@ const Sidebar = ({ active, close }) => {
<SidebarLink className={itemClassName} href='/shop/brands'>
Semua Brand
</SidebarLink>
- <SidebarLink className={itemClassName} href='https://blog.indoteknik.com/' target="_blank" rel="noreferrer noopener">
+ <SidebarLink
+ className={itemClassName}
+ href='https://blog.indoteknik.com/'
+ target='_blank'
+ rel='noreferrer noopener'
+ >
Blog Indoteknik
</SidebarLink>
<SidebarLink className={itemClassName} href='/video'>
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index e737101a..266223d8 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -18,6 +18,7 @@ const AnimationLayout = dynamic(() => import('./AnimationLayout'))
const BasicLayout = ({ children }) => {
const [templateWA, setTemplateWA] = useState(null)
const [payloadWA, setPayloadWa] = useState(null)
+ const [urlPath, setUrlPath] = useState(null)
const router = useRouter()
@@ -46,6 +47,8 @@ const BasicLayout = ({ children }) => {
}
getProduct()
setTemplateWA('product')
+
+ setUrlPath(router.asPath)
}
}, [])
return (
@@ -55,7 +58,7 @@ const BasicLayout = ({ children }) => {
{children}
<div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
<a
- href={whatsappUrl(templateWA, payloadWA)}
+ href={whatsappUrl(templateWA, payloadWA, urlPath)}
className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
rel='noopener noreferrer'
target='_blank'
diff --git a/src/core/utils/auth.js b/src/core/utils/auth.js
index a7244747..03b20ae2 100644
--- a/src/core/utils/auth.js
+++ b/src/core/utils/auth.js
@@ -29,7 +29,7 @@ const setAuth = (user) => {
* @returns {boolean} - Returns `true`.
*/
const deleteAuth = async() => {
- // await signOut()
+ await signOut()
deleteCookie('auth')
return true
}
diff --git a/src/core/utils/whatsappUrl.js b/src/core/utils/whatsappUrl.js
index c5959ed6..6c354924 100644
--- a/src/core/utils/whatsappUrl.js
+++ b/src/core/utils/whatsappUrl.js
@@ -1,9 +1,9 @@
import { getAuth } from "./auth"
-const whatsappUrl = (template = 'default', payload) => {
+const whatsappUrl = (template = 'default', payload, urlPath = '') => {
let user = getAuth()
if(!user){
- return '/login'
+ return `/login?next=${urlPath}`
}
let parentName = user.parentName || '-'
let url = 'https://wa.me/628128080622'
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index ff673953..2faede9b 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -93,7 +93,7 @@ const CompanyProfile = () => {
/>
</div>
<div className='flex flex-wrap'>
- <div className='w-full mb-3'>Nama Usaha</div>
+ <div className='w-full mb-3'>Badan Usaha</div>
<div className='w-3/12 pr-1'>
<Controller
name='companyType'
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index 838054cd..42fa8896 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -95,13 +95,13 @@ const LoginDesktop = () => {
{!isLoading ? 'Masuk' : 'Loading...'}
</button>
</form>
- {/* <div className='flex items-center mt-3 mb-3'>
+ <div className='flex items-center mt-3 mb-3'>
<hr className='flex-1' />
<p className='text-gray-400'>ATAU</p>
<hr className='flex-1' />
- </div> */}
+ </div>
- {/* <button
+ <button
type='submit'
className='border border-gray-500 p-2 rounded-md hover:bg-gray-100 w-full mt-2 flex items-center justify-center gap-x-2'
onClick={() => handleGoogle()}
@@ -114,7 +114,7 @@ const LoginDesktop = () => {
height={10}
/>
<p>Masuk dengan Google</p>
- </button> */}
+ </button>
<div className='text-gray_r-11 mt-10'>
Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
index 2d6501cd..ed032295 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -13,10 +13,19 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
import odooApi from '@/core/api/odooApi'
import { getAuth } from '@/core/utils/auth'
+import PageContent from '@/lib/content/components/PageContent'
const LoginMobile = () => {
- const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef, handleGoogleSubmit } =
- useLogin()
+ const {
+ handleSubmit,
+ handleChangeInput,
+ isLoading,
+ isValid,
+ alert,
+ emailRef,
+ passwordRef,
+ handleGoogleSubmit
+ } = useLogin()
const router = useRouter()
const [query, setQuery] = useState(router?.query?.next || '/')
@@ -91,13 +100,13 @@ const LoginMobile = () => {
{!isLoading ? 'Masuk' : 'Loading...'}
</button>
</form>
- {/* <div className='flex items-center mt-3 mb-3'>
+ <div className='flex items-center mt-3 mb-3'>
<hr className='flex-1' />
<p className='text-gray-400'>ATAU</p>
<hr className='flex-1' />
- </div> */}
+ </div>
- {/* <button
+ <button
type='submit'
className='border border-gray-500 p-2 rounded-md hover:bg-gray-100 w-full mt-2 flex items-center justify-center gap-x-2'
onClick={() => handleGoogle()}
@@ -110,7 +119,7 @@ const LoginMobile = () => {
height={10}
/>
<p>Masuk dengan Google</p>
- </button> */}
+ </button>
<div className='text-gray_r-11 mt-4'>
Belum punya akun Indoteknik?{' '}
@@ -118,6 +127,9 @@ const LoginMobile = () => {
Daftar
</Link>
</div>
+ {/* <div className='mt-5'>
+ <PageContent path='/login' />
+ </div> */}
</div>
</MobileView>
)
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 939a0d5f..f475db1f 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,6 +1,7 @@
import Link from '@/core/components/elements/Link/Link'
import { useRouter } from 'next/router'
import ImageNext from 'next/image'
+import whatsappUrl from '@/core/utils/whatsappUrl'
const Menu = () => {
const router = useRouter()
@@ -42,7 +43,7 @@ const Menu = () => {
</LinkItem>
<div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
- <LinkItem href='/'>
+ <LinkItem href={whatsappUrl('', '', '')} rel='noopener noreferrer' target='_blank'>
<div className='flex gap-x-3 items-center'>
<ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
<p>Layanan Pelanggan</p>
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 0eb05345..ce691403 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -492,7 +492,9 @@ const Checkout = () => {
<div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
)}
- <div className={`border border-solid mb-5 w-full hover:cursor-pointer p-2 pl-4 pr-4 `}>
+ <div
+ className={`border border-solid mb-5 w-full hover:cursor-pointer p-2 pl-4 pr-4 `}
+ >
{item.canApply && (
<div
class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400'
@@ -521,7 +523,8 @@ const Checkout = () => {
>
<p className='text-sm'>
Tambah produk{' '}
- <span className='text-red-500 font-bold '>{item.manufactureNames}</span> senilai{' '}
+ <span className='text-red-500 font-bold '>{item.manufactureNames}</span>{' '}
+ senilai{' '}
<span className='text-red-500 font-bold'>
{currencyFormat(item.minPurchaseAmount)}
</span>{' '}
@@ -539,7 +542,8 @@ const Checkout = () => {
>
<p className='text-sm'>
Tambah produk{' '}
- <span className='text-red-500 font-bold'>{item.manufactureNames}</span> senilai{' '}
+ <span className='text-red-500 font-bold'>{item.manufactureNames}</span>{' '}
+ senilai{' '}
<span className='text-red-500 font-bold'>
{currencyFormat(item.differenceToApply)}
</span>{' '}
@@ -654,6 +658,29 @@ const Checkout = () => {
<Divider />
+ {selectedCarrierId == SELF_PICKUP_ID && (
+ <div className='p-4'>
+ <div
+ class='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
+ role='alert'
+ >
+ <svg
+ class='flex-shrink-0 inline w-4 h-4 mr-3'
+ aria-hidden='true'
+ fill='currentColor'
+ viewBox='0 0 20 20'
+ >
+ <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+ </svg>
+ <span class='sr-only'>Info</span>
+ <div className='text-justify'>
+ Fitur Self Pickup, hanya berlaku untuk customer di area jakarta. Apa bila memilih
+ fitur ini, anda akan dihubungi setelah barang siap diambil.
+ </div>
+ </div>
+ </div>
+ )}
+
{selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
{selectedCarrierId != SELF_PICKUP_ID && (
<>
@@ -886,393 +913,416 @@ const Checkout = () => {
</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}
- checkoutValidation={checkoutValidation}
- expedisiValidation={expedisiValidation}
- />
- <Divider />
- <SectionListService
- listserviceExpedisi={listserviceExpedisi}
- setSelectedServiceType={setSelectedServiceType}
- />
+ <div className='container mx-auto py-10'>
+ {selectedCarrierId == SELF_PICKUP_ID && (
+ <div
+ class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300'
+ role='alert'
+ >
+ <svg
+ class='flex-shrink-0 inline w-4 h-4 mr-3'
+ aria-hidden='true'
+ fill='currentColor'
+ viewBox='0 0 20 20'
+ >
+ <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+ </svg>
+ <span class='sr-only'>Info</span>
+ <div>
+ Fitur Self Pickup, hanya berlaku untuk customer di area jakarta. Apa bila memilih
+ fitur ini, anda akan dihubungi setelah barang siap diambil.
+ </div>
+ </div>
+ )}
+
+ <div className='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}
+ checkoutValidation={checkoutValidation}
+ expedisiValidation={expedisiValidation}
+ />
+ <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 ? (
+ <div className='p-4'>
+ <div className='font-medium'>Detail Pesanan</div>
+ <table className='table-checkout'>
+ <thead>
<tr>
- <td colSpan={4}>
- <div className='container my-4'>
- <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
- <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
- <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
- <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
- </div>
- </td>
+ <th>Nama Produk</th>
+ <th>Jumlah</th>
+ <th>Harga</th>
+ <th>Subtotal</th>
</tr>
- ) : (
- products?.map((product) => (
- <>
- <tr
- key={product.id}
- className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
- >
- <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
+ </thead>
+ <tbody>
+ {!products ? (
+ <tr>
+ <td colSpan={4}>
+ <div className='container my-4'>
+ <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ </td>
+ </tr>
+ ) : (
+ products?.map((product) => (
+ <>
+ <tr
+ key={product.id}
+ className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+ >
+ <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>
- </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 className='px-2 text-left'>
+ <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+ {product?.parent?.name}
</div>
- <div className='badge-solid-red'>
- {product?.price?.discountPercentage}%
+ <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>
- )}
- <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>
- {product.program &&
- product.program.items &&
- product.program.items.map((item) => (
- <>
- <tr key={product?.program?.id} className='!border-t-0'>
- <td className='flex'>
- <div className='w-[20%] flex-shrink-0'>
- <Image
- src={item.parent.image}
- alt={item.name}
- className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
- />
+ </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='px-2 text-left'>
- <div className=''>
- <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
- {product.program.type.label}
- </span>
- </div>
- <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
+ <div className='badge-solid-red'>
+ {product?.price?.discountPercentage}%
</div>
- </td>
- <td>
- <input
- className='form-input w-16 py-2 text-center bg-gray_r-1'
- type='number'
- value={1}
- disabled
- />
- </td>
- <td>
- {item?.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='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>
+ {product.program &&
+ product.program.items &&
+ product.program.items.map((item) => (
+ <>
+ <tr key={product?.program?.id} className='!border-t-0'>
+ <td className='flex'>
+ <div className='w-[20%] flex-shrink-0'>
+ <Image
+ src={item.parent.image}
+ alt={item.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=''>
+ <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+ {product.program.type.label}
+ </span>
</div>
+ <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
</div>
- )}
- <div className='font-normal mt-1'>
- {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
- </div>
- </td>
- <td>
- <div className='text-danger-500 font-medium'>
- {item.price.priceDiscount > 0 ? 'Gratis' : ''}
- </div>
- </td>
- <td></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>
+ </td>
+ <td>
+ <input
+ className='form-input w-16 py-2 text-center bg-gray_r-1'
+ type='number'
+ value={1}
+ disabled
+ />
+ </td>
+ <td>
+ {item?.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>
+ )}
+ <div className='font-normal mt-1'>
+ {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td></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' />
- {!cartCheckout ? (
- <div
- role='status'
- class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
- >
- <div class='flex items-center justify-between'>
- <div>
- <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ <hr className='my-4 border-gray_r-6' />
+ {!cartCheckout ? (
+ <div
+ role='status'
+ class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+ >
+ <div class='flex items-center justify-between'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
- <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
- </div>
- <div class='flex items-center justify-between pt-4'>
- <div>
- <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
- <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
- </div>
- <div class='flex items-center justify-between pt-4'>
- <div>
- <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
- <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
- <div class='flex items-center justify-between pt-4'>
- <div>
- <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ ) : (
+ <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(cartCheckout?.totalPurchase)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Produk</div>
+ <div className='text-danger-500'>
+ - {currencyFormat(cartCheckout?.totalDiscount)}
+ </div>
+ </div>
+ {activeVoucher && (
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Voucher</div>
+ <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ </div>
+ )}
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</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 class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
- <div class='flex items-center justify-between pt-4'>
+ )}
+
+ <hr className='my-4 border-gray_r-6' />
+ {!cartCheckout ? (
+ <div className='flex gap-x-2 justify-between mb-4'>
<div>
+ {' '}
<div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
</div>
- <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
- </div>
- </div>
- ) : (
- <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(cartCheckout?.totalPurchase)}</div>
- </div>
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Produk</div>
- <div className='text-danger-500'>
- - {currencyFormat(cartCheckout?.totalDiscount)}
+ <div className='font-semibold text-gray_r-12'>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
</div>
</div>
- {activeVoucher && (
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Voucher</div>
- <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ ) : (
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>Grand Total</div>
+ <div className='font-semibold text-gray_r-12'>
+ {currencyFormat(
+ cartCheckout?.grandTotal +
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
</div>
- )}
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</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)}
+ )}
+
+ <hr className='my-4 border-gray_r-6' />
+
+ <div className='mt-4 mb-4'>
+ <button
+ type='button'
+ onClick={() => {
+ SetBottomPopup(true)
+ voucher()
+ }}
+ className='text-gray-900 p-3 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+ >
+ <div className='flex items-center justify-between gap-x-3'>
+ <span className='text-left text-gray_r-9'>
+ <Image
+ src={'/images/DISKONICON.svg'}
+ alt={''}
+ className='object-contain object-center h-6 w-full rounded-md'
+ />
+ </span>
+ {activeVoucher ? (
+ <div className=''>
+ <div className='text-left text-sm text-black font-semibold'>
+ Hemat {currencyFormat(discountVoucher)}
+ </div>
+ <div className='text-left mt-1 text-green-600 text-xs'>
+ Voucher berhasil digunakan
+ </div>
+ </div>
+ ) : (
+ <span className='text-left text-sm text-gray_r-9'>
+ Hemat belanja dengan promo
+ </span>
+ )}
</div>
- </div>
+ <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
+ </button>
</div>
- )}
- <hr className='my-4 border-gray_r-6' />
- {!cartCheckout ? (
- <div className='flex gap-x-2 justify-between mb-4'>
- <div>
- {' '}
- <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
- </div>
- <div className='font-semibold text-gray_r-12'>
- <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></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='flex gap-x-2 justify-between mb-4'>
- <div>Grand Total</div>
- <div className='font-semibold text-gray_r-12'>
- {currencyFormat(
- cartCheckout?.grandTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
- )}
+
+ <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' />
+ <hr className='my-4 border-gray_r-6' />
- <div className='mt-4 mb-4'>
<button
- type='button'
- onClick={() => {
- SetBottomPopup(true)
- voucher()
- }}
- className='text-gray-900 p-3 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+ className='w-full btn-yellow mt-4'
+ onClick={checkout}
+ disabled={isLoading || !products || products?.length == 0 || priceCheck}
>
- <div className='flex items-center justify-between gap-x-3'>
- <span className='text-left text-gray_r-9'>
- <Image
- src={'/images/DISKONICON.svg'}
- alt={''}
- className='object-contain object-center h-6 w-full rounded-md'
- />
+ {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>
- {activeVoucher ? (
- <div className=''>
- <div className='text-left text-sm text-black font-semibold'>
- Hemat {currencyFormat(discountVoucher)}
- </div>
- <div className='text-left mt-1 text-green-600 text-xs'>
- Voucher berhasil digunakan
- </div>
- </div>
- ) : (
- <span className='text-left text-sm text-gray_r-9'>
- Hemat belanja dengan promo
- </span>
- )}
</div>
- <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
- </button>
- </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}
- >
- {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>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 2c849bd6..abf462a1 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -44,7 +44,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
width={13}
height={5}
/>
- <span className='text-white text-[11px] font-semibold'>
+ <span className='text-white text-[9px] md:text-[10px] font-semibold'>
{product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}
</span>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 13:44:32 +0000