esoftplay-event 0.0.2-w → 0.0.2-x

package/event/ticket_list_new.tsx

@@ -0,0 +1,710 @@
+// withHooks
+import { EventAlert } from 'esoftplay/cache/event/alert/import';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
+import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
+import { EventQueue, EventQueueProperty } from 'esoftplay/cache/event/queue/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import { UseDeeplinkProperty } from 'esoftplay/cache/use/deeplink/import';
+import { UseTasks } from 'esoftplay/cache/use/tasks/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import { useEffect, useRef } from 'react';
+
+import React from 'react';
+import { ActivityIndicator, Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTicket_list_newArgs {
+
+}
+export interface EventTicket_list_newProps {
+
+}
+
+const taskSeat = UseTasks()
+export default function m(props: EventTicket_list_newProps): any {
+
+  const { url, is_multiprice }: any = useRef(LibNavigation.getArgsAll(props)).current
+
+  const [unAvailableResult, setUnavailableResult] = useLazyState<any>()
+  const [availableResult, setAvailableResult, getAvailableResult] = useSafeState<any>()
+  const [showAll, setShowAll] = useSafeState<any>({});
+  const [deeplinkParams] = UseDeeplinkProperty.params.useState()
+  const [loading, setLoading] = useSafeState<boolean>(false)
+  const [, setHasAdditionGlobal, getHasAdditionGlobal] = useLazyState<any>()
+
+  const [, setSelectedTickets, getSelectedTickets] = useSafeState<any[]>([])
+  const [urlPayment, setUrlPayment] = useLazyState<any>()
+
+  useEffect(() => {
+    EventConfigProperty.curlConfig('v2/config_order_type')
+    loadData()
+  }, [])
+
+  let dataEvent: any = {
+    event_id: availableResult?.id,
+    event_title: availableResult?.title,
+    charge_payment: availableResult?.charge_payment,
+    charge_payment_type: availableResult?.charge_payment_type,
+    images: availableResult?.images,
+  }
+
+  const [ticketSeat, resetTicketSeat] = taskSeat((item: any) => new Promise((next) => {
+    if (item.use_seat == 1) {
+      if (item.adjacent_seats == undefined || item.adjacent_seats == 0) {
+        LibNavigation.navigateForResult('event/seat_map_new', {
+          dataTicket: {
+            ...dataEvent,
+            qty: item.qty,
+            selected_ticket: {
+              price_id: item.price_id,
+              type: item.type,
+              list: {
+                ondate: item.ondate
+              }
+            }
+          }
+        }, item.list_id)
+          .then((value: any) => {
+            const merged = { ...item, ...value }
+            let a = LibObject.replaceItem(getSelectedTickets(), (it) => it.id == item.id, merged)()
+            setSelectedTickets(a)
+            next()
+          })
+      } else {
+        let a = LibObject.replaceItem(getSelectedTickets(), (it) => it.id == item.id, item)()
+        setSelectedTickets(a)
+        next()
+      }
+    } else {
+      let a = LibObject.replaceItem(getSelectedTickets(), (it) => it.id == item.id, item)()
+      setSelectedTickets(a)
+      next()
+    }
+  }), () => {
+    const hasGlobalAddition = getHasAdditionGlobal() == 1
+    const hasTicketAddition = getSelectedTickets()?.some((item: any) => Number(item.has_addition) == 1)
+    const needAdditional = hasGlobalAddition || hasTicketAddition
+
+    if (needAdditional) {
+      LibNavigation.navigateForResult('event/additional_new', {
+        dataTicket: getSelectedTickets(),
+        additionalGlobal: hasGlobalAddition
+      }).then((value) => {
+        if (value?.addition?.length > 0) {
+          dataEvent.addition = value?.addition
+        }
+
+        const selectedPriceIds = getSelectedTickets()?.map((x: any) => x.price_id)
+
+        curlPriceConfig(selectedPriceIds, (filteredFee) => {
+          const editedDataTicket = getSelectedTickets()?.map((item: any) => {
+            const priceId = item.price_id;
+            if (filteredFee?.[priceId]) {
+              return {
+                ...item,
+                ...filteredFee?.[priceId]
+              };
+            }
+            return item;
+          })
+
+          LibNavigation.navigate('payment/ticket_multi', {
+            order_type: EventConfigProperty?.state()?.get()?.order_type?.ticket,
+            dataEvent: dataEvent,
+            dataTicket: editedDataTicket,
+            url_payment: urlPayment,
+          })
+        })
+      })
+    } else {
+      const selectedPriceIds = getSelectedTickets()?.map((x: any) => x.price_id)
+
+      curlPriceConfig(selectedPriceIds, (filteredFee) => {
+        const editedDataTicket = getSelectedTickets()?.map((item: any) => {
+          const priceId = item.price_id;
+          if (filteredFee?.[priceId]) {
+            return {
+              ...item,
+              ...filteredFee?.[priceId]
+            };
+          }
+          return item;
+        })
+
+        LibNavigation.navigate('payment/ticket_multi', {
+          order_type: EventConfigProperty?.state()?.get()?.order_type?.ticket,
+          dataEvent: dataEvent,
+          dataTicket: editedDataTicket,
+          url_payment: urlPayment,
+        })
+      })
+    }
+
+  })
+
+  function curlPriceConfig(price_ids: string[], onDone: (data: any) => void) {
+    setLoading(true)
+    if (getAvailableResult()?.url_price_config) {
+      new LibCurl(getAvailableResult()?.url_price_config, null, (res, msg) => {
+        setLoading(false)
+        let filteredFee: any = {}
+        if (res) {
+          filteredFee = Object.fromEntries(
+            price_ids.flatMap(k => res[k] ? [[k, res[k]]] : [])
+          )
+        }
+        onDone(filteredFee)
+      }, (err) => {
+        setLoading(false)
+        LibToastProperty.show(err?.message)
+      })
+    } else {
+      setLoading(false)
+      onDone({})
+    }
+  }
+
+  function onRefresh() {
+    loadData()
+  }
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+
+      // esp.log(res);
+      const availablePriceType = LibObject.update(res, (arr: any[]) => arr?.filter((x) => x.status != 0))('price_list')
+      const unAvailablePriceType = LibObject.update(res, (arr: any[]) => arr?.filter((x) => x.status == 0))('price_list')
+      setUnavailableResult(unAvailablePriceType)
+      setAvailableResult(availablePriceType)
+      setHasAdditionGlobal(res?.has_addition_global)
+      setUrlPayment(res?.url_payment)
+
+    }, (error) => {
+      LibDialog.warningConfirm("Oops!", error?.message, "Ok", () => {
+        LibNavigation.back()
+      }, "", () => { })
+    }, 1)
+  }
+
+
+  function selectTicket(priceTypeItem: any, ticket: any, isMultiple: number) {
+    const selectedData = {
+      ...ticket,
+      qty: Number(priceTypeItem.qty_min),
+      qty_min: Number(priceTypeItem?.qty_min),
+      qty_max: Number(priceTypeItem?.qty_max),
+      list_id: ticket.list_id,
+      subtotal: Number(ticket.price) * Number(priceTypeItem.qty_min),
+      type: priceTypeItem?.name,
+      tax: priceTypeItem?.tax,
+      term: priceTypeItem?.term,
+      has_addition: priceTypeItem?.has_addition,
+      image_map: priceTypeItem?.image_map,
+      use_seat: priceTypeItem?.use_seat,
+      adjacent_seats: priceTypeItem?.config?.seat_autopick,
+      fee_amount: priceTypeItem?.fee_amount,
+      fee_type: priceTypeItem?.fee_type,
+      event_id: availableResult?.id
+    }
+
+    setSelectedTickets((prev) => {
+      const alreadySelected = prev.some(x => x.id == ticket.id)
+
+      // SINGLE
+      if (isMultiple != 1) {
+
+        // klik lagi = unselect
+        if (alreadySelected) {
+          return []
+        }
+
+        // replace semua
+        return [selectedData]
+      }
+
+      // MULTIPLE
+      // remove
+      if (alreadySelected) {
+        return prev.filter(x => x.id != ticket.id)
+      }
+
+      // add
+      return [...prev, selectedData]
+    })
+  }
+
+  function decreaseQty(id: string) {
+    setSelectedTickets((prev) => {
+      return prev.map((ticket) => {
+        // bukan target
+        if (ticket.id != id) {
+          return ticket
+        }
+
+        const nextQty = ticket.qty - 1
+        // kalau habis -> unselect
+        if (nextQty <= 0) {
+          return null
+        }
+
+        // patuhi qty_min
+        const finalQty = nextQty <= ticket.qty_min ? ticket.qty_min : nextQty
+        return {
+          ...ticket,
+          qty: finalQty,
+          subtotal: finalQty * ticket.price
+        }
+      })
+
+        // hapus null
+        .filter(Boolean)
+    })
+  }
+
+  function increaseQty(id: string) {
+    setSelectedTickets((prev) => {
+      return prev.map((ticket) => {
+        // bukan target
+        if (ticket.id != id) {
+          return ticket
+        }
+        const nextQty = ticket.qty + 1
+
+        // patuhi qty_max
+        if (nextQty > ticket.qty_max) {
+          return ticket
+        }
+
+        // patuhi quota
+        if (ticket.use_quota && nextQty > ticket.quota_left) {
+          return ticket
+        }
+
+        return {
+          ...ticket,
+          qty: nextQty,
+          subtotal:
+            nextQty * ticket.price
+        }
+      })
+    })
+  }
+
+  function checkSeatMap() {
+    resetTicketSeat()
+    ticketSeat(getSelectedTickets())
+  }
+
+  function getTicketStatusMessage(priceTypeItem: any, ticket: any) {
+    const status = priceTypeItem.status != 1 ? priceTypeItem.status : ticket.status
+
+    switch (status) {
+      case 2:
+        return "Segera Hadir"
+
+      case 0:
+        return "Habis terjual"
+
+      default:
+        return ""
+    }
+  }
+
+
+  function renderItem(itemC: any, iC: number, item: any) {
+    // itemC adalah item yang ada diindex list, kalo item itu adalah item yang ada diindex price_type
+    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 = getSelectedTickets()?.find(x => x.id == itemC.id)
+    const qty = _selectedTicket?.qty || 0
+    let isMultiple = is_multiprice
+
+    let colorDefault = _selectedTicket ? "#FFE9AD" : '#fff'
+    let colorBackground = item.status != 1 ? LibStyle.colorLightGrey : itemC.status != 1 ? LibStyle.colorLightGrey : colorDefault
+    let textOpacity = /* item.status == 1 ? 1 :  */itemC?.status == 1 ? 1 : 0.3
+
+    let showCountDown = getAvailableResult()?.countdown_booking == "1" && itemC?.status == 1 && item?.status == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" && LibUtils?.moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") >= LibUtils?.moment().format("YYYY-MM-DD HH:mm:ss")
+    let dateShowed = item?.price_date == 1 ?
+      LibUtils?.moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") > LibUtils?.moment(itemC?.ondate).format("YYYY-MM-DD HH:mm:ss") ? LibUtils?.moment(itemC?.ondate).add(1, "days").format("YYYY-MM-DD HH:mm:ss") : item?.date_end
+      : item?.date_end
+
+
+    return (
+      <TouchableOpacity key={iC} onPress={() => {
+        const isAvailable = item.status == 1 && itemC.status == 1
+
+        if (!isAvailable) {
+          LibToastProperty.show(getTicketStatusMessage(item, itemC))
+          return
+        }
+        selectTicket(item, itemC, isMultiple)
+
+      }} testID="ticket_item" activeOpacity={itemC.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={{ 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={{ opacity: textOpacity, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectedTicket ? "#3ea4dc" : '#999' }}>{LibUtils.moment(itemC.ondate).localeFormat('DD')}</Text>
+                </View>
+                <View style={{ flexDirection: 'column', flex: 1 }}>
+                  {
+                    item?.status == 1 && itemC.status != 1 &&
+                    <View style={{ flexDirection: 'row', marginBottom: 5 }}>
+                      <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemC.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: itemC.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 }}>
+                        <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* itemC.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' }}>{itemC.status == 0 ? "Habis terjual" : "Segera Hadir"}</Text>
+                      </View>
+                    </View>
+                  }
+                  {
+                    showCountDown ?
+                      <Text allowFontScaling={false} style={{ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{LibUtils.moment(itemC?.ondate).localeFormat('dddd, MMMM YYYY')}</Text>
+                      :
+                      <>
+                        <Text allowFontScaling={false} style={{ opacity: textOpacity, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{LibUtils.moment(itemC.ondate).localeFormat('dddd')}</Text>
+                        <View style={{ flexDirection: 'row' }}>
+                          <Text allowFontScaling={false} style={{ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{LibUtils.moment(itemC.ondate).localeFormat('MMMM')}</Text>
+                          <Text allowFontScaling={false} style={{ opacity: textOpacity, marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{LibUtils.moment(itemC.ondate).localeFormat('YYYY')}</Text>
+                        </View>
+                      </>
+                  }
+                  {
+                    showCountDown &&
+                    <EventCountdown_event date={dateShowed} containerStyle={{ marginVertical: -5 }} />
+                  }
+                </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 && itemC.status != 1 &&
+                    <View style={{ flexDirection: 'row', marginBottom: 5 }}>
+                      <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemC.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderColor: itemC.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderRadius: 5, padding: 3, opacity: 0.8 }}>
+                        <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' }}>{itemC.status == 0 ? "Habis terjual" : "Segera Hadir"}</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 != "" &&
+                    <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
+                  }
+                </View>
+              </View>
+          }
+
+          <View style={{ marginRight: 5, marginLeft: 5, flexDirection: 'column' }} >
+            {
+              (itemC.status == 1 || itemC.status == 0 || itemC.show_price == 1) &&
+              <Text allowFontScaling={false} style={{ opacity: ticketWithDate ? textOpacity : 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: _selectedTicket ? "#3ea4dc" : (itemC.price == 0 ? LibStyle.colorGreen : '#999') }} >{itemC.price == 0 ? "Free" : LibUtils.money(itemC.price, itemC.currency)}</Text>
+            }
+            {
+              (ticketWithDate || ticketSpecial) && _selectedTicket &&
+              <View style={{ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' }}>
+                <Pressable hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='minus_btn' onPress={() => {
+                  decreaseQty(itemC.id)
+                }}>
+                  <View style={{ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                    <LibIcon name="minus" color="#e74c3c" />
+                  </View>
+                </Pressable>
+                <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 }}>{qty}</Text>
+                <Pressable hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='plus_btn' onPress={() => {
+                  increaseQty(itemC.id)
+                }}>
+                  <View style={{ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                    <LibIcon name="plus" color="#16a085" />
+                  </View>
+                </Pressable>
+              </View>
+            }
+          </View>
+
+          {
+            itemC.url_artist != "" &&
+            <TouchableOpacity onPress={() => {
+              if (item.status == 1 && itemC.status == 1) {
+                LibNavigation.navigate('event/schedule2', {
+                  url: itemC?.url_artist,
+                })
+
+                return
+                let itemTicket = {
+                  ...item
+                }
+                let replaceList = LibObject.set(itemTicket, itemC)('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: itemC.hasOwnProperty("qty") ? itemC?.qty : 1,
+                }
+
+                LibNavigation.navigate('event/schedule', {
+                  url: itemC?.url_artist,
+                  schedule: itemC.schedule,
+                  order_type: EventConfigProperty?.state()?.get()?.order_type?.ticket,
+                  tax: item?.tax,
+                  dataBookingEvent: dataPost,
+                  is_multiprice: 1
+                })
+              }
+
+
+            }} activeOpacity={itemC.status == 1 ? 0 : 1} style={{ 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],
+    }));
+  };
+
+  if (!availableResult) {
+    return (
+      <View style={{ flex: 1, backgroundColor: "#fff" }}>
+        <EventHeader title={"Beli tiket"} subtitle={"Pilih tanggal"} />
+        <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>
+      </View>
+    )
+  }
+
+  return (
+    <EventQueue event_id={Number(availableResult?.id)} >
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        {/* <LibFocus onFocus={onRefresh} /> */}
+        <EventHeader title={"Beli tiket"} subtitle={"Pilih tanggal"} />
+        <EventQueueProperty.QueueCountdown
+          onExpired={() => {
+            LibNavigation.back()
+          }}
+        />
+
+        <ScrollView refreshControl={<RefreshControl refreshing={false} onRefresh={onRefresh} />}>
+          <UseCondition if={is_multiprice == 1} >
+            <EventAlert
+              color={LibStyle.colorPrimary}
+              msg={"Kamu dapat memilih beberapa tiket sekaligus"}
+              style={{ marginHorizontal: 15 }}
+              useIcon
+            />
+          </UseCondition>
+          {
+            availableResult?.image_map != "" &&
+            <TouchableOpacity onPress={() => {
+              LibNavigation.navigate('lib/gallery', { image: availableResult?.image_map })
+            }} style={{ marginBottom: 10, marginTop: 20 }}>
+              <LibPicture source={{ uri: availableResult?.image_map }} style={{ alignSelf: 'center', height: LibStyle.width * 0.5, width: LibStyle.width }} resizeMode="contain" />
+            </TouchableOpacity>
+          }
+          <View style={{ flex: 1 }}>
+            {
+              availableResult?.price_list?.map?.((priceType: any, i: number) => {
+                let textOpacity = priceType?.status == 1 ? 1 : 0.3
+                let filterFullData = availableResult?.price_list?.filter((it: any) => it.status != 0)
+                const displayedData = showAll[priceType?.price_id] ? priceType?.list : priceType?.list.slice(0, maxDisplay);
+
+                let ticketWithDate = priceType.price_date == 1 && priceType.use_code == 0
+                let _selectedTicket = getSelectedTickets()?.some(x => x.price_id == priceType.price_id)
+
+                return (
+                  <Pressable onPress={() => {
+
+                  }} key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, marginTop: 10, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: _selectedTicket ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
+                    <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
+                      {
+                        priceType?.hasOwnProperty('label') && (priceType?.label != "" && priceType?.label != null) &&
+                        <View style={{ flexDirection: 'row' }}>
+                          <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: priceType?.label_color, borderColor: priceType?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 }}>
+                            <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(priceType?.label_color), fontWeight: 'bold' }}>{priceType?.label}</Text>
+                          </View>
+                        </View>
+                      }
+                      <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
+                        <View style={{ flex: 2 }}>
+                          <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{priceType?.name}
+                            {
+                              Number(priceType?.qty_min) > 1 &&
+                              <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + "Min.Order " + LibUtils.number(priceType?.qty_min) + ")"}</Text>
+                            }
+                          </EventHtmltext>
+                          {
+                            availableResult?.countdown_booking == "1" && displayedData?.length == 1 && priceType?.status == 1 && priceType?.date_start != "0000-00-00 00:00:00" && priceType?.date_end != "0000-00-00 00:00:00" && LibUtils.moment(priceType?.date_end).format("YYYY-MM-DD HH:mm:ss") >= LibUtils?.moment().format("YYYY-MM-DD HH:mm:ss") &&
+                            <EventCountdown_event date={priceType?.date_end} containerStyle={{ marginVertical: -5 }} />
+                          }
+
+                          {
+                            deeplinkParams?.type == 'event-voucher' && deeplinkParams?.price_id == priceType?.price_id ?
+                              <Text allowFontScaling={false} style={{ color: "coral", fontSize: 12, fontWeight: 'bold' }}>{"Voucher terpasang: " + deeplinkParams?.code}</Text>
+                              : null
+                          }
+                        </View>
+
+                        {
+                          priceType?.status != 1 &&
+                          <View style={{ flex: 1, justifyContent: 'flex-end', flexDirection: 'row' }}>
+                            <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: priceType?.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: priceType?.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 }}>
+                              <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: priceType?.status == 2 ? "#000" : "#fff", fontWeight: 'bold' }}>{priceType?.status == 0 ? "Habis terjual" : "Segera Hadir"}</Text>
+                            </View>
+                          </View>
+                        }
+                      </View>
+                      {
+                        priceType?.info != "" && ticketWithDate &&
+                        <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
+                          <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{priceType?.info}</Text>
+                        </View>
+                      }
+                    </View>
+                    {
+                      displayedData?.map((itemC: any, iC: number) => renderItem(itemC, iC, priceType))
+                    }
+
+                    {
+                      filterFullData[i]?.list?.length > 3 &&
+                      <TouchableOpacity onPress={() => {
+                        handleShowAll(priceType?.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[priceType?.price_id] ? "Lebih sedikit" : "Lihat lebih banyak"}</Text>
+                        <LibIcon name={showAll[priceType?.price_id] ? 'chevron-double-up' : 'chevron-double-down'} color={LibStyle.colorBlue} size={18} />
+                      </TouchableOpacity>
+                    }
+
+                  </Pressable>
+                )
+              })
+            }
+
+            {/* ini view yang dibawah */}
+            <View style={{ marginTop: 30 }}>
+              {
+                unAvailableResult?.price_list?.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 }}>{"Tiket tidak tersedia"}</Text>
+                </View>
+              }
+              {
+                unAvailableResult?.price_list?.map?.((item: any, i: number) => {
+                  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: item.selected == 1 ? 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', }}>
+                          <Text allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.name}</Text>
+                          {
+                            item?.status != 1 &&
+                            <View style={{ flexDirection: 'row' }}>
+                              <View style={{ 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={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: item.status == 2 ? "#000" : "#fff", fontWeight: 'bold' }}>{item.status == 0 ? "Habis terjual" : "Segera Hadir"}</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.slice(0, 3).map((itemC: any, iC: number) => renderItem(itemC, iC, item, i))
+                      }
+                    </View>
+                  )
+                })
+              }
+            </View>
+
+          </View>
+        </ScrollView>
+        <View style={{ margin: 10, marginVertical: 5 }}>
+          {
+            availableResult?.price_type_info != "" &&
+            <Text allowFontScaling={false} style={{ 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>
+          }
+          {
+            loading ?
+              <View style={{ minWidth: '100%', alignSelf: 'center' }}  >
+                <View style={{ borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: "#e6e6e6", alignItems: 'center', justifyContent: 'center', paddingHorizontal: 9 }} >
+                  <ActivityIndicator size={"small"} color={LibStyle.colorPrimary} />
+                </View>
+              </View>
+              :
+              <EventButton testID={"next_btn"} label={"Selanjutnya"} onPress={() => {
+                if (getSelectedTickets()?.length > 0) {
+                  checkSeatMap();
+                } else {
+                  LibToastProperty.show("Silahkan pilih tanggal atau tipe tiket", 3000)
+                  return
+                }
+
+              }} style={{ backgroundColor: LibStyle.colorPrimary }} />
+          }
+        </View>
+      </View>
+    </EventQueue>
+  )
+}