esoftplay-event 0.0.2 → 0.0.3

package/event/ticket_list.tsx

@@ -1,38 +1,34 @@
 // withHooks
 import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventHeader } from 'esoftplay/cache/event/header/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 moment from 'esoftplay/moment';
 
 import { applyStyle } from 'esoftplay';
 import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
-import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
-import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
 import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
-import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
+import { EventLayout } from 'esoftplay/cache/event/layout/import';
 import { EventLoading_pageProperty } from 'esoftplay/cache/event/loading_page/import';
-import { LibEffect } from 'esoftplay/cache/lib/effect/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
+import { EventQueue, EventQueueProperty } from 'esoftplay/cache/event/queue/import';
+import { LibFocus } from 'esoftplay/cache/lib/focus/import';
 import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { UseDeeplinkProperty } from 'esoftplay/cache/use/deeplink/import';
-import { UserClass } from 'esoftplay/cache/user/class/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';
+import { ActivityIndicator, Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 
 export interface EventTicket_listArgs {
@@ -127,60 +123,44 @@ export type Result = {
     "more_url": string,
   },
   "url_share": string,
+  "url_price_config": string,
+  "passes"?: any
 }
 
 export default function m(props: EventTicket_listProps): any {
-  const checkCounter = useRef<number>(0)
-  let refTimeout = useRef<any>()
   const [eventConfig] = EventConfigProperty.state().useState()
-  const { doneQueue, isInPricingQueueConfig, updateQueueExp } = EventFirebase_socket();
-
   const [pendingData] = EventLoading_pageProperty.state().useState()
 
-  const { url, fee_platform, subscribed, show_fee_percentage }: any = useRef(LibNavigation.getArgsAll(props)).current
+  const { url, fee_platform, subscribed, show_fee_percentage, is_multiprice }: any = useRef(LibNavigation.getArgsAll(props)).current
 
   const [deeplinkParams] = UseDeeplinkProperty.params.useState()
-  const [timer] = EventCountdownProperty.countdownTime.useState()
 
   const [unAvailableResult, setUnavailableResult] = useLazyState<any>()
-  const [availableResult, setAvailableResult] = useSafeState<Result>()
+  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>({});
 
+  const [loading, setLoading] = useSafeState<boolean>(false)
+
+  const [tab, setTab] = useSafeState(0)
+  const tabs = [
+    { id: 1, title: "Pricing" },
+    { id: 2, title: "Seat Layout" }
+  ]
+
   useEffect(() => {
     EventConfigProperty.curlConfig('v2/config_order_type')
-    const { event_id } = EventQueue_pricingProperty.state().get()
-    if (isInPricingQueueConfig(event_id))
-      EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
-    // loadData()
-    getCheckCounter()
-    return () => {
-      clearTimeout(refTimeout.current)
-      EventCountdownProperty.releaseQueue.trigger()
-    }
+    loadData()
   }, [])
 
   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')
@@ -198,10 +178,10 @@ export default function m(props: EventTicket_listProps): any {
         })
       }
 
-      if (res.form_allotment == 1) {
-        releaseQueue()
-        LibNavigation.push('event/queue_out', { event_id: res.id, notes: res.form_allotment_text })
-      }
+      // 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()
@@ -218,13 +198,31 @@ export default function m(props: EventTicket_listProps): any {
   }
 
   function min(): void {
-    if (getQty() <= getSelectedTicket()?.qty_min) {
-      setQty(Number(getSelectedTicket()?.qty_min))
+    const currentQty = getQty()
+    const selectedTicket = getSelectedTicket()
+
+    // kalau qty - 1 <= 0 → set qty 0 dan unselect tiket
+    if (currentQty - 1 <= 0) {
+      setQty(0)
+      setSelectedTicket(null) // atau undefined sesuai project
+      return
+    }
+
+    // ambil qty_min dengan cara manual
+    let qtyMin = 1 // default
+    if (selectedTicket && selectedTicket.qty_min) {
+      qtyMin = Number(selectedTicket.qty_min)
+    }
+
+    // kurangi qty tapi tetap patuhi qty_min
+    if (currentQty <= qtyMin) {
+      setQty(qtyMin)
     } else {
-      setQty(getQty() == 1 ? 1 : getQty() - 1)
+      setQty(currentQty - 1)
     }
   }
 
+
   function setQtyGlobal(value: any) {
     let qty = 1
     if (getSelectedTicket()?.qty_min) {
@@ -242,15 +240,15 @@ export default function m(props: EventTicket_listProps): any {
     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()
-    }
-  }
+  // 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,
@@ -262,32 +260,47 @@ export default function m(props: EventTicket_listProps): any {
     qty: getQty(),
   }
 
-  function checkAddition(newDataPost: any) {
+  async function checkAddition(newDataPost: any) {
     if ((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: eventConfig?.order_type?.ticket,
-          tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
-          fee_platform: fee_platform,
-          dataBookingEvent: { ...newDataPost, qty: getQty() },
-          subscribed: subscribed,
-          url_payment: urlPayment,
-          show_fee_percentage
-        })
-      })
-    } else {
+      const additions = await LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: availableResult?.id, qty: getQty(), price_id: selectedTicket?.price_id }, 321)
+      if (additions != "") {
+        newDataPost.addition = additions
+      }
+    }
+    curlPriceConfig(getSelectedTicket()?.price_id, (config) => {
       LibNavigation.navigate('payment/ticket', {
         order_type: eventConfig?.order_type?.ticket,
-        tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
-        fee_platform: fee_platform,
+        tax: config?.tax || selectedTicket?.tax || 0,
+        fee_platform: config.hasOwnProperty('fee_platform_amount') ? {
+          fee_platform_amount: config?.fee_platform_amount || 0,
+          fee_platform_type: config?.fee_platform_type || "NONE"
+        } : fee_platform,
+        fee_custom: {
+          fee_custom_label: config?.fee_custom_label || "Custom Fee",
+          fee_custom_amount: config?.fee_custom_amount || 0,
+          fee_custom_type: config?.fee_custom_type || "NONE"
+        },
         dataBookingEvent: { ...newDataPost, qty: getQty() },
         subscribed: subscribed,
         url_payment: urlPayment,
         show_fee_percentage
       })
+    })
+  }
+
+  function curlPriceConfig(price_id: string, onDone: (data: any) => void) {
+    setLoading(true)
+    if (getAvailableResult()?.url_price_config) {
+      new LibCurl(getAvailableResult()?.url_price_config, null, (res, msg) => {
+        setLoading(false)
+        onDone(res?.[price_id])
+      }, (err) => {
+        setLoading(false)
+        LibToastProperty.show(err?.message)
+      })
+    } else {
+      setLoading(false)
+      onDone({})
     }
   }
 
