path: root/src/lib/product/components/Product/ProductMobile.jsx

import Divider from '@/core/components/elements/Divider/Divider';
import Image from '@/core/components/elements/Image/Image';
import Link from '@/core/components/elements/Link/Link';
import currencyFormat from '@/core/utils/currencyFormat';
import { useEffect, useState } from 'react';
import Select from 'react-select';
import ProductSimilar from '../ProductSimilar';
import LazyLoad from 'react-lazy-load';
import { updateItemCart } from '@/core/utils/cart';
import { HeartIcon } from '@heroicons/react/24/outline';
import { useRouter } from 'next/router';
import MobileView from '@/core/components/views/MobileView';
import { toast } from 'react-hot-toast';
import { createSlug } from '@/core/utils/slug';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import whatsappUrl from '@/core/utils/whatsappUrl';
import PromotionType from '@/lib/promotinProgram/components/PromotionType';
import { gtagAddToCart } from '@/core/utils/googleTag';
import odooApi from '@/core/api/odooApi';
import ImageNext from 'next/image';
import CountDown2 from '@/core/components/elements/CountDown/CountDown2';
import Breadcrumb from './Breadcrumb';
import useAuth from '@/core/hooks/useAuth';
import { sellingProductFormat } from '@/core/utils/formatValue';
import ProductPromoSection from '~/modules/product-promo/components/Section';

