Tryag File Manager

/var/www/html/tpid-konsulin/konsulin-cust-react/src/views/Cart.tsx

import { Capacitor } from '@capacitor/core'
import images from 'assets/images'
import { Button, CartItem, Checkbox, Header } from 'components'
import { API } from 'config/api'
import { StorageKey } from 'config/storage'
import { useGlobalContext } from 'hooks/context'
import { usePost } from 'hooks/useRequest'
import React, { useEffect, useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'
import { LocalStorage, numberSeparator } from 'utils'

export const Cart: React.FC = () => {
  const navigate = useNavigate()
  const storage = new LocalStorage()
  const { openAlert } = useGlobalContext()
  const [currentCartItems, setCurrentCartItems] = useState<any>()
  const [checkFirstLoad, postCheckFirstLoad] = usePost({ isLoading: false })
  const [checkClosed, postCheckClosed] = usePost({ isLoading: false })
  const [checkCheckOut, postCheckCheckOut] = usePost({ isLoading: false })
  const [buttonIsDisable, setButtonIsDisable] = useState<boolean>(false)
  const [checkAll, setCheckAll] = useState<boolean>(false)
  const [currentCartPrice, setCurrentCartPrice] = useState<any>()

useEffect(() => {
    const { data } = checkFirstLoad
    if (data?.status === 'success') {
      setCurrentCartPrice(data?.result?.subtotal)
      setButtonIsDisable(false)
    } else if (data?.status === 'fail') {
      setCurrentCartPrice(null)
      setButtonIsDisable(true)
    }
  }, [checkFirstLoad])

useEffect(() => {
    const { data } = checkCheckOut
    if (data?.status === 'success') {
      navigate('/checkout/summary', { state: data?.result })
    } else if (data?.status === 'fail') {
      if (data?.messages[0] === 'Item can not be empty') {
        openAlert({
          messages: 'Pilih produk yang akan dibeli',
          isConfirm: true,
          btnConfirmText: 'Ok',
          showBtnClose: false,
        })
      } else {
        openAlert({
          messages: data?.messages,
          isConfirm: true,
          btnConfirmText: 'Ok',
          showBtnClose: false,
        })
      }
    }
  }, [checkCheckOut])

useEffect(() => {
    let cart: any = storage.getItem(StorageKey.CART)
    postCheckClosed.getRequest(API.TRANSACTION_CART, cart)
  }, [])

useEffect(() => {
    const { data } = checkClosed
    if (data?.status === 'success') {
      let individualTmp: any

data?.result?.items?.forEach((item: any) =>
        item.is_selected ? item.is_selected : (item.is_selected = false)
      )

data?.result?.items?.forEach((item: any) =>
        item.items.forEach((itm: any) =>
          itm.is_selected ? itm.is_selected : (itm.is_selected = false)
        )
      )

if (data?.result?.items?.every((itm: any) => itm.is_selected === true)) {
        data?.result?.items?.forEach((item: any) => {
          item.is_selected = true
          item.items.forEach((itm: any) => {
            if (itm.is_selected) {
              itm.is_selected = true
            } else {
              itm.is_selected = true
            }
          })
        })
      }

data?.result?.items?.map(
        (item: any) =>
          (individualTmp =
            item.items.filter((itm: any) => itm.is_selected).length ===
            item.items.length)
      )

if (
        data?.result?.items?.filter((item: any) => item.is_selected).length ===
          data?.result?.items?.length &&
        individualTmp
      ) {
        setCheckAll(false)
      } else if (
        data?.result?.items?.filter((item: any) => item.is_selected).length !==
          data?.result?.items?.length ||
        !individualTmp
      ) {
        setCheckAll(false)
      }

setCurrentCartItems(data?.result?.items)
      storage.setItem(StorageKey.CART, data?.result?.items)
    } else if (data?.status === 'fail') {
      console.log('fail')
    }
  }, [checkClosed])

useEffect(() => {
    let individualTmp: any

currentCartItems?.map((item: any) => {
      individualTmp =
        item.items.filter((itm: any) => itm.is_selected).length ===
        item.items.length
    })

if (
      currentCartItems?.filter((item: any) => item.is_selected).length ===
        currentCartItems?.length &&
      individualTmp
    ) {
      setCheckAll(true)
    } else if (
      currentCartItems?.filter((item: any) => item.is_selected).length !==
        currentCartItems?.length ||
      !individualTmp
    ) {
      setCheckAll(false)
    }

let tempItem: any = []
    let tmp: any = []
    tempItem = currentCartItems?.map((item: any) =>
      item.items.map((itm: any) => {
        if (itm.is_selected === true) {
          tmp.push({ items: [itm], id_outlet: item.id_outlet })
        }
      })
    )

postCheckFirstLoad.getRequest(API.TRANSACTION_CHECK, {
      items: tmp,
    })

storage.setItem(StorageKey.CART, currentCartItems)
  }, [currentCartItems])

const handleDeleteStart = (e: any, id_outlet: number) => {
    openAlert({
      messages: 'Yakin ingin menghapus produk?',
      isConfirm: true,
      callback: (event: any) => {
        if (event.isConfirm) {
          handleDeleteCart(e, id_outlet)
        }
      },
    })
  }

const handleDeleteCart = (e: any, id_outlet: number) => {
    let currentCart = currentCartItems
    let itemOutlet: any = currentCart.find(
      (item: any) => item.id_outlet === id_outlet
    )
    let newItems: any = itemOutlet?.items.filter((itemsProduct: any) => {
      return itemsProduct.id_custom !== e
    })
    itemOutlet = [{ ...itemOutlet, items: newItems }]
    let newArr = currentCart.map((itemsCart: any) => {
      return (
        itemOutlet.find((itm: any) => itm.id_outlet === itemsCart.id_outlet) ||
        itemsCart
      )
    })
    currentCart.forEach((items: any) => {
      if (items.items.length > 1) {
        currentCart = [...newArr]
      } else if (items.items.length === 1 && items.id_outlet === id_outlet) {
        currentCart = currentCart.filter(
          (itemsFilter: any) => itemsFilter.id_outlet !== id_outlet
        )
      }
    })
    let tmp: any = []
    currentCart.forEach((itm: any) => {
      if (itm.items?.length !== 0) {
        tmp.push(itm)
      }
    })

setCurrentCartItems(tmp)
    storage.setItem(StorageKey.CART, tmp)
  }

const handleUpdateQty = (e: any, id: number, id_outlet: number) => {
    currentCartItems?.forEach((item: any) => {
      if (item.id_outlet === id_outlet) {
        item?.items?.forEach((itms: any) => {
          if (itms.id_custom === id) {
            itms.qty = e
          }
        })
      }
    })

setCurrentCartItems([...currentCartItems])
    storage.setItem(StorageKey.CART, currentCartItems)
  }

const handleAddNote = (id_outlet: number, id: any, notes: string) => {
    let currentCart = currentCartItems
    let currentItems: any = []
    if (id) {
      let itemOutlet: any = currentCart.find(
        (item: any) => item.id_outlet === id_outlet
      )

let newItems: any = itemOutlet?.items.filter((itemsProduct: any) => {
        return itemsProduct.id_custom === id
      })
      newItems.map((item: any) => (item.note = notes))

currentCart.map((item: any) =>
        item.items.map((itm: any) => {
          currentItems = [
            ...currentItems,
            { id_outlet: item.id_outlet, items: [itm] },
          ]
        })
      )

setCurrentCartItems(currentCart)
      storage.setItem(StorageKey.CART, currentCart)
    }
  }

const handleSelectAll = () => {
    currentCartItems.forEach((item: any) => {
      item.is_selected = true
      item.items.forEach((itm: any) => {
        itm.is_selected = true
      })
    })

setCurrentCartItems([...currentCartItems])
  }

const handleChangeItems = (e: any, id_outlet: any) => {
    currentCartItems.forEach((item: any) => {
      if (item.id_outlet === id_outlet) {
        item.is_selected = false
        item.items.forEach((itm: any) => {
          if (itm.id_custom === parseInt(e.id)) {
            itm.is_selected = !itm.is_selected
          }
        })
        if (item.items.every((itm: any) => itm.is_selected === true)) {
          item.is_selected = true
        }
      }
    })
    setCurrentCartItems([...currentCartItems])
  }

const handleChangeOutletItems = (e: any, id_outlet: any) => {
    currentCartItems.forEach((item: any) => {
      if (item.id_outlet === id_outlet) {
        if (
          item?.items?.filter((itm: any) => itm.current_stock === 0).length > 0
        ) {
          openAlert({
            messages: 'Beberapa produk tidak dapat dibeli',
            isConfirm: true,
            btnConfirmText: 'Ok',
            showBtnClose: false,
          })
        }

item.is_selected = !item.is_selected
        if (item.is_selected) {
          item.items.forEach((itm: any) => {
            if (itm.current_stock !== 0) {
              itm.is_selected = true
            } else {
              itm.is_selected = false
            }
          })
        } else {
          item.items.forEach((itm: any) => {
            if (!itm.is_selected) {
              if (itm.current_stock !== 0) {
                itm.is_selected = true
              } else {
                itm.is_selected = false
              }
            } else if (itm.is_selected) {
              itm.is_selected = false
            }
          })
        }
        // }
      }
    })

setCurrentCartItems([...currentCartItems])
  }

const handleCheckAll = () => {
    setCheckAll(!checkAll)

if (
      currentCartItems?.filter((e: any) => e.outlet_holiday_status === 1)
        .length > 0 ||
      currentCartItems
        ?.map(
          (e: any) =>
            e?.items?.filter((itm: any) => itm.current_stock === 0).length > 0
        )
        .find((itm: any) => itm)
    ) {
      if (
        currentCartItems
          ?.filter((e: any) => e.outlet_holiday_status === 0)
          .every((itm: any) => itm.is_selected === false)
      ) {
        openAlert({
          messages: 'Beberapa produk tidak dapat dibeli',
          isConfirm: true,
          btnConfirmText: 'Ok',
          showBtnClose: false,
        })
      }
    }

if (currentCartItems.every((itm: any) => itm.is_selected === true)) {
      currentCartItems.forEach((item: any) => {
        item.is_selected = false
        item.items.forEach((itm: any) => {
          if (itm.is_selected) {
            itm.is_selected = false
          } else {
            itm.is_selected = false
          }
        })
      })
    } else {
      currentCartItems.forEach((item: any) => {
        if (item.is_selected) {
          item.is_selected = false
          item.items.forEach((itm: any) => {
            if (itm.is_selected) {
              itm.is_selected = false
            } else {
              itm.is_selected = false
            }
          })
        } else if (!item.is_selected) {
          item.is_selected = item.outlet_holiday_status === 1 ? false : true
          item.items.forEach((itm: any) => {
            if (itm.current_stock !== 0) {
              itm.is_selected = item.outlet_holiday_status === 1 ? false : true
            }
          })
        }
      })
    }

setCurrentCartItems([...currentCartItems])
  }

const onCheckout = () => {
    let tempItemID: any = []
    let tempItem: any = []
    let tmp: any = []
    tempItem = currentCartItems?.map((item: any) =>
      item.items.map((itm: any) => {
        if (itm.is_selected === true) {
          tmp.push({ items: [itm], id_outlet: item.id_outlet })
          tempItemID.push({ id_custom: itm.id_custom })
        }
      })
    )

postCheckCheckOut.getRequest(API.TRANSACTION_CHECK, {
      items: tmp,
    })
  }

return (
    <>
      <Header label='Keranjang' onBackClick={() => navigate(-1)} />
      {checkClosed.isLoading ? (
        <div className='-mt-4'>
          <div className='bg-white mb-2 -mx-4 py-3 p-4 px-8'>
            <Skeleton height={25} width={120} />
          </div>
          {Array.from({ length: 3 }, (index: number) => (
            <div key={index} className='bg-white -mx-4 py-3 p-4 px-8'>
              <Skeleton height={20} width={70} />
              <div
                className='flex flex-col bg-white border-t border-t-neutral-10 mt-2 pt-2'
                key={index}
              >
                <div className='flex  justify-between items-center'>
                  <div className='flex items-center gap-2'>
                    <Skeleton height={24} width={24} circle />
                    <Skeleton height={15} width={120} />
                  </div>
                  <Skeleton height={15} width={20} />
                </div>
                <div className='flex'>
                  <Skeleton height={98} width={98} />
                  <div className='flex flex-1 flex-col px-3'>
                    <Skeleton height={20} />
                    <Skeleton height={15} width={100} />
                    <Skeleton height={15} width={70} />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : currentCartItems && currentCartItems?.length !== 0 ? (
        <div className='-mx-4 mb-16'>
          <div className='flex items-center px-4 py-3 bg-white mb-3 -mt-4'>
            <Checkbox checked={checkAll} onChange={handleCheckAll} />
            <div className='font-medium text-sm px-2'>{'Pilih Semua'}</div>
            <div className='font-semi-bold text-neutral-20 text-xs'>{`(${currentCartItems?.length})`}</div>
          </div>

<div className='space-y-3 pb-8'>
            {currentCartItems?.map((item: any, index: number) => (
              <CartItem
                key={index}
                onClickDiv={(id) => navigate(`/store/product-detail/${id}`)}
                isSelectAll={item?.is_selected}
                outlet_name={item?.outlet_name}
                status={item?.outlet_holiday_status}
                id_outlet={item?.id_outlet}
                item={item.items}
                onClickNote={(id, notes) =>
                  handleAddNote(item?.id_outlet, id, notes)
                }
                onParentClick={handleSelectAll}
                onCheckAllItem={(e, id_outlet) =>
                  handleChangeOutletItems(e, id_outlet)
                }
                onCheckItem={(e, id_outlet) => handleChangeItems(e, id_outlet)}
                onDeleteClick={(e, id_outlet) =>
                  handleDeleteStart(e, id_outlet)
                }
                onUpdateStock={(e, id, id_outlet) =>
                  handleUpdateQty(e, id, id_outlet)
                }
              />
            ))}
          </div>

<div
            className={`fixed bottom-0 w-full flex items-center justify-between bg-white p-4 top-shadow ${
              Capacitor.isNativePlatform()
                ? 'max-w-content-full'
                : 'max-w-content'
            }`}
          >
            <div className='pr-3'>
              <div className='text-sm mb-1'>{'Subtotal'}</div>
              <div className='font-semi-bold'>
                {checkFirstLoad.isLoading ? (
                  <Skeleton width={150} height={20} />
                ) : currentCartPrice === 'Rp. 0' ? (
                  ''
                ) : (
                  numberSeparator(currentCartPrice, 'Rp.')
                )}
              </div>
            </div>
            <Button
              className='btn-primary px-8'
              label='Checkout'
              disabled={buttonIsDisable || currentCartPrice === 'Rp. 0'}
              isLoading={checkCheckOut.isLoading}
              onClick={onCheckout}
            />
          </div>
        </div>
      ) : (
        <div className='my-auto mx-8 mt-8'>
          <img
            src={images.ic_empty_cart}
            alt=''
            className='mx-auto w-60 h-60'
          />
          <p className='text-sm font-semi-bold text-center mt-4'>
            Keranjang Kamu Kosong
          </p>
          <p className='text-center text-sm mt-4'>
            Kamu Belum memasukkan barang ke keranjang, belanja Sekarang{' '}
          </p>
          <Button
            onClick={() => navigate('/store')}
            className='btn-primary mx-auto mt-8 !w-full'
            label='Belanja Sekarang'
          />
        </div>
      )}
    </>
  )
}