@@ -348,7 +361,7 @@ export default function m(props: EventTicket_listProps): any {
     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
 
-    let showCountDown = esp.isDebug("show_countdown") && itemT.status != 0 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00"
+    let showCountDown = getAvailableResult()?.countdown_booking == "1" && itemT?.status == 1 && item?.status == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" && moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") >= moment().format("YYYY-MM-DD HH:mm:ss")
     let dateShowed = item?.price_date == 1 ?
       moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") > moment(itemT?.ondate).format("YYYY-MM-DD HH:mm:ss") ? moment(itemT?.ondate).add(1, "days").format("YYYY-MM-DD HH:mm:ss") : item?.date_end
       : item?.date_end
@@ -457,7 +470,7 @@ export default function m(props: EventTicket_listProps): any {
               (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' })}>
+                  <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
                     <LibIcon name="minus" color="#e74c3c" />
                   </View>
                 </Pressable>
@@ -466,7 +479,7 @@ export default function m(props: EventTicket_listProps): any {
                 <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' })}>
+                  <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
                     <LibIcon name="plus" color="#16a085" />
                   </View>
                 </Pressable>
@@ -500,7 +513,8 @@ export default function m(props: EventTicket_listProps): any {
                   schedule: itemT.schedule,
                   order_type: eventConfig?.order_type?.ticket,
                   tax: selectedTicket?.tax == null ? 0 : selectedTicket?.tax,
-                  dataBookingEvent: dataPost
+                  dataBookingEvent: dataPost,
+                  is_multiprice: 0
                 })
               }
 
@@ -528,36 +542,44 @@ export default function m(props: EventTicket_listProps): any {
     }));
   };
 
