Merge branch 'new-release' into CR/quotation-noPo

15 files changed, 548 insertions, 168 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index bcb41dd6..f52aa5f7 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -85,7 +85,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <SessionProvider session={session}>
       <ScrollToTop />
-      
+
       <AnimatePresence>
         {animateLoader && (
           <motion.div
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 6af6294f..4b67c3f9 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -115,6 +115,19 @@ export default function MyDocument() {
           }}
         />
 
+        <Script
+          async
+          id='gtag-config'
+          strategy='afterInteractive'
+          dangerouslySetInnerHTML={{
+            __html: `
+            gtag('config', 'AW-954540379/fCU8CI3Y8OoZENvClMcD', {
+              'phone_conversion_number': '(021) 29338828'
+            });
+          `,
+          }}
+        />
+
         {/* <Script
           id='tawk-script-tag'
           strategy='afterInteractive'
diff --git a/src/pages/api/banner-section.js b/src/pages/api/banner-section.js
new file mode 100644
index 00000000..7d7040c0
--- /dev/null
+++ b/src/pages/api/banner-section.js
@@ -0,0 +1,44 @@
+import odooApi from '@/core/api/odooApi';
+import { createClient } from 'redis';
+
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  try {
+    await connectRedis();
+    const cacheKey = 'hero-banner';
+    // await client.del(cacheKey);
+    let cachedData = await client.get(cacheKey);
+
+    if (cachedData) {
+      const data = JSON.parse(cachedData);
+      return res.status(200).json({ data });
+    } else {
+      const dataBannerSections = await odooApi(
+        'GET',
+        '/api/v1/banner?type=home-banner'
+      );
+
+      // Simpan hasil fetch ke Redis dengan masa kadaluarsa 3 hari (259200 detik)
+      await client.set(
+        cacheKey,
+        JSON.stringify(dataBannerSections),
+        'EX',
+        259200
+      );
+
+      return res.status(200).json({ data: dataBannerSections });
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis or fetching data:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
diff --git a/src/pages/api/category-management.js b/src/pages/api/category-management.js
new file mode 100644
index 00000000..f05d8644
--- /dev/null
+++ b/src/pages/api/category-management.js
@@ -0,0 +1,85 @@
+import { createClient } from 'redis';
+// import { fetchCategoryManagementSolr } from '../../lib/home/api/categoryManagementApi';
+const client = createClient();
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  try {
+    await connectRedis();
+    // await client.del('homepage_categoryDynamic');
+
+    let cachedData;
+    if (req.method === 'GET') {
+      cachedData = await client.get('homepage_categoryDynamic');
+
+      if (!cachedData) {
+        const items = await fetchCategoryManagementSolr();
+        await client.set(
+          'homepage_categoryDynamic',
+          JSON.stringify(items),
+          'EX',
+          259200 // Expiry 3 hari
+        );
+        cachedData = await client.get('homepage_categoryDynamic');
+      }
+      const data = cachedData ? JSON.parse(cachedData) : null;
+      res.status(200).json({ data });
+    } else {
+      res.setHeader('Allow', ['GET']);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis:', error);
+    res.status(500).json({ error: 'Error interacting with Redis' });
+  }
+}
+
+const fetchCategoryManagementSolr = async () => {
+  let sort = 'sort=sequence_i asc';
+  try {
+    const response = await fetch(
+      `http://34.101.189.218:8983/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    const promotions = await map(data.response.docs);
+    return promotions;
+  } catch (error) {
+    console.error('Error fetching promotion data:', error);
+    return [];
+  }
+};
+const map = async (promotions) => {
+  return promotions.map((promotion) => {
+    let parsedCategories = promotion.categories.map((category) => {
+      // Parse string JSON utama
+      let parsedCategory = JSON.parse(category);
+
+      // Parse setiap elemen di child_frontend_id_i jika ada
+      if (parsedCategory.child_frontend_id_i) {
+        parsedCategory.child_frontend_id_i =
+          parsedCategory.child_frontend_id_i.map((child) => JSON.parse(child));
+      }
+
+      return parsedCategory;
+    });
+    let productMapped = {
+      id: promotion.id,
+      name: promotion.name_s,
+      image: promotion.image_s,
+      sequence: promotion.sequence_i,
+      numFound: promotion.numFound_i,
+      categories: parsedCategories,
+      category_id: promotion.category_id_i,
+    };
+    return productMapped;
+  });
+};
diff --git a/src/pages/api/flashsale-header.js b/src/pages/api/flashsale-header.js
new file mode 100644
index 00000000..31f8efdd
--- /dev/null
+++ b/src/pages/api/flashsale-header.js
@@ -0,0 +1,40 @@
+import odooApi from '@/core/api/odooApi';
+import { createClient } from 'redis';
+
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  try {
+    await connectRedis();
+    const cacheKey = `flashsale_header`;
+    // await client.del(cacheKey);
+    let cachedData = await client.get(cacheKey);
+
+    if (cachedData) {
+      const data = JSON.parse(cachedData);
+      return res.status(200).json({ data });
+    } else {
+      const flashSale = await odooApi('GET', `/api/v1/flashsale/header`);
+
+      await client.set(
+        cacheKey,
+        JSON.stringify(flashSale),
+        'EX',
+        flashSale.duration
+      );
+      cachedData = await client.get(cacheKey);
+      return res.status(200).json({ data: cachedData });
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis or fetching data:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
diff --git a/src/pages/api/hero-banner.js b/src/pages/api/hero-banner.js
new file mode 100644
index 00000000..7a348cfa
--- /dev/null
+++ b/src/pages/api/hero-banner.js
@@ -0,0 +1,45 @@
+import odooApi from '@/core/api/odooApi';
+import { createClient } from 'redis';
+
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  const { type } = req.query;
+  try {
+    await connectRedis();
+    const cacheKey = `homepage_bannerSection_${type}`;
+    // await client.del(cacheKey);
+    let cachedData = await client.get(cacheKey);
+
+    if (cachedData) {
+      const data = JSON.parse(cachedData);
+      return res.status(200).json({ data });
+    } else {
+      const dataBannerSections = await odooApi(
+        'GET',
+        `/api/v1/banner?type=${type}`
+      );
+
+      // Simpan hasil fetch ke Redis dengan masa kadaluarsa 3 hari (259200 detik)
+      await client.set(
+        cacheKey,
+        JSON.stringify(dataBannerSections),
+        'EX',
+        259200
+      );
+      cachedData = await client.get(cacheKey);
+      return res.status(200).json({ data: cachedData });
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis or fetching data:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
diff --git a/src/pages/api/page-content.js b/src/pages/api/page-content.js
new file mode 100644
index 00000000..a6514505
--- /dev/null
+++ b/src/pages/api/page-content.js
@@ -0,0 +1,43 @@
+import { createClient } from 'redis';
+import { getPageContent } from '~/services/pageContent';
+// import { fetchCategoryManagementSolr } from '../../lib/home/api/categoryManagementApi';
+const client = createClient();
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  const { path } = req.query;
+  try {
+    await connectRedis();
+    // await client.del('onbording-popup');
+
+    let cachedData;
+    if (req.method === 'GET') {
+      cachedData = await client.get(`page-content:${path}`);
+
+      if (!cachedData) {
+        const items = await getPageContent({ path });
+        await client.set(
+          `page-content:${path}`,
+          JSON.stringify(items),
+          'EX',
+          604800 // Expiry 1 minggu
+        );
+        cachedData = await client.get(`page-content:${path}`);
+      }
+      const data = cachedData ? JSON.parse(cachedData) : null;
+      res.status(200).json({ data });
+    } else {
+      res.setHeader('Allow', ['GET']);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis:', error);
+    res.status(500).json({ error: 'Error interacting with Redis' });
+  }
+}
diff --git a/src/pages/api/search-flashsale.js b/src/pages/api/search-flashsale.js
new file mode 100644
index 00000000..d9e56c83
--- /dev/null
+++ b/src/pages/api/search-flashsale.js
@@ -0,0 +1,45 @@
+import odooApi from '@/core/api/odooApi';
+import { createClient } from 'redis';
+import _ from 'lodash-contrib';
+import axios from 'axios';
+
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  const { query, operation, duration } = req.query;
+  try {
+    await connectRedis();
+    const cacheKey = `flashsale_product`;
+    // await client.del(cacheKey);
+    let cachedData = await client.get(cacheKey);
+
+    if (cachedData) {
+      const data = JSON.parse(cachedData);
+      return res.status(200).json({ data });
+    } else {
+      const dataProductSearch = await axios(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}]`
+      );
+
+      await client.set(
+        cacheKey,
+        JSON.stringify(dataProductSearch.data),
+        'EX',
+        duration
+      );
+      cachedData = await client.get(cacheKey);
+      return res.status(200).json({ data: cachedData });
+    }
+  } catch (error) {
+    console.error('Error interacting with Redis or fetching data:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js
index 9c2824b3..d56e4b13 100644
--- a/src/pages/api/shop/brands.js
+++ b/src/pages/api/shop/brands.js
@@ -1,8 +1,20 @@
 import axios from 'axios';
+import { createClient } from 'redis';
 
 const SOLR_HOST = process.env.SOLR_HOST;
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
 
 export default async function handler(req, res) {
+  await connectRedis();
+
   try {
     let params = '*:*';
     let sort =
@@ -11,12 +23,12 @@ export default async function handler(req, res) {
 
     if (req.query.params) {
       rows = 100;
-      switch (req?.query?.params) {
+      switch (req.query.params) {
         case 'level_s':
           params = 'level_s:prioritas';
           break;
         case 'search':
-          params = `name_s:"${req?.query?.q.toLowerCase()}"`;
+          params = `name_s:"${req.query.q.toLowerCase()}"`;
           sort = '';
           rows = 1;
           break;
@@ -24,11 +36,11 @@ export default async function handler(req, res) {
           params = `name_s:${req.query.params}`.toLowerCase();
       }
     }
-    if(req.query.rows) rows = req.query.rows;
-    
+    if (req.query.rows) rows = req.query.rows;
+
     const url = `${SOLR_HOST}/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`;
-    let brands = await axios(url);
-    let dataBrands = responseMap(brands.data.response.docs);
+    const brands = await axios(url);
+    const dataBrands = responseMap(brands.data.response.docs);
 
     res.status(200).json(dataBrands);
   } catch (error) {
@@ -39,13 +51,11 @@ export default async function handler(req, res) {
 
 const responseMap = (brands) => {
   return brands.map((brand) => {
-    let brandMapping = {
+    return {
       id: brand.id,
       name: brand.display_name_s,
       logo: brand.image_s || '',
-      sequance: brand.sequence_i || '',
+      sequence: brand.sequence_i || '',
     };
-
-    return brandMapping;
   });
 };
diff --git a/src/pages/api/shop/preferredBrand.js b/src/pages/api/shop/preferredBrand.js
new file mode 100644
index 00000000..4cb35c84
--- /dev/null
+++ b/src/pages/api/shop/preferredBrand.js
@@ -0,0 +1,61 @@
+import axios from 'axios';
+import { createClient } from 'redis';
+
+const SOLR_HOST = process.env.SOLR_HOST;
+const client = createClient();
+
+client.on('error', (err) => console.error('Redis Client Error', err));
+
+const connectRedis = async () => {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+};
+
+export default async function handler(req, res) {
+  await connectRedis();
+
+  try {
+    let params = '*:*';
+    let sort =
+      'sort=if(exists(sequence_i),0,1) asc,sequence_i asc, if(exists(image_s),0,1) asc ';
+    let rows = 20;
+
+    if (req.query.params) {
+      rows = 20;
+      switch (req.query.params) {
+        case 'level_s':
+          params = 'level_s:prioritas';
+          break;
+        case 'search':
+          params = `name_s:"${req.query.q.toLowerCase()}"`;
+          sort = '';
+          rows = 1;
+          break;
+        default:
+          params = `name_s:${req.query.params}`.toLowerCase();
+      }
+    }
+    if (req.query.rows) rows = req.query.rows;
+
+    const url = `${SOLR_HOST}/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`;
+    const brands = await axios(url);
+    const dataBrands = responseMap(brands.data.response.docs);
+
+    res.status(200).json(dataBrands);
+  } catch (error) {
+    console.error('Error fetching data from Solr:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
+
+const responseMap = (brands) => {
+  return brands.map((brand) => {
+    return {
+      id: brand.id,
+      name: brand.display_name_s,
+      logo: brand.image_s || '',
+      sequence: brand.sequence_i || '',
+    };
+  });
+};
diff --git a/src/pages/api/shop/product-detail.js b/src/pages/api/shop/product-detail.js
index 247f2a04..faa96028 100644
--- a/src/pages/api/shop/product-detail.js
+++ b/src/pages/api/shop/product-detail.js
@@ -8,7 +8,7 @@ export default async function handler(req, res) {
     )
     let productVariants = await axios(
       process.env.SOLR_HOST +
-        `/solr/variants/select?q=template_id_i:${req.query.id}&q.op=OR&indent=true&rows=100&fq=-publish_b:false`
+        `/solr/variants/select?q=template_id_i:${req.query.id}&q.op=OR&indent=true&rows=100&fq=-publish_b:false AND price_tier1_v2_f:[1 TO *]`
     )
     let auth  = req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth
     let result = productMappingSolr(productTemplate.data.response.docs, auth || false)
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index ace281f7..63ec7ca0 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -20,7 +20,6 @@ export default async function handler(req, res) {
   } = req.query;
 
   let { stock = '' } = req.query;
-
   let paramOrderBy = '';
   switch (orderBy) {
     case 'flashsale-discount-desc':
@@ -73,8 +72,9 @@ export default async function handler(req, res) {
 
   const formattedQuery = `(${newQ
     .split(' ')
-    .map((term) => `${term}*`)
+    .map((term) => (term.length < 2 ? term : `${term}*`)) // Tambahkan '*' hanya jika panjang kata >= 2
     .join(' ')})`;
+
   const mm =
     checkQ.length > 2
       ? checkQ.length > 5
@@ -88,11 +88,23 @@ export default async function handler(req, res) {
     'price_tier1_v2_f:[1 TO *]',
   ];
 
-  if (fq && source != 'similar') {
-    filterQueries.push(fq);
+  if (fq && source != 'similar' && typeof fq != 'string') {
+    // filterQueries.push(fq);
+    fq.push(...filterQueries);
   }
   const fq_ = filterQueries.join(' AND ');
 
+  let keywords = newQ;
+  if (source === 'similar' || checkQ.length < 3) {
+    if (checkQ.length < 2 || checkQ[1].length < 2) {
+      keywords = newQ;
+    } else {
+      keywords = newQ + '*';
+    }
+  } else {
+    keywords = formattedQuery;
+  }
+
   let offset = (page - 1) * limit;
   let parameter = [
     'facet.field=manufacture_name_s',
@@ -101,13 +113,7 @@ export default async function handler(req, res) {
     'indent=true',
     `facet.query=${escapeSolrQuery(q)}`,
     `q.op=OR`,
-    `q=${
-      source == 'similar' || checkQ.length < 3
-        ? checkQ.length < 2
-          ? newQ
-          : newQ + '*'
-        : formattedQuery
-    }`,
+    `q=${keywords}`,
     `defType=edismax`,
     'qf=name_s description_clean_t category_name manufacture_name_s variants_code_t variants_name_t category_id_ids default_code_s manufacture_id_i category_id_i  ',
     `start=${parseInt(offset)}`,
@@ -152,13 +158,12 @@ export default async function handler(req, res) {
   if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`);
 
   // Single fq in url params
-  // if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`);
+  if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`);
   // Multi fq in url params
   if (Array.isArray(fq))
     parameter = parameter.concat(
       fq.map((val) => `fq=${encodeURIComponent(val)}`)
     );
-
   let result = await axios(
     process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&')
   );
diff --git a/src/pages/api/shop/variant-detail.js b/src/pages/api/shop/variant-detail.js
index 08ce75b8..af3525b3 100644
--- a/src/pages/api/shop/variant-detail.js
+++ b/src/pages/api/shop/variant-detail.js
@@ -1,21 +1,28 @@
-import { productMappingSolr, variantsMappingSolr } from '@/utils/solrMapping'
-import axios from 'axios'
+import { productMappingSolr, variantsMappingSolr } from '@/utils/solrMapping';
+import axios from 'axios';
 
 export default async function handler(req, res) {
   try {
     let productVariants = await axios(
       process.env.SOLR_HOST +
         `/solr/variants/select?q=id:${req.query.id}&q.op=OR&indent=true`
-    )
-    let auth  = req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth
+    );
+    let template_id = productVariants.data.response.docs[0].template_id_i;
+    let auth =
+      req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth;
     let productTemplate = await axios(
-      process.env.SOLR_HOST + `/solr/product/select?q=id:${req.query.id}&q.op=OR&indent=true`
-    )
-    let result = variantsMappingSolr(productTemplate.data.response.docs, productVariants.data.response.docs, auth || false)
-    
-    res.status(200).json(result)
+      process.env.SOLR_HOST +
+        `/solr/product/select?q=id:${template_id}&q.op=OR&indent=true`
+    );
+    let result = variantsMappingSolr(
+      productTemplate.data.response.docs,
+      productVariants.data.response.docs,
+      auth || false
+    );
+
+    res.status(200).json(result);
   } catch (error) {
-    console.error('Error fetching data from Solr:', error)
-    res.status(500).json({ error: 'Internal Server Error' })
+    console.error('Error fetching data from Solr:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index cc4d68db..2ec1231a 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -45,18 +45,19 @@ const FlashSale = dynamic(
   }
 );
 
-const ProgramPromotion = dynamic(() =>
-  import('@/lib/home/components/PromotionProgram'),
-{
-  loading: () => <BannerPromoSkeleton />,
-}
+const ProgramPromotion = dynamic(
+  () => import('@/lib/home/components/PromotionProgram'),
+  {
+    loading: () => <BannerPromoSkeleton />,
+  }
 );
 
 const BannerSection = dynamic(() =>
   import('@/lib/home/components/BannerSection')
-);  
-const CategoryHomeId = dynamic(() =>
-  import('@/lib/home/components/CategoryHomeId'), {ssr: false}
+);
+const CategoryHomeId = dynamic(
+  () => import('@/lib/home/components/CategoryHomeId'),
+  { ssr: false }
 );
 
 const CategoryDynamic = dynamic(() =>
@@ -64,17 +65,18 @@ const CategoryDynamic = dynamic(() =>
 );
 
 const CategoryDynamicMobile = dynamic(() =>
-import('@/lib/home/components/CategoryDynamicMobile')
+  import('@/lib/home/components/CategoryDynamicMobile')
 );
 
-const CustomerReviews = dynamic(() =>
-  import('@/lib/review/components/CustomerReviews'), {ssr: false}
+const CustomerReviews = dynamic(
+  () => import('@/lib/review/components/CustomerReviews'),
+  { ssr: false }
 ); // need to ssr:false
-const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {ssr: false}); // need to ssr: false
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {
+  ssr: false,
+}); // need to ssr: false
 
-
-
-export default function Home({categoryId}) {
+export default function Home({ categoryId }) {
   const bannerRef = useRef(null);
   const wrapperRef = useRef(null);
 
@@ -85,123 +87,110 @@ export default function Home({categoryId}) {
       bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
   };
 
-  useEffect(() => {
-    const loadCategories = async () => {
-     const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId})
-     if(getCategories){
-      setDataCategories(getCategories)
-     }
-    }
-    loadCategories()
-  }, [])
-
-  const [dataCategories, setDataCategories] = useState([])
   return (
     <>
-    <BasicLayout>
-      <Seo
-        title='Indoteknik.com: B2B Industrial Supply & Solution'
-        description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
-        additionalMetaTags={[
-          {
-            name: 'keywords',
-            content: 'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
-          },
-        ]} />
-
-      <PagePopupIformation />
-
-      <DesktopView>
-        <div className='container mx-auto'>
-          <div
-            className='flex min-h-[400px] h-[460px]'
-            ref={wrapperRef}
-            onLoad={handleOnLoad}
-          >
-            <div className='w-2/12'>
-              <HeroBannerSecondary />
-            </div>
-            <div className='w-7/12 px-1' ref={bannerRef}>
-              <HeroBanner />
+      <BasicLayout>
+        <Seo
+          title='Indoteknik.com: B2B Industrial Supply & Solution'
+          description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
+          additionalMetaTags={[
+            {
+              name: 'keywords',
+              content:
+                'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
+            },
+          ]}
+        />
+
+        <PagePopupIformation />
+
+        <DesktopView>
+          <div className='container mx-auto'>
+            <div
+              className='flex min-h-[400px] h-[460px]'
+              ref={wrapperRef}
+              onLoad={handleOnLoad}
+            >
+              <div className='w-2/12'>
+                <HeroBannerSecondary />
+              </div>
+              <div className='w-7/12 px-1' ref={bannerRef}>
+                <HeroBanner />
+              </div>
+              <div className='w-3/12'>
+                <DelayRender renderAfter={200}>
+                  <PopularProduct />
+                </DelayRender>
+              </div>
             </div>
-            <div className='w-3/12'>
-              <DelayRender renderAfter={200}>
-                <PopularProduct />
-              </DelayRender>
-            </div>
-          </div>
 
-          <div className='my-16 flex flex-col gap-y-8'>
-            <ServiceList />
-            <div id='flashsale'>
-              <PreferredBrand />
+            <div className='my-16 flex flex-col gap-y-8'>
+              <ServiceList />
+              <div id='flashsale'>
+                <PreferredBrand />
+              </div>
+              {!auth?.feature?.soApproval && (
+                <>
+                  <DelayRender renderAfter={200}>
+                    <ProgramPromotion />
+                  </DelayRender>
+                  <DelayRender renderAfter={200}>
+                    <FlashSale />
+                  </DelayRender>
+                </>
+              )}
+              {/* <PromotinProgram /> */}
+              <CategoryPilihan />
+              <CategoryDynamic />
+              <CategoryHomeId />
+              <BannerSection />
+              <CustomerReviews />
             </div>
+          </div>
+        </DesktopView>
+        <MobileView>
+          <DelayRender renderAfter={200}>
+            <HeroBanner />
+          </DelayRender>
+          <div className='flex flex-col gap-y-4 my-6'>
+            <DelayRender renderAfter={400}>
+              <ServiceList />
+            </DelayRender>
+            <DelayRender renderAfter={400}>
+              <div id='flashsale'>
+                <PreferredBrand />
+              </div>
+            </DelayRender>
             {!auth?.feature?.soApproval && (
               <>
-              <DelayRender renderAfter={200}>
-                <ProgramPromotion />
-              </DelayRender>
-              <DelayRender renderAfter={200}>
-                <FlashSale />
-              </DelayRender>
+                <DelayRender renderAfter={400}>
+                  <ProgramPromotion />
+                </DelayRender>
+                <DelayRender renderAfter={600}>
+                  <FlashSale />
+                </DelayRender>
               </>
             )}
-            {/* <PromotinProgram /> */}
-            {dataCategories &&(
-              <CategoryPilihan categories={dataCategories} />
-            )}
-            <CategoryDynamic /> 
-            <CategoryHomeId />
-            <BannerSection />
-            <CustomerReviews />
+            <DelayRender renderAfter={600}>
+              {/* <PromotinProgram /> */}
+            </DelayRender>
+            <DelayRender renderAfter={600}>
+              <CategoryPilihan />
+              <CategoryDynamicMobile />
+            </DelayRender>
+            <DelayRender renderAfter={800}>
+              <PopularProduct />
+            </DelayRender>
+            <DelayRender renderAfter={1000}>
+              <CategoryHomeId />
+              <BannerSection />
+            </DelayRender>
+            <DelayRender renderAfter={1200}>
+              <CustomerReviews />
+            </DelayRender>
           </div>
-        </div>
-    </DesktopView>
-    <MobileView>
-        <DelayRender renderAfter={200}>
-          <HeroBanner />
-        </DelayRender>
-        <div className='flex flex-col gap-y-4 my-6'>
-          <DelayRender renderAfter={400}>
-            <ServiceList />
-          </DelayRender>
-          <DelayRender renderAfter={400}>
-            <div id='flashsale'>
-              <PreferredBrand />
-            </div>
-          </DelayRender>
-          {!auth?.feature?.soApproval && (
-            <>
-              <DelayRender renderAfter={400}>
-                <ProgramPromotion />
-              </DelayRender>
-              <DelayRender renderAfter={600}>
-                <FlashSale />
-              </DelayRender>
-            </>
-          )}
-          <DelayRender renderAfter={600}>
-            {/* <PromotinProgram /> */}
-          </DelayRender>
-          <DelayRender renderAfter={600}>
-            {dataCategories &&(
-              <CategoryPilihan categories={dataCategories} />
-            )}
-            <CategoryDynamicMobile />
-          </DelayRender>
-          <DelayRender renderAfter={800}>
-            <PopularProduct />
-          </DelayRender>
-          <DelayRender renderAfter={1000}>
-            <CategoryHomeId />
-            <BannerSection />
-          </DelayRender>
-          <DelayRender renderAfter={1200}>
-            <CustomerReviews />
-          </DelayRender>
-        </div>
-      </MobileView>
-    </BasicLayout>
-  </>
+        </MobileView>
+      </BasicLayout>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx
index 42f38774..2c0dd64b 100644
--- a/src/pages/shop/product/variant/[slug].jsx
+++ b/src/pages/shop/product/variant/[slug].jsx
@@ -32,16 +32,9 @@ export async function getServerSideProps(context) {
       tier
   );
   let product = response.data;
-  // let product = await variantApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
 
   if (product?.length == 1) {
     product = product[0];
-    /* const regexHtmlTags = /(<([^>]+)>)/gi
-    const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
-    product.description = product.description
-      .replace(regexHtmlTagsExceptP, ' ')
-      .replace(regexHtmlTags, ' ')
-      .trim()*/
   } else {
     product = null;
   }