esoftplay-event 0.0.0-a

package/event/ticket_list.tsx

@@ -0,0 +1,722 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentPending_trx } from 'esoftplay/cache/component/pending_trx/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibFocus } from 'esoftplay/cache/lib/focus/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import moment from 'esoftplay/moment';
+
+import { applyStyle } from 'esoftplay';
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import { BigbangLoading_pageProperty } from 'esoftplay/cache/bigbang/loading_page/import';
+import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
+import { LibEffect } from 'esoftplay/cache/lib/effect/import';
+import { LibFirebase_socket, LibFirebase_socketProperty } from 'esoftplay/cache/lib/firebase_socket/import';
+import { LibHtmltext } from 'esoftplay/cache/lib/htmltext/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { UseDeeplinkProperty } from 'esoftplay/cache/use/deeplink/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTicket_listArgs {
+
+}
+export interface EventTicket_listProps {
+
+}
+
+export type Result = {
+  "id": string,
+  "title": string,
+  "image": string,
+  "images": Array<{
+    "image": string,
+    "title": string,
+    "description": string,
+  }>,
+  "image_map": string,
+  "charge_payment": number,
+  "status": string,
+  "quota_checkout": string,
+  "show_price": string,
+  "config_queue": {
+    "limit": number,
+    "time": number,
+  },
+  "form_allotment": string,
+  "form_allotment_text": string,
+  "use_queue": string,
+  "is_pod_limit": string,
+  "event_tag": [],
+  "charge_payment_type": string,
+  "price_type": Array<{
+    "price_id": string,
+    "type": string,
+    "kind": string,
+    "currency": string,
+    "price_min": string,
+    "price_max": string,
+    "use_code": string,
+    "use_seat": string,
+    "use_quota": boolean,
+    "config": {
+      "seat_autopick": string,
+      "seat_autopick_start": string,
+    },
+    "price_date": string,
+    "info": string,
+    "qty_min": string,
+    "qty_max": string,
+    "tax": string,
+    "quota": string,
+    "quota_used": string,
+    "status": number,
+    "quota_checkout": string,
+    "date_start": string,
+    "date_end": string,
+    "paper_size": string,
+    "is_refundable": boolean,
+    "refund": string,
+    "is_printed": string,
+    "image_map": string,
+    "term": Array<string>,
+    "list": Array<{
+      "list_id": string,
+      "date_id": number,
+      "ondate": string,
+      "price_id": string,
+      "price": string,
+      "quota": string,
+      "quota_used": string,
+      "show_limit": number,
+      "status": number,
+      "show_price": number,
+      "currency": string,
+      "schedule": {
+        "info": string,
+        "artist": [],
+      },
+      "is_available"?: string,
+    }>,
+  }>,
+  "price_type_info": string,
+  "exhibitor": {
+    "list": Array<{
+      "id": string,
+      "title": string,
+      "image": string,
+    }>,
+    "more_url": string,
+  },
+  "url_share": string,
+}
+
+export default function m(props: EventTicket_listProps): any {
+  const checkCounter = useRef<number>(0)
+  let refTimeout = useRef<any>()
+  const [bboConfig] = BboConfigProperty.state().useState()
+  const { doneQueue, isInPricingQueueConfig, updateQueueExp } = LibFirebase_socket();
+
+  const [pendingData] = BigbangLoading_pageProperty.state().useState()
+
+  const { url, fee_platform, has_addition, subscribed }: any = useRef(LibNavigation.getArgsAll(props)).current
+
+  const [deeplinkParams] = UseDeeplinkProperty.params.useState()
+  const [timer] = EventCountdownProperty.countdownTime.useState()
+
+  const [unAvailableResult, setUnavailableResult] = useLazyState<any>()
+  const [availableResult, setAvailableResult, getAvailableResult] = useSafeState<Result>()
+  const [urlPayment, setUrlPayment] = useLazyState<any>()
+
+  const [qty, setQty, getQty] = useSafeState<number>(1)
+  const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
+
+  const [isPass, setIsPass] = useSafeState(true)
+  const [showAll, setShowAll] = useSafeState<any>({});
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_order_type')
+    const { event_id } = EventQueue_pricingProperty.state().get()
+    if (isInPricingQueueConfig(event_id))
+      EventCountdownProperty.countdownTime.set(moment().add(LibFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
+    // loadData()
+    getCheckCounter()
+    return () => {
+      clearTimeout(refTimeout.current)
+      EventCountdownProperty.releaseQueue.trigger()
+    }
+  }, [])
+
+  function onRefresh() {
+    loadData()
+  }
+
+  function getCheckCounter() {
+    clearTimeout(refTimeout.current)
+    const { pathQueue, event_id } = EventQueue_pricingProperty.state().get()
+    if (event_id && isInPricingQueueConfig(event_id)) {
+      updateQueueExp(pathQueue, event_id)
+      checkCounter.current++
+      refTimeout.current = setTimeout(() => {
+        getCheckCounter()
+      }, 6000);
+    }
+  }
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+
+      const availablePriceType = LibObject.update(res, (arr: any[]) => arr.filter((x) => x.status != 0))('price_type')
+      const unAvailablePriceType = LibObject.update(res, (arr: any[]) => arr.filter((x) => x.status == 0))('price_type')
+
+      setUnavailableResult(unAvailablePriceType)
+      setAvailableResult(availablePriceType)
+      setUrlPayment(res?.url_payment)
+
+      if (selectedTicket) {
+        res?.price_type?.map((item: any) => {
+          if (item.price_id == selectedTicket?.price_id && item.status != 1) {
+            setSelectedTicket(undefined)
+          }
+        })
+      }
+
+      if (res.form_allotment == 1) {
+        releaseQueue()
+        LibNavigation.push('event/queue_out', { event_id: res.id, notes: res.form_allotment_text })
+      }
+    }, (error) => {
+      LibDialog.warningConfirm(esp.lang("event/ticket_list", "warn"), error?.message, "Ok", () => {
+        LibNavigation.back()
+      }, "", () => { })
+    }, 1)
+  }
+
+  function add(quota?: any, quota_used?: any): void {
+    if (getQty() != parseInt(getSelectedTicket()?.qty_max)) {
+      if (getQty() != (parseInt(quota) - parseInt(quota_used))) {
+        setQty(getQty() + 1)
+      }
+    }
+  }
+
+  function min(): void {
+    if (getQty() <= getSelectedTicket()?.qty_min) {
+      setQty(Number(getSelectedTicket()?.qty_min))
+    } else {
+      setQty(getQty() == 1 ? 1 : getQty() - 1)
+    }
+  }
+
+  function setQtyGlobal(value: any) {
+    let qty = 1
+    if (getSelectedTicket()?.qty_min) {
+      qty = Number(getSelectedTicket()?.qty_min)
+    }
+    if (qty > getSelectedTicket()?.qty_max) {
+      qty = Number(getSelectedTicket().qty_max)
+    }
+    if (value.quota != 0 && qty > value.quota) {
+      qty = value.quota
+    }
+    setQty(qty)
+  }
+
+  function releaseQueue() {
+    const { pathQueue, event_id, key } = EventQueue_pricingProperty.state().get()
+    if (event_id && isInPricingQueueConfig(event_id)) {
+      doneQueue(pathQueue, event_id, key, () => { })
+      EventQueue_pricingProperty.state().reset()
+      setIsPass(false)
+      EventCountdownProperty.releaseQueue.trigger()
+    }
+  }
+
+  let dataPost: any = {
+    event_id: availableResult?.id,
+    event_title: availableResult?.title,
+    charge_payment: availableResult?.charge_payment,
+    charge_payment_type: availableResult?.charge_payment_type,
+    images: availableResult?.images,
+    selected_ticket: selectedTicket,
+    qty: getQty(),
+  }
+
+  function checkAddition(newDataPost: any) {
+    if ((has_addition == 1 || selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1)) {
+      LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: availableResult?.id, qty: getQty(), price_id: selectedTicket?.price_id }, 321).then((additions) => {
+        if (additions != "") {
+          newDataPost.addition = additions
+        }
+        LibNavigation.navigate('payment/ticket', {
+          order_type: bboConfig?.order_type?.ticket,
+          tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
+          fee_platform: fee_platform,
+          dataBookingEvent: { ...newDataPost, qty: getQty() },
+          subscribed: subscribed,
+          url_payment: urlPayment,
+        })
+      })
+    } else {
+      LibNavigation.navigate('payment/ticket', {
+        order_type: bboConfig?.order_type?.ticket,
+        tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
+        fee_platform: fee_platform,
+        dataBookingEvent: { ...newDataPost, qty: getQty() },
+        subscribed: subscribed,
+        url_payment: urlPayment,
+      })
+    }
+  }
+
+  function nextStep(onALine?: number) {
+    // releaseQueue()
+    if (selectedTicket?.config?.seat_autopick == 1 && getQty() > 1) {
+      dataPost.adjacent_seats = 1
+    }
+
+    if (selectedTicket?.use_code == 1 && selectedTicket?.use_seat == 1) {
+      // tak arahke halaman seng anyar
+      LibNavigation.navigate('payment/event_invitation', {
+        dataBookingEvent: dataPost,
+        subscribed: subscribed
+      })
+    } else if (selectedTicket?.use_seat == 1) {
+      if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {
+        checkAddition(dataPost)
+      } else {
+        LibNavigation.navigateForResult('event/seat_map', {
+          url: 'event_seat',
+          dataTicket: dataPost,
+        }).then((value) => {
+          dataPost.row_id = value.row_id
+          dataPost.column_id = value.column_id
+          dataPost.seat_name = value.seat_name
+
+          checkAddition(dataPost)
+        })
+      }
+    } else {
+      checkAddition(dataPost)
+    }
+  }
+
+  function checkInvBlock() {
+    LibProgress.show(esp.lang("event/ticket_list", "wait"))
+    new LibCurl('voucher_check_validate', null, (res, msg) => {
+      LibProgress.hide()
+      if (res?.status == 1) {
+        LibNavigation.navigate('event/block_invitation', {
+          dataCheck: res,
+        })
+      } else {
+        nextStep()
+      }
+    }, (err) => {
+      LibProgress.hide()
+    })
+  }
+
+  function renderItem(item: any, itemT: any, iT: number) {
+    let ticketWithDate = item.price_date == 1 && item.use_code == 0
+    let ticketInvitation = item.price_date == 0 && item.use_code == 1
+    let ticketSpecial = item.price_date == 0 && item.use_code == 0
+
+    let _selectedTicket = item.price_id == selectedTicket?.price_id && itemT.date_id == selectedTicket?.list?.date_id
+
+    let colorDefault = _selectedTicket ? "#FFE9AD" : '#fff'
+    let colorBackground = item.status != 1 ? LibStyle.colorLightGrey : itemT.status != 1 ? LibStyle.colorLightGrey : colorDefault
+    let textOpacity = /* item.status == 1 ? 1 :  */itemT?.status == 1 ? 1 : 0.3
+
+    return (
+      <TouchableOpacity key={iT} onPress={() => {
+        let itemTicket = {
+          ...item
+        }
+        let replaceList = LibObject.set(itemTicket, itemT)('list')
+        // kondisi untuk tipe tiket yang ada tanggalnya
+        let msg = itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")
+        if (ticketWithDate) {
+          if (item.status == 1 && itemT.status == 1) {
+            setSelectedTicket(replaceList)
+            setQtyGlobal(itemT)
+          } else if (item.status == 0) {
+            LibToastProperty.show(msg)
+          } else if (item.status == 2) {
+            LibToastProperty.show(msg)
+          }
+        } else {
+          // kondisi untuk tipe tiket yang tidak ada tanggalnya (undangan/khusus)
+          if (item.status == 1 && itemT.status == 1) {
+            setSelectedTicket(replaceList)
+            if (ticketInvitation) {
+              setQty(1)
+            } else {
+              setQtyGlobal(itemT)
+            }
+          } else if (item.status == 0) {
+            LibToastProperty.show(msg)
+          } else if (item.status == 2) {
+            LibToastProperty.show(msg)
+          }
+        }
+      }} testID="ticket_item" activeOpacity={itemT.status == 1 ? 0 : 1} style={{ backgroundColor: colorBackground, borderBottomWidth: item.list.length == 1 ? 0 : 5, borderBottomColor: "#fff" }}>
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
+          {
+            ticketWithDate ?
+              // view untuk yang ada tanggalnya
+              <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+                <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: colorBackground, borderStyle: "solid", borderWidth: textOpacity, borderColor: _selectedTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+                  <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('DD')}</Text>
+                </View>
+                <View style={applyStyle({ flexDirection: 'column', flex: 1 })}>
+                  {
+                    item?.status == 1 && itemT.status != 1 &&
+                    <View style={applyStyle({ flexDirection: 'row', marginBottom: 5 })}>
+                      <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemT.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: itemT.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                        <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* itemT.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
+                      </View>
+                    </View>
+                  }
+                  <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('dddd')}</Text>
+                  <View style={applyStyle({ flexDirection: 'row' })}>
+                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('MMMM')}</Text>
+                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('YYYY')}</Text>
+                  </View>
+                </View>
+              </View>
+              :
+              // view untuk yang undangan dan khusus
+              <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                <LibPicture source={esp.assets(ticketInvitation ? 'icons/invitation2.png' : 'icons/ic_special2.png')} style={{ height: 42, width: 42 }} />
+                <View style={{ marginLeft: 14, flex: 1 }} >
+                  {
+                    item?.status == 1 && itemT.status != 1 &&
+                    <View style={applyStyle({ flexDirection: 'row', marginBottom: 5 })}>
+                      <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemT.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderColor: itemT.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                        <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
+                      </View>
+                    </View>
+                  }
+                  {/* <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text> */}
+                  {
+                    item.info != "" &&
+                    <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }} >{item.info}</Text>
+                  }
+                </View>
+              </View>
+          }
+
+          <View style={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
+            {
+              (itemT.status == 1 || itemT.status == 0 || itemT.show_price == 1) &&
+              <Text allowFontScaling={false} style={applyStyle({ opacity: ticketWithDate ? textOpacity : 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: _selectedTicket ? "#3ea4dc" : (itemT.price == 0 ? LibStyle.colorGreen : '#999') })} >{itemT.price == 0 ? esp.lang("event/ticket_list", "free") : LibUtils.money(itemT.price, itemT.currency)}</Text>
+            }
+            {/* {
+              item.status == 1 && itemT.show_limit == 1 &&
+              <Text allowFontScaling={false} style={{ textAlign: "right", marginBottom: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1, color: LibStyle.colorRed }}> {quotaDifference <= 0 ? "Habis" : quotaDifference > 0 ? "Tersisa " + LibUtils.number(quotaDifference) : "Habis"}</Text>
+            } */}
+
+            {
+              (ticketWithDate || ticketSpecial) && item.price_id == selectedTicket?.price_id && itemT.date_id == selectedTicket?.list?.date_id &&
+              <View style={applyStyle({ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' })}>
+                <Pressable hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='minus_btn' onPress={() => { min() }}>
+                  <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                    <LibIcon name="minus" color="#e74c3c" />
+                  </View>
+                </Pressable>
+                <Text style={applyStyle({ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 })}>{qty}</Text>
+                {/* </TouchableOpacity> */}
+                <Pressable hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='plus_btn' onPress={() => {
+                  add(itemT.quota, itemT.quota_used)
+                }}>
+                  <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                    <LibIcon name="plus" color="#16a085" />
+                  </View>
+                </Pressable>
+              </View>
+            }
+          </View>
+          {
+            ticketWithDate && itemT.schedule?.artist?.length > 0 &&
+            <TouchableOpacity onPress={() => {
+              if (item.status == 1 && itemT.status == 1) {
+                let itemTicket = {
+                  ...item
+                }
+                let replaceList = LibObject.set(itemTicket, itemT)('list')
+                // ini jika dia gajadi beli dari halaman schedule.
+                setSelectedTicket(replaceList)
+                setQtyGlobal(itemT)
+                // releaseQueue()
+                // ini untuk dikirim ke halaman schedule
+                let dataPost: any = {
+                  event_id: availableResult?.id,
+                  event_title: availableResult?.title,
+                  charge_payment: availableResult?.charge_payment,
+                  charge_payment_type: availableResult?.charge_payment_type,
+                  images: availableResult?.images,
+                  selected_ticket: replaceList,
+                  qty: getQty(),
+                }
+
+                LibNavigation.navigate('event/schedule', {
+                  schedule: itemT.schedule,
+                  order_type: bboConfig?.order_type?.ticket,
+                  tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
+                  dataBookingEvent: dataPost
+                })
+              }
+
+
+            }} activeOpacity={itemT.status == 1 ? 0 : 1} style={applyStyle({ padding: 5, opacity: 1 })} hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} >
+              <LibIcon name="information-outline" size={18} color={"#434343"} style={{ opacity: textOpacity }} />
+            </TouchableOpacity>
+          }
+
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+
+  let listLength = new Array(10).fill('')
+
+
+  const maxDisplay = 3;
+
+  const handleShowAll = (price_id: any) => {
+    setShowAll((prevShowAll: any) => ({
+      ...prevShowAll,
+      [price_id]: !prevShowAll[price_id],
+    }));
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#fff" }}>
+      <LibFocus onFocus={() => {
+        onRefresh();
+      }} />
+      <ComponentHeader title={esp.lang("event/ticket_list", "buy_ticket")} subtitle={esp.lang("event/ticket_list", "choose_date")} />
+      {
+        !availableResult ?
+          <LibSkeleton>
+            {
+              listLength.map((item: any, i: number) => {
+                return (
+                  <View key={i}>
+                    <View style={{ height: 30, width: '100%', backgroundColor: '#fff' }} />
+                    <View style={{ padding: 10, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                      <View style={{ flexDirection: 'row' }}>
+                        <View style={{ backgroundColor: '#fff', height: 42, width: 42, borderRadius: 3, marginRight: 10 }} />
+                        <View style={{ width: '60%' }}>
+                          <View style={{ backgroundColor: '#fff', height: 20, width: '40%' }} />
+                          <View style={{ backgroundColor: '#fff', marginTop: 7, height: 14, width: '70%' }} />
+                        </View>
+                      </View>
+                      <View style={{ backgroundColor: '#fff', height: 20, width: '10%' }} />
+                    </View>
+                  </View>
+                )
+              })
+            }
+          </LibSkeleton>
+          :
+          <>
+            {
+              Object.values(pendingData).filter((item: any) => item?.order_type == "ticket").length > 0 &&
+              <ComponentPending_trx
+                onPress={() => {
+                  LibNavigation.navigate('bigbang/loading_page_list', {
+                    order_type: 'ticket'
+                  })
+                }}
+                order_type="ticket"
+                title={esp.lang("event/ticket_list", "pending", String(Object.values(pendingData).filter((item: any) => item?.order_type == "ticket").length))}
+              />
+            }
+            {
+              isInPricingQueueConfig(availableResult?.id) && isPass ?
+                <LibEffect deps={[]}>
+                  <View style={{ backgroundColor: LibStyle.colorGreen, margin: 16, borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }} >
+                    <LibTextstyle text={esp.lang("event/ticket_list", "select_ticket")} textStyle='caption1' style={{ color: 'white' }} />
+                    <MarketCountdown
+                      onExpired={() => {
+                        LibNavigation.navigate("event/detail")
+                      }}
+                      expired={timer}
+                      style={{ color: "#fff", fontWeight: 'bold' }} />
+                  </View>
+                </LibEffect>
+                : null
+            }
+            <ScrollView refreshControl={<RefreshControl refreshing={false} onRefresh={onRefresh} />}>
+              {
+                availableResult?.image_map != "" &&
+                <ComponentTouchable onPress={() => {
+                  LibNavigation.navigate('lib/gallery', { image: availableResult?.image_map })
+                }} style={{ marginBottom: 10, marginTop: 20 }}>
+                  <LibPicture source={{ uri: availableResult?.image_map }} style={applyStyle({ alignSelf: 'center', height: LibStyle.width * 0.5, width: LibStyle.width })} resizeMode="contain" />
+                </ComponentTouchable>
+              }
+              <View style={{ flex: 1 }}>
+                {
+                  availableResult?.price_type?.map?.((item: any, i: number) => {
+                    let textOpacity = item?.status == 1 ? 1 : 0.3
+                    let filterFullData = availableResult?.price_type?.filter((it: any) => it.status != 0)
+                    const displayedData = showAll[item.price_id] ? item?.list : item?.list.slice(0, maxDisplay);
+
+                    let selTic = item.price_id == selectedTicket?.price_id
+                    let ticketWithDate = item.price_date == 1 && item.use_code == 0
+
+                    return (
+                      <Pressable onPress={() => {
+
+                      }} key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
+                        <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
+                          <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
+                            <View>
+                              <LibHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}
+                                {
+                                  item.qty_min > 1 &&
+                                  <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
+                                }
+                              </LibHtmltext>
+                              {
+                                deeplinkParams?.type == 'event-voucher' && deeplinkParams?.price_id == item.price_id ?
+                                  <Text allowFontScaling={false} style={{ color: "coral", fontSize: 12, fontWeight: 'bold' }}>{esp.lang("event/ticket_list", "applied_code", deeplinkParams?.code)}</Text>
+                                  : null
+                              }
+                            </View>
+                            {/* {
+                      item.use_quota == true &&
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: LibStyle.colorRed, fontSize: 12 }}>{parseInt(item.quota) == item.quota_used ? esp.lang("event/ticket_list", "empty") : (esp.lang("event/ticket_list", "qty_left",LibUtils.number(parseInt(item.quota) - item.quota_used)))}</Text>
+                    } */}
+                            {
+                              item?.status != 1 &&
+                              <View style={applyStyle({ flexDirection: 'row' })}>
+                                <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: item.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                                  <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* item.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{item.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
+                                </View>
+                              </View>
+                            }
+                          </View>
+                          {
+                            item.info != "" && ticketWithDate &&
+                            <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
+                              <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{item.info}</Text>
+                            </View>
+                          }
+                        </View>
+                        {
+                          displayedData?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
+                        }
+
+                        {
+                          filterFullData[i].list?.length > 3 &&
+                          <TouchableOpacity onPress={() => {
+                            handleShowAll(item.price_id)
+                          }} style={{ borderTopColor: LibStyle.colorGrey, borderTopWidth: 0.8, flex: 1, padding: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                            <Text allowFontScaling={false} style={{ marginRight: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{showAll[item.price_id] ? esp.lang("event/ticket_list", "see_less") : esp.lang("event/ticket_list", "see_more")}</Text>
+                            <LibIcon name={showAll[item.price_id] ? 'chevron-up-circle-outline' : 'chevron-down-circle-outline'} color={LibStyle.colorBlue} size={18} />
+                          </TouchableOpacity>
+                        }
+
+                      </Pressable>
+                    )
+                  })
+                }
+
+                {/* ini view yang dibawah */}
+                <View style={{ marginTop: 30 }}>
+                  {
+                    unAvailableResult?.price_type?.length > 0 &&
+                    <View style={{ margin: 15, marginTop: 0, marginBottom: 0, paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: LibStyle.colorGrey }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16 }}>{esp.lang("event/ticket_list", "ticket_not_available")}</Text>
+                    </View>
+                  }
+                  {
+                    unAvailableResult?.price_type?.map?.((item: any, i: number) => {
+                      let selTic = item.price_id == selectedTicket?.price_id
+                      let textOpacity = item?.status == 1 ? 1 : 0.3
+                      let ticketWithDate = item.price_date == 1 && item.use_code == 0
+                      return (
+                        <View key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
+                          <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
+                            <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
+                              <View style={{ flex: 3 }}>
+                                <LibHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</LibHtmltext>
+                              </View>
+                              {
+                                item?.status != 1 &&
+                                <View style={applyStyle({ flex: 1, justifyContent: 'flex-end', flexDirection: 'row' })}>
+                                  <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: item.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                                    <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* item.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{item.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
+                                  </View>
+                                </View>
+                              }
+                            </View>
+                            {
+                              item.info != "" && ticketWithDate &&
+                              <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
+                                <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{item.info}</Text>
+                              </View>
+                            }
+                          </View>
+                          {
+                            item?.list?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
+                          }
+                        </View>
+                      )
+                    })
+                  }
+                </View>
+              </View>
+            </ScrollView>
+
+
+            <View style={applyStyle({ margin: 10, marginVertical: 5 })}>
+              {
+                availableResult?.price_type_info != "" &&
+                <Text allowFontScaling={false} style={applyStyle({ marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue })} >{availableResult && availableResult?.hasOwnProperty("price_type_info") && availableResult?.price_type_info}</Text>
+              }
+              <ComponentButton testID={"next_btn"} label={esp.lang("event/ticket_list", "next")} onPress={() => {
+                if (!selectedTicket) {
+                  LibToastProperty.show(esp.lang("event/ticket_list", "ticket_not_select"), 3000)
+                  return
+                }
+                if (selectedTicket?.use_code == 1) {
+                  checkInvBlock()
+                }
+                // else if (selectedTicket?.config?.seat_autopick == 1 && getQty() > 1) {
+                //   chooseBestSeat()
+                // }
+                else {
+                  nextStep();
+                }
+
+              }} style={applyStyle({ backgroundColor: selectedTicket ? LibStyle.colorPrimary : "#f1f2f3" })} />
+            </View>
+          </>
+      }
+
+    </View>
+  )
+}