-  return (
-    <View style={{ flex: 1, backgroundColor: "#fff" }}>
-      <LibFocus onFocus={() => {
-        onRefresh();
-      }} />
-      <EventHeader 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>
+  if (!availableResult) {
+    return (
+      <View style={{ flex: 1, backgroundColor: "#fff" }}>
+        <EventHeader title={esp.lang("event/ticket_list", "buy_ticket")} subtitle={esp.lang("event/ticket_list", "choose_date")} />
+        <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 style={{ backgroundColor: '#fff', height: 20, width: '10%' }} />
                     </View>
+                    <View style={{ backgroundColor: '#fff', height: 20, width: '10%' }} />
                   </View>
-                )
-              })
-            }
-          </LibSkeleton>
-          :
+                </View>
+              )
+            })
+          }
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+  return (
+    <EventQueue
+      event_id={Number(availableResult?.id)}>
+      <View style={{ flex: 1, backgroundColor: "#fff" }}>
+        <LibFocus onFocus={() => {
+          onRefresh();
+        }} />
+        <EventHeader title={esp.lang("event/ticket_list", "buy_ticket")} subtitle={esp.lang("event/ticket_list", "choose_date")} />
+        {
           <>
             {/* {
               Object.values(pendingData).filter((item: any) => item?.order_type == "ticket").length > 0 &&
@@ -571,181 +593,217 @@ export default function m(props: EventTicket_listProps): any {
                 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' }} />
-                    <EventCountdown_base
-                      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 != "" &&
-                <TouchableOpacity 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" />
-                </TouchableOpacity>
-              }
-              <View style={{ flex: 1 }}>
 
+            <EventQueueProperty.QueueCountdown
+              onExpired={() => {
+                LibNavigation.back()
+              }}
+            />
+
+            {
+              esp.isDebug("") && availableResult?.price_type.some((x) => x.use_seat == "1") &&
+              <View style={{ height: 43, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#f2f2f2' }} >
                 {
-                  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: 5, borderWidth: 1.5, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
-                        <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 5, borderTopRightRadius: 5 }}>
-                          {
-                            esp.isDebug("") && UserClass.state().get()?.email == "bagus@fisip.net" &&
-                            <View style={applyStyle({ flexDirection: 'row' })}>
-                              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: LibStyle.colorGreen, borderColor: "#4cd964", borderRadius: 5, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
-                                <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: '#fff', fontWeight: 'bold' }}>Disini kah boy</Text>
-                              </View>
-                            </View>
-                          }
+                  tabs.map((item: any, i: number) => (
+                    <Pressable key={i} onPress={() => {
+                      setTab(i)
+                    }}>
+                      <View style={{ height: 43, width: LibStyle.width / tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
+                        <Text style={{
+                          width: LibStyle.width / tabs.length, fontSize: tab == i ? 13 : 12,
+                          fontWeight: tab == i ? "bold" : "normal",
+                          fontStyle: "normal", letterSpacing: 0, textAlign: "center",
+                          color: tab == i ? LibStyle.colorPrimary : "#c5c5c5"
+                        }}>{item.title}</Text>
+                        <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: item.total > 0 ? 1 : 0 }} />
+                        <View style={{ width: (LibStyle.width / tabs.length) - 20, height: 3, backgroundColor: tab == i ? LibStyle.colorPrimary : "#fff", position: 'absolute', bottom: 0 }} />
+                      </View>
+                    </Pressable>
+                  ))
+                }
+              </View>
+            }
+            {
+              tab == 0 ?
+                <>
+                  <ScrollView refreshControl={<RefreshControl refreshing={false} onRefresh={onRefresh} />}>
+                    {
+                      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={applyStyle({ alignSelf: 'center', height: LibStyle.width * 0.5, width: LibStyle.width })} resizeMode="contain" />
+                      </TouchableOpacity>
+                    }
+                    <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: 5, borderWidth: 1.5, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
+                              <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 5, borderTopRightRadius: 5 }}>
+                                {
+                                  item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
+                                  <View style={applyStyle({ flexDirection: 'row' })}>
+                                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.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(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
+                                    </View>
+                                  </View>
+                                }
 
-                          <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
-                            <View>
-                              <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}
+                                <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
+                                  <View style={{ flex: 2 }}>
+                                    <EventHtmltext 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>
+                                      }
+                                    </EventHtmltext>
+                                    {
+                                      availableResult?.countdown_booking == "1" && displayedData?.length == 1 && item?.status == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" && moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") >= moment().format("YYYY-MM-DD HH:mm:ss") &&
+                                      <EventCountdown_event date={item?.date_end} containerStyle={{ marginVertical: -5 }} />
+                                    }
+                                    {
+                                      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?.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.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>
+                                  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>
                                 }
-                              </EventHtmltext>
+                              </View>
                               {
-                                availableResult?.countdown_booking == "1" && displayedData?.length == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" &&
-                                <EventCountdown_event date={item?.date_end} containerStyle={{ marginVertical: -5 }} />
+                                displayedData?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
                               }
+
                               {
-                                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
+                                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>
                               }
-                            </View>
-                            {
-                              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))
-                        }
 
+                            </Pressable>
+                          )
+                        })
+                      }
+
+                      {/* ini view yang dibawah */}
+                      <View style={{ marginTop: 30 }}>
                         {
-                          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>
+                          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>
                         }
-
-                      </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 }}>
-                                <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
-                              </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>
+                        {
+                          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 }}>
+                                      <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
+                                    </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>
-                              }
-                            </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>
+                                {
+                                  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>
+                    }
+                    {
+                      loading ?
+                        <View style={{ minWidth: '100%', alignSelf: 'center' }}  >
+                          <View style={{ borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 10, backgroundColor: "#e6e6e6", alignItems: 'center', justifyContent: 'center', paddingHorizontal: 9 }} >
+                            <ActivityIndicator size={"small"} color={LibStyle.colorPrimary} />
                           </View>
-                          {
-                            item?.list?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
-                          }
                         </View>
-                      )
-                    })
-                  }
-                </View>
-              </View>
-            </ScrollView>
-
+                        :
+                        <EventButton 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();
+                          }
 
-            <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>
-              }
-              <EventButton 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>
 
-              }} style={applyStyle({ backgroundColor: selectedTicket ? LibStyle.colorPrimary : "#f1f2f3" })} />
-            </View>
+                </>
+                :
+                <EventLayout
+                  is_multiprice={is_multiprice == 1 ? true : false}
+                  result={availableResult}
+                  priceTypes={[...availableResult.price_type, ...unAvailableResult?.price_type]}
+                />
+            }
           </>
-      }
+        }
 
-    </View>
+      </View>
+    </EventQueue>
   )
 }