From 96e59b7af6895f82ac005d60b65084bd5ec2d01f Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 31 Aug 2023 16:47:34 +0700
Subject: change ui open newtab, g maps, top banner, profil

---
 .../components/elements/Footer/BasicFooter.jsx     |  12 +-
 .../components/elements/Navbar/NavbarDesktop.jsx   |   9 +-
 src/lib/auth/components/CompanyProfile.jsx         |   2 +-
 src/lib/checkout/components/Checkout.jsx           | 752 +++++++++++----------
 src/lib/product/components/ProductCard.jsx         |   2 +-
 5 files changed, 417 insertions(+), 360 deletions(-)

(limited to 'src')

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 acd2d1ee..81ec6d0e 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -97,13 +97,13 @@ 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 && (
@@ -118,7 +118,7 @@ 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>
@@ -155,12 +155,14 @@ 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>
@@ -175,6 +177,7 @@ 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/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/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index afb94c10..27a00aa8 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -490,7 +490,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'
@@ -519,7 +521,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>{' '}
@@ -537,7 +540,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>{' '}
@@ -652,6 +656,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 && (
           <>
@@ -884,393 +911,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>
-- 
cgit v1.2.3