const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
  const router = useRouter();
  const auth = useAuth();
  const { slug } = router.query;

  const [quantity, setQuantity] = useState('1');
  const [selectedVariant, setSelectedVariant] = useState(null);
  const [informationTab, setInformationTab] = useState(
    informationTabOptions[0].value
  );
  const [addCartAlert, setAddCartAlert] = useState(false);

  const [isLoadingSLA, setIsLoadingSLA] = useState(true);
  const [promotionType, setPromotionType] = useState(false);
  const [promotionActiveId, setPromotionActiveId] = useState(null);
  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null);

  const getLowestPrice = () => {
    const prices = product.variants.map((variant) => variant.price);
    const lowest = prices.reduce((lowest, price) => {
      return price.priceDiscount < lowest.priceDiscount ? price : lowest;
    }, prices[0]);
    return lowest;
  };

  useEffect(() => {
    const getBackgound = async () => {
      const get = await odooApi(
        'GET',
        '/api/v1/banner?type=flash-sale-background-banner'
      );
      if (get.length > 0) {
        setBackgorundFlashSale(get[0].image);
      }
    };
    getBackgound();
  }, []);

  const [activeVariant, setActiveVariant] = useState({
    id: null,
    code: product.code,
    name: product.name,
    price: getLowestPrice(),
    stock: product.stockTotal,
    weight: product.weight,
    hasProgram: false,
    qtySold: product.qtySold,
  });

  const variantOptions = product.variants?.map((variant) => {
    let label = [];
    if (variant.isFlashsale) {
      label.push("<span class='blink-color-flash-sale'>&#128498;</span>");
    }
    if (variant.code) {
      label.push(`[${variant.code}]`);
    }
    if (variant.attributes.length > 0) {
      label.push(variant.attributes.join(', '));
    } else {
      label.push(product.name);
    }

    return {
      value: variant.id,
      label: label.join(' '),
    };
  });

  useEffect(() => {
    if (!selectedVariant && variantOptions.length == 1) {
      setSelectedVariant(variantOptions[0]);
    }
  }, [selectedVariant, variantOptions]);

  useEffect(() => {
    if (selectedVariant) {
      const variant = product.variants.find(
        (variant) => variant.id == selectedVariant.value
      );
      const variantAttributes =
        variant.attributes.length > 0
          ? ' - ' + variant.attributes.join(', ')
          : '';

      const newActiveVariant = {
        id: variant.id,
        code: variant.code,
        name: variant.parent.name + variantAttributes,
        price: variant.price,
        stock: variant.stock,
        weight: variant.weight,
        hasProgram: variant.hasProgram,
        isFlashsale: variant.isFlashsale,
        qtySold: variant.qtySold,
      };

      setActiveVariant(newActiveVariant);

      const fetchSLA = async () => {
        const dataSLA = await odooApi(
          'GET',
          `/api/v1/product_variant/${variant.id}/stock`
        );
        setActiveVariant({ ...newActiveVariant, sla: dataSLA });
      };
      fetchSLA();
    }
  }, [selectedVariant, product]);

  const validAction = () => {
    let isValid = true;
    if (!selectedVariant) {
      toast.error('Pilih varian terlebih dahulu');
      isValid = false;
    }
    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
      toast.error('Jumlah barang minimal 1');
      isValid = false;
    }
    return isValid;
  };

  const redirectToLogin = (action) => {
    const nextURL = `/shop/product/${slug}?action=${action}&variantId=${activeVariant.id}&qty=${quantity}`;
    router.push(`/login?next=${encodeURIComponent(nextURL)}`);
    return true;
  };

  const handleClickCart = () => {
    if (!validAction()) return;
    gtagAddToCart(activeVariant, quantity);

    if (!auth) {
      return redirectToLogin('add_to_cart');
    }

    updateItemCart({
      productId: activeVariant.id,
      quantity,
      programLineId: promotionActiveId,
      selected: true,
    });
    setAddCartAlert(true);
  };

  const handleClickBuy = () => {
    if (!validAction()) return;

    if (!auth) {
      return redirectToLogin('buy');
    }

    updateItemCart({
      productId: activeVariant.id,
      quantity,
      programLineId: promotionActiveId,
      selected: true,
      source: 'buy',
    });
    router.push(`/shop/checkout?source=buy`);
  };

  const productSimilarQuery = [
    product?.name,
    `fq=-product_id_i:${product.id}`,
    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
  ].join('&');

  return (
    <MobileView>
      <Breadcrumb productId={product.id} productName={product.name} />
      <div className='relative'>
        {product?.flashSale?.remainingTime > 0 &&
          activeVariant?.price.discountPercentage > 0 && (
            <div className={`absolute bottom-0 w-full`}>
              <div className='absolute bottom-0 w-full'>
                <ImageNext
                  src={backgorundFlashSale || '/images/BG-FLASH-SALE.jpg'}
                  width={1000}
                  height={100}
                />
              </div>
              <div className='relative'>
                <div className='flex gap-x-2 items-center p-2'>
                  <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
                    <span className='text-lg font-bold'>
                      {Math.floor(product.lowestPrice.discountPercentage)}%
                    </span>
                  </div>
                  <div
                    className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
                  >
                    <ImageNext
                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                      width={17}
                      height={10}
                    />
                    <span className='text-white text-lg font-semibold'>
                      {product?.flashSale?.tag != 'false' ||
                      product?.flashSale?.tag
                        ? product?.flashSale?.tag
                        : 'FLASH SALE'}
                    </span>
                  </div>
                  <div>
                    <CountDown2 initialTime={product.flashSale.remainingTime} />
                  </div>
                </div>
              </div>
            </div>
          )}
        <Image
          src={product.image}
          alt={product.name}
          className='h-72 object-contain object-center w-full border-b border-gray_r-4'
        />
      </div>

      <div className='p-4'>
        <div className='flex items-end mb-2'>
          {product.manufacture?.name ? (
            <Link
              href={createSlug(
                '/shop/brands/',
                product.manufacture?.name,
                product.manufacture?.id
              )}
            >
              {product.manufacture?.name}
            </Link>
          ) : (
            <div>-</div>
          )}
          <button type='button' className='ml-auto' onClick={toggleWishlist}>
            {wishlist.data?.productTotal > 0 ? (
              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
            ) : (
              <HeartIcon className='w-6' />
            )}
          </button>
        </div>
        <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
        {product?.qtySold > 0 && (
          <div className='text-gray_r-9'>
            {sellingProductFormat(activeVariant?.qtySold) + ' Terjual'}
          </div>
        )}
        {product.variants.length > 1 &&
          activeVariant.price.priceDiscount > 0 &&
          !selectedVariant && (
            <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>
              Harga mulai dari:{' '}
            </div>
          )}

        {activeVariant.isFlashsale &&
        activeVariant?.price?.discountPercentage > 0 ? (
          <>
            <div className='flex gap-x-1 items-center'>
              <div className='badge-solid-red'>
                {Math.floor(activeVariant?.price?.discountPercentage)}%
              </div>
              <div className='text-gray_r-11 line-through text-caption-1'>
                {currencyFormat(activeVariant?.price?.price)}
              </div>
              <div className='text-danger-500 font-semibold'>
                {currencyFormat(activeVariant?.price?.priceDiscount)}
              </div>
            </div>
            <div className='text-gray_r-9 text-base font-normal mt-1'>
              Termasuk PPN:{' '}
              {currencyFormat(
                activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
              )}
            </div>
          </>
        ) : (
          <h3 className='text-danger-500 font-semibold mt-1'>
            {activeVariant?.price?.price > 0 ? (
              <>
                {currencyFormat(activeVariant?.price?.price)}
                <div className='text-gray_r-9 text-base font-normal mt-1'>
                  Termasuk PPN:{' '}
                  {currencyFormat(
                    activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
                  )}
                </div>
              </>
            ) : (
              <span className='text-gray_r-11 leading-6 font-normal'>
                Hubungi kami untuk dapatkan harga terbaik,&nbsp;
                <a
                  href={whatsappUrl('product', {
                    name: product.name,
                    url: createSlug(
                      '/shop/product/',
                      product.name,
                      product.id,
                      true
                    ),
                  })}
                  className='text-danger-500 underline'
                >
                  klik disini
                </a>
              </span>
            )}
          </h3>
        )}
      </div>

      <Divider />

      <div className='p-4'>
        <div>
          <label className='flex justify-between'>
            Pilih Varian:
            <span className='text-gray_r-11'>
              {product?.variantTotal} Varian
            </span>
          </label>
          <Select
            name='variant'
            classNamePrefix='form-select'
            options={variantOptions}
            formatOptionLabel={({ label }) => (
              <div dangerouslySetInnerHTML={{ __html: label }} />
            )}
            className='mt-2'
            value={selectedVariant}
            onChange={(option) => setSelectedVariant(option)}
            isSearchable={product.variantTotal > 10}
          />
        </div>
        {activeVariant.hasProgram && (
          <div className='mt-5'>
            <PromotionType
              variantId={product.variants[0].id}
              setPromotionActiveId={setPromotionActiveId}
              promotionActiveId={promotionActiveId}
              quantity={quantity}
            ></PromotionType>
          </div>
        )}

        <div className='mt-4 mb-2'>Jumlah</div>
        <div className='flex gap-x-3'>
          <div className='w-2/12'>
            <input
              name='quantity'
              type='number'
              className='form-input'
              value={quantity}
              onChange={(e) => setQuantity(e.target.value)}
            />
          </div>
          <button
            type='button'
            className='btn-yellow flex-1'
            onClick={handleClickCart}
          >
            Keranjang
          </button>
          <button
            type='button'
            className='btn-solid-red flex-1'
            onClick={handleClickBuy}
          >
            Beli
          </button>
        </div>

        <div className='h-4' />
      </div>

      <ProductPromoSection productId={activeVariant.id} />

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold'>Informasi Produk</h2>
        <div className='flex gap-x-4 mt-4 mb-3'>
          {informationTabOptions.map((option) => (
            <TabButton
              value={option.value}
              key={option.value}
              active={informationTab == option.value}
              onClick={() => setInformationTab(option.value)}
            >
              {option.label}
            </TabButton>
          ))}
        </div>

        <TabContent
          active={informationTab == 'specification'}
          className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
        >
          <SpecificationContent label='Ketersediaan'>
            <span>
              {selectedVariant ? (
                activeVariant?.sla?.slaDate != '-' ? (
                  <button
                    type='button'
                    title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
                    className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
                      activeVariant?.sla?.slaDate === 'indent'
                        ? 'bg-indigo-900'
                        : 'btn-light'
                    }`}
                  >
                    <div
                      className={`flex-1 text-sm  ${
                        activeVariant?.sla?.slaDate === 'indent'
                          ? 'text-white'
                          : ''
                      }`}
                    >
                      {activeVariant?.sla?.slaDate}
                    </div>
                    <div className='flex-end'>
                      <svg
                        aria-hidden='true'
                        fill='none'
                        stroke='currentColor'
                        stroke-width='1.5'
                        className={`w-7 h-7 text-sm ${
                          activeVariant?.sla?.slaDate === 'indent'
                            ? 'text-white'
                            : ''
                        }`}
                      >
                        <path
                          d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
                          stroke-linecap='round'
                          stroke-linejoin='round'
                        ></path>
                      </svg>
                    </div>
                  </button>
                ) : (
                  '-'
                )
              ) : (
                '-'
              )}
            </span>
          </SpecificationContent>
          <SpecificationContent label='Jumlah Varian'>
            <span>{product?.variantTotal} Varian</span>
          </SpecificationContent>
          <SpecificationContent label='Nomor SKU'>
            <span>SKU-{product?.id}</span>
          </SpecificationContent>
          <SpecificationContent label='Part Number'>
            <span>{activeVariant?.code || '-'}</span>
          </SpecificationContent>
          <SpecificationContent label='Stok'>
            {activeVariant?.sla?.qty > 0 && (
              <span className='flex gap-x-1.5'>
                <div className='badge-solid-red'>Ready Stock</div>
                <div className='badge-gray'>{activeVariant?.sla?.qty}</div>
              </span>
            )}
            {activeVariant?.sla?.qty == 0 && (
              <a
                href={whatsappUrl('product', {
                  name: product.name,
                  url: createSlug(
                    '/shop/product/',
                    product.name,
                    product.id,
                    true
                  ),
                })}
                className='text-danger-500 font-medium'
              >
                Tanya Stok
              </a>
            )}
          </SpecificationContent>
          <SpecificationContent label='Berat Barang'>
            {activeVariant?.weight > 0 && (
              <span>{activeVariant?.weight} KG</span>
            )}
            {activeVariant?.weight == 0 && (
              <a
                href={whatsappUrl('productWeight', {
                  name: product.name,
                  url: createSlug(
                    '/shop/product/',
                    product.name,
                    product.id,
                    true
                  ),
                })}
                className='text-danger-500 font-medium'
              >
                Tanya Berat
              </a>
            )}
          </SpecificationContent>
        </TabContent>

        <TabContent
          active={informationTab == 'description'}
          className='leading-6 text-gray_r-11'
          dangerouslySetInnerHTML={{
            __html:
              product.description != ''
                ? product.description
                : 'Belum ada deskripsi produk.',
          }}
        />
      </div>

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
        <LazyLoad>
          <ProductSimilar query={productSimilarQuery} />
        </LazyLoad>
      </div>

      <BottomPopup
        title='Berhasil Ditambahkan'
        active={addCartAlert}
        close={() => setAddCartAlert(false)}
      >
        <div className='flex mt-4'>
          <div className='w-[15%]'>
            <Image
              src={product.image}
              alt={product.name}
              className='h-20 object-contain object-center w-full border border-gray_r-4'
            />
          </div>
          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
            {product.name}
          </div>
          <div className='ml-3 flex items-center text-sm font-normal'>
            <Link
              href='/shop/cart'
              className='flex-1 py-2 text-gray_r-12 btn-yellow'
            >
              Lihat Keranjang
            </Link>
          </div>
        </div>
        <div className='mt-8 mb-4'>
          <div className='text-h-sm font-semibold mb-6'>
            Kamu Mungkin Juga Suka
          </div>
          <LazyLoad>
            <ProductSimilar query={productSimilarQuery} />
          </LazyLoad>
        </div>
      </BottomPopup>
    </MobileView>
  );
};

const informationTabOptions = [
  { value: 'specification', label: 'Spesifikasi' },
  { value: 'description', label: 'Deskripsi' },
  { value: 'information', label: 'Info Penting' },
];

const TabButton = ({ children, active, ...props }) => {
  const activeClassName = active
    ? 'text-danger-500 underline underline-offset-4'
    : 'text-gray_r-11';
  return (
    <button
      {...props}
      type='button'
      className={`font-medium pb-1 ${activeClassName}`}
    >
      {children}
    </button>
  );
};

const TabContent = ({ children, active, className, ...props }) => (
  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
    {children}
  </div>
);

const SpecificationContent = ({ children, label }) => (
  <div className='flex justify-between p-3 items-center'>
    <span className='text-gray_r-11'>{label}</span>
    {children}
  </div>
);

export default ProductMobile;