Tryag File Manager

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

import images from 'assets/images'
import {
  DealsItem,
  DoctorItem,
  ELearningItem,
  MembershipCard,
  MenuItem,
  ProductItem,
  RefreshContent,
} from 'components'
import { API } from 'config/api'
import { MENU_HOME } from 'config/menu'
import { useGlobalContext } from 'hooks/context'
import { useGet, usePost } from 'hooks/useRequest'
import React, { useEffect, useRef, useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'
import { Swiper, SwiperSlide } from 'swiper/react'
import { A11y, Autoplay, Pagination } from 'swiper'
import { Capacitor } from '@capacitor/core'
import { Device } from '@capacitor/device'
import PullToRefresh from 'react-simple-pull-to-refresh'
import { Browser } from '@capacitor/browser'

const ELEARNING_MENU = [
  {
    label: 'Semua',
    key: 'all',
  },
  {
    label: 'Video',
    key: 'video',
  },
  {
    label: 'Artikel',
    key: 'article',
  },
  {
    label: 'Kelas Online',
    key: 'online_class',
  },
]

export const Home: React.FC = () => {
  const navigate = useNavigate()
  const { openAlert, fcmToken, setSavedPoints } = useGlobalContext()
  const [infoMember, getInfoMember] = usePost({ isLoading: false })
  const [search, setSearch] = useState<any>()
  const [dataBanner, getBannerList] = useGet({ isLoadig: false })
  const [defaultElearningMenu, setDefaultElearningMenu] = useState<any>([])
  const [dataRecommendationProduct, getRecommendationProduct] = useGet({
    isLoading: false,
  })
  const [dataRecommendationDoctor, getRecommendationDoctor] = useGet({
    isLoading: false,
  })
  const [dataDealsList, getDealsList] = useGet({
    isLoading: false,
  })
  const [dataMenuName, getMenuName] = useGet({
    isLoading: false,
  })
  const [dataElearning, getElearning] = useGet({
    isLoading: false,
  })
  const [menuName, setMenuName] = useState<any>()
  const [menuLength, setMenuLength] = useState<any>([])
  const [listBanner, setListBanner] = useState<any>()
  const [listDeals, setListDeals] = useState<any>()
  const [listElearning, setListElearning] = useState<any>()
  const [elearningDefault, setElearningDefault] = useState<any>()
  const [listProductRecommendation, setListProductRecommendation] =
    useState<any>()
  const [listDoctorRecommendation, setListDoctorRecommendation] =
    useState<any>()
  const user = infoMember?.data?.result
  setSavedPoints(infoMember?.data?.result.total_point)

useEffect(() => {
    const { data } = dataBanner
    if (data?.status === 'success') {
      let tmp: any = []
      data?.result?.forEach((item: any) =>
        tmp.push({
          ...item,
          original: item?.image_url,
          originalClass: '!w-[360px] mx-4 !rounded-md',
        })
      )

tmp && setListBanner(tmp)
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataBanner])

useEffect(() => {
    const { data } = dataRecommendationProduct
    if (data?.status === 'success') {
      setListProductRecommendation(data?.result)
    } else if (data?.status === 'fail') {
      setListProductRecommendation([])
    }
  }, [dataRecommendationProduct])

useEffect(() => {
    const { data } = dataRecommendationDoctor
    if (data?.status === 'success') {
      setListDoctorRecommendation(data?.result)
    } else if (data?.status === 'fail') {
      setListDoctorRecommendation([])
    }
  }, [dataRecommendationDoctor])

useEffect(() => {
    const { data } = dataMenuName
    let tmp: any = []
    if (data?.status === 'success') {
      data?.result?.home_menu?.map((item: any) => {
        tmp.push({
          label: item.text_menu,
          icon: item.icon,
        })
      })
      setMenuName(
        tmp?.map((item: any, i: number) =>
          Object.assign({}, item, MENU_HOME[i])
        )
      )
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataMenuName])

useEffect(() => {
    const { data } = dataDealsList
    if (data?.status === 'success') {
      setListDeals(data?.result)
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataDealsList])

useEffect(() => {
    const { data } = dataElearning
    let tmp: any = []
    let tmpVid: any = []
    let tmpArticle: any = []
    let tmpClass: any = []
    let tmpMenu: any = []
    if (data?.status === 'success') {
      data?.result?.banner?.map((item: any) => {
        tmp.push({
          type: item.type,
          image: item.image,
          title: item.title,
          date: item.post_date,
          slug: item.slug,
        })
      })

data?.result?.top_video?.map((item: any) => {
        if (tmpVid?.length < 5) {
          tmpVid.push({
            type: 'video',
            image: item.image,
            title: item.title,
            date: item.post_date,
            slug: item.slug,
          })
        }
      })

data?.result?.top_article?.map((item: any) => {
        if (tmpArticle?.length < 5) {
          tmpArticle.push({
            type: 'article',
            image: item.image,
            title: item.title,
            date: item.post_date,
            slug: item.slug,
          })
        }
      })

data?.result?.top_online_class?.map((item: any) => {
        if (tmpClass?.length < 5) {
          tmpClass.push({
            type: 'online_class',
            image: item.image,
            title: item.title,
            date: item.post_date,
            slug: item.slug,
          })
        }
      })

tmpMenu = [
        { label: 'all', length: tmp?.length },
        { label: 'article', length: tmpArticle?.length },
        { label: 'online_class', length: tmpClass?.length },
        { label: 'video', length: tmpVid?.length },
      ]
      setMenuLength(tmpMenu)
      setListElearning([...tmpVid, ...tmpArticle, ...tmpClass])
      setElearningDefault([...tmpVid, ...tmpArticle, ...tmpClass])
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataElearning])

useEffect(() => {
    let deviceID: any
    const getDeviceId = async () => {
      deviceID = await Device.getId()

getInfoMember.getRequest(API.INFO_MEMBER, {
        device_id: deviceID.uuid,
        device_type: Capacitor.getPlatform(),
        device_token: fcmToken,
      })
    }
    getDeviceId()
  }, [])

useEffect(() => {
    getBannerList.getRequest(API.HOME_BANNER)
    getDealsList.getRequest(API.HOME_DEALS)
    getRecommendationProduct.getRequest(API.HOME_PRODUCT_RECOMMENDATION)
    getRecommendationDoctor.getRequest(API.HOME_DOCTOR_RECOMMENDATION)
    getMenuName.getRequest(API.HOME_TEXT_LIST)
    getElearning.getRequest(API.HOME_ELEARNINNG)
  }, [])

useEffect(() => {
    let tmpMenu: any = []
    let tmp: any = []
    ELEARNING_MENU?.forEach((item: any) => {
      if (item.key === 'all') {
        tmp.push({ ...item, active: true, isUnClickable: false })
      } else {
        tmp.push({ ...item, active: false, isUnClickable: false })
      }
    })

tmp?.forEach((item: any) =>
      menuLength?.forEach((itm: any) => {
        if (itm.label === item.key && itm.length !== 0) {
          tmpMenu.push({ ...item, isUnClickable: false })
        } else if (itm.label === item.key && itm.length === 0) {
          tmpMenu.push({ ...item, isUnClickable: true })
        }
      })
    )

setDefaultElearningMenu(tmpMenu)
  }, [menuLength])

const onSesionMenuClick = (to: string) => {
    if (to === 'all') {
      setListElearning(elearningDefault)
    } else {
      let find = elearningDefault.filter((item: any) => item?.type === to)
      setListElearning(find)
    }
    defaultElearningMenu?.map((item: any) => {
      if (item.key === to) {
        item.active = true
      } else {
        item.active = false
      }
    })
  }

const onRefreshPage = async () => {
    getBannerList.getRequest(API.HOME_BANNER)
    getRecommendationProduct.getRequest(API.HOME_PRODUCT_RECOMMENDATION)
    getRecommendationDoctor.getRequest(API.HOME_DOCTOR_RECOMMENDATION)
    getDealsList.getRequest(API.HOME_DEALS)
    getMenuName.getRequest(API.HOME_TEXT_LIST)
    getElearning.getRequest(API.HOME_ELEARNINNG)
  }

const handleClickBanner = (id: number) => {
    listBanner?.map((item: any, index: number) => {
      if (index === id) {
        switch (item.type) {
          case 'membership':
            return navigate('/membership')
          case 'point_history':
            return navigate('/points')
          case 'store':
            return navigate('/store')
          case 'consultation':
            return navigate('/page/consultation')
          case 'elearning':
            return navigate('/page/e-learning')
          case 'product_recommendation_list':
            return navigate('/store/product-list/recommendation')
          case 'doctor_recommendation_list':
            return navigate('/page/consultation')
          case 'inbox':
            return navigate('/notification-center/notification')
          case 'merchant_detail':
            return navigate(`/store/merchant/${item.id_reference}/home`)
          case 'product_detail':
            return navigate(`/store/product-detail/${item.id_reference}`)
          case 'notification_notification':
            return navigate('/notification-center/notification')
          case 'notification_promo':
            return navigate('/notification-center/promo')
          case 'history_order':
            return navigate('/history/order')
          case 'history_consultation':
            return navigate('/history/consultation')
          case 'consultation_detail':
            return navigate(`/history/consultation/detail/${item.id_reference}`)
          case 'doctor_detail':
            return navigate(
              `/consultation-start/${item.id_reference}/consulting/service`
            )
          case 'wishlist':
            return navigate('/wishlist')
          case 'privacy_policy':
            return navigate('/privacy-policy')
          case 'faq':
            return navigate('/faq')
          case 'my_store':
            return navigate('/my-store')
          case 'enquiries':
            return navigate('/help')
          case 'store_income':
            return navigate('/my-store/sales-balance')
          case 'store_enquiries':
            return navigate('/my-store/help')
          case 'store_products':
            return navigate('/my-store/product')
          case 'store_notification':
            return navigate('/my-store/notification')
          case 'store_address':
            return navigate('/my-store/address')
          case 'store_bank':
            return navigate('/my-store/account')
          case 'store_courier':
            return navigate('/my-store/delivery-courier')
          case 'store_transaction_new':
            return navigate('/my-store/sales/new')
          case 'store_transaction_processed':
            return navigate('/my-store/sales/process')
          case 'store_transaction_sent':
            return navigate('/my-store/sales/sent')
          case 'store_transaction_completed':
            return navigate('/my-store/sales/complete')
          case 'edit_profile':
            return navigate('/profile/contact-info')
          case 'product_recomendation_list':
            return navigate('/store/product-list/recommendation')
          case 'featured_promo_merchant':
            return navigate('/promo-list')
          case 'enquires':
            return navigate('/help')
          case 'promo_detail':
            return navigate(`/promo-list/detail/${item.id_reference}`)
          case 'url':
            return openCapacitorSite(item.link, 'Konsulin')
          //console.log(item, 'Konsulin')

default:
            return console.log(item.type)
        }
      }
    })
  }

const openCapacitorSite = async (redirect_url: string, title: string) => {
    if (redirect_url?.indexOf('https://') === 0) {
      await Browser.open({
        url: redirect_url,
        presentationStyle: 'popover',
        windowName: title,
      })
    } else {
      await Browser.open({
        url: `https://${redirect_url}`,
        presentationStyle: 'popover',
        windowName: title,
      })
    }
  }

return (
    <div className='-mt-[4rem]'>
      <div className='relative -mx-4'>
        <img className='absolute -mt-4 w-full' src={images.bg_home} alt='' />
      </div>

<div className='-mx-4'>
        <PullToRefresh
          onRefresh={onRefreshPage}
          isPullable
          className='-mt-4'
          pullDownThreshold={100}
          maxPullDownDistance={150}
          refreshingContent={<RefreshContent type='release' />}
          pullingContent={<RefreshContent type='pull' />}
        >
          <div className='entrance-page mx-4'>
            <div className='relative flex justify-center pt-4 pb-3'>
              <img
                src={images.ic_konsulin_white}
                alt=''
                className='w-1/3 max-h-10 aspect-video'
              />
            </div>
            <div className='relative flex items-center rounded bg-white text-neutral-20 text-sm px-4 py-3 my-5 gap-3'>
              <img
                src={images.ic_search_gray}
                alt=''
                className='w-5 h-5 mr-3'
              />
              <input
                name='search'
                onClick={() => navigate('/search-page')}
                onChange={(e) => setSearch(e.target.value)}
                value={search}
                className='border-none bg-transparent -ml-4 focus:outline-none'
                placeholder='Cari Produk'
              />
            </div>
            <div>
              <div className='relative overflow-scroll -mx-4 no-scrollbar max-w-[100vw]'>
                {dataBanner.isLoading ? (
                  <div className='relative scroll-x !space-x-4 !bg-transparent snap-x snap-mandatory'>
                    <Skeleton height={150} width={360} />
                    <Skeleton height={150} width={360} />
                  </div>
                ) : (
                  <Swiper
                    modules={[Pagination, A11y, Autoplay]}
                    spaceBetween={5}
                    slidesPerView={1.3}
                    centeredSlides
                    pagination={{
                      clickable: true,
                      el: '.swiper-pagination',
                    }}
                    scrollbar={{ draggable: true }}
                    autoplay={{ delay: 2000, disableOnInteraction: false }}
                    loop
                    className=''
                  >
                    {listBanner?.map((item: any, index: number) => (
                      <SwiperSlide>
                        <img
                          src={item.original}
                          alt=''
                          className='h-auto rounded-md w-full'
                          onClick={() => handleClickBanner(index)}
                        />
                      </SwiperSlide>
                    ))}
                  </Swiper>
                )}
                <div className='swiper-pagination'></div>
              </div>
            </div>
            <MembershipCard
              className='mb-8 mt-4'
              item={{
                level: user?.user_info?.membership?.membership_name,
                icon: user?.user_info?.membership?.membership_image,
                point: user?.total_point,
                isLoading: infoMember.isLoading,
              }}
              onMembership={() => navigate('/membership')}
              onPoints={() => navigate('/points')}
            />
            {dataMenuName.isLoading ? (
              <div className='grid grid-cols-4 gap-2 mb-4 mx-4'>
                {Array.from({ length: 4 }, (index: number) => (
                  <div
                    className='flex flex-col items-center justify-center bg-white p-1 rounded-xl h-auto aspect-square'
                    style={{ width: 70 }}
                  >
                    <Skeleton className='mb-1' width={50} height={40} />
                    <Skeleton width={50} />
                  </div>
                ))}
              </div>
            ) : (
              <div className='grid grid-cols-4 gap-3 mb-4'>
                {menuName?.map((item: any) => (
                  <MenuItem key={item.label} item={item} />
                ))}
              </div>
            )}
            <div className='bg-white py-4 -mx-4 mb-3'>
              <div className='flex items-center justify-between px-4'>
                <div className='font-semi-bold text-neutral-30 text-sm tracking-wider'>
                  {'REKOMENDASI PRODUK'}
                </div>
                {listProductRecommendation && (
                  <span
                    className='font-bold text-primary-base text-xs'
                    onClick={() =>
                      navigate(`/store/product-list/recommendation`)
                    }
                  >
                    {'Lihat Semua'}
                  </span>
                )}
              </div>

{dataRecommendationProduct?.isLoading ? (
                <div
                  className='bg-white rounded-xl drop-shadow w-2/5 px-1'
                  style={{ height: '305px' }}
                >
                  <Skeleton className='h-48 w-40' />
                  <Skeleton height={15} />
                  <Skeleton height={15} />
                  <Skeleton height={15} width={100} />
                  <Skeleton height={15} width={70} />
                </div>
              ) : (
                <div className='scroll-x !space-x-4 pb-8 pt-3'>
                  {listProductRecommendation?.map(
                    (item: any, index: number) => (
                      <ProductItem
                        key={index}
                        classNameStock='!w-full'
                        className={`flex-none !w-2/5 ${
                          item.outlet_is_closed === 1
                            ? 'bg-gray opacity-50'
                            : ''
                        }`}
                        item={item}
                        parentCategory={item?.product_category_name}
                        onClick={() =>
                          navigate(`/store/product-detail/${item.id_product}`)
                        }
                        onDeleteWishlist={() => void 0}
                      />
                    )
                  )}
                </div>
              )}
            </div>
            <div className='bg-white p-4 -mx-4 mb-3'>
              <div className='flex items-center justify-between'>
                <div className='font-semi-bold text-neutral-30 text-sm tracking-wider'>
                  {'REKOMENDASI DOKTER'}
                </div>
                {listProductRecommendation && (
                  <span
                    className='font-bold text-primary-base text-xs'
                    onClick={() => navigate('/page/consultation')}
                  >
                    {'Lihat Semua'}
                  </span>
                )}
              </div>

{dataRecommendationDoctor.isLoading ? (
                <div className='bg-white rounded-xl drop-shadow px-1 py-1 flex w-full'>
                  <Skeleton height={129} width={129} className='mb-1 mr-1' />
                  <div className='flex flex-col justify-between'>
                    <div>
                      <Skeleton height={15} width={60} />
                      <Skeleton height={15} width={100} />
                    </div>
                    <Skeleton height={15} width={100} />
                  </div>
                </div>
              ) : listDoctorRecommendation?.length !== 0 ? (
                <div className='space-y-4 pb-2 pt-3'>
                  {listDoctorRecommendation?.map((item: any, index: number) => (
                    <DoctorItem
                      key={index}
                      item={{
                        ...item,
                        clinic: item.outlet.outlet_name,
                        specialties: item.specialists[0].doctor_specialist_name,
                        doctor_photo: item.url_doctor_photo,
                      }}
                      onClick={() =>
                        navigate(
                          `/consultation-start/${item?.id_doctor}/consulting/service`
                        )
                      }
                    />
                  ))}
                </div>
              ) : (
                <div className='flex flex-col space-y-4 pb-2 pt-3 mb-4'>
                  <img
                    src={images.bg_no_product}
                    alt=''
                    className='mx-auto w-60 h-60'
                  />
                  <p className='text-sm font-semi-bold text-center text-primary-base mt-4'>
                    Belum Ada Rekomendasi Dokter
                  </p>
                </div>
              )}
            </div>

{listDeals?.featured_list?.length !== 0 && (
              <div className='bg-white py-4 mb-3 -mx-4'>
                <div className='flex items-center justify-between px-4'>
                  <div className='font-semi-bold text-neutral-30 text-sm tracking-wider'>
                    {listDeals?.text?.title}
                  </div>
                  {listProductRecommendation && (
                    <span
                      className='font-bold text-primary-base text-xs'
                      onClick={() => navigate('/page/deals-list')}
                    >
                      {'Lihat Semua'}
                    </span>
                  )}
                </div>
                <div className='scroll-x !space-x-4 pb-8 pt-3'>
                  {dataDealsList.isLoading ? (
                    <div>
                      <Skeleton height={157} width={157} />
                      <Skeleton height={15} width={110} />
                      <Skeleton height={15} width={90} />
                    </div>
                  ) : (
                    listDeals?.featured_list?.map(
                      (item: any, index: number) => (
                        <DealsItem
                          key={index}
                          className='w-1/3'
                          item={{
                            ...item,
                            date: item?.date_text,
                            isLoading: dataDealsList.isLoading,
                          }}
                          onClick={() =>
                            navigate(
                              `/promo-list/detail/${item.id_promo_campaign}`
                            )
                          }
                        />
                      )
                    )
                  )}
                </div>
              </div>
            )}
            <div className='bg-white py-4 -mx-4 mb-8'>
              <div className='flex items-center justify-between px-4'>
                <div className='font-semi-bold text-neutral-30 text-sm tracking-wider'>
                  {'E-LEARNING'}
                </div>
                {listProductRecommendation && (
                  <span
                    className='font-bold text-primary-base text-xs'
                    onClick={() => navigate('/page/e-learning')}
                  >
                    {'Lihat Semua'}
                  </span>
                )}
              </div>

<div className='flex gap-2 scroll-x mt-4'>
                {defaultElearningMenu?.map((item: any) => (
                  <div
                    key={item.key}
                    className={`text-sm px-4 py-2  items-center min-w-fit rounded-md 
              ${
                item.active ? 'bg-primary-base text-white' : 'border'
              }               ${
                      item.isUnClickable &&
                      'bg-neutral-20 text-white border min-w-fit'
                    }`}
                    onClick={
                      item.isUnClickable
                        ? void 0
                        : () => onSesionMenuClick(item.key)
                    }
                  >
                    <p className='text-sm'>{item.label}</p>
                  </div>
                ))}
              </div>

<div className='scroll-x pb-8 pt-3'>
                {dataElearning.isLoading ? (
                  <div className='drop-shadow shadow-xl p-2'>
                    <Skeleton height={167} width={278} />
                    <Skeleton height={25} width={270} className='mt-4' />
                    <Skeleton height={25} width={270} />
                    <Skeleton height={15} width={90} className='mb-8' />
                  </div>
                ) : (
                  listElearning?.map((item: any, index: number) => (
                    <ELearningItem
                      key={index}
                      item={item}
                      className='shadow-xl'
                      onCLickItem={() =>
                        navigate(`/e-learning/detail/${item.slug}/${item.type}`)
                      }
                    />
                  ))
                )}
              </div>
            </div>
          </div>
        </PullToRefresh>
      </div>
    </div>
  )
}