esoftplay-event 0.0.2 → 0.0.3

package/event/artist_detail.tsx

@@ -7,6 +7,8 @@ import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
+import { EventQueue } from 'esoftplay/cache/event/queue/import';
 import { EventShare } from 'esoftplay/cache/event/share/import';
 import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
@@ -15,6 +17,7 @@ import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
 import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
@@ -22,10 +25,11 @@ import { LibUtils } from 'esoftplay/cache/lib/utils/import';
 import { LibVideoProperty } from 'esoftplay/cache/lib/video/import';
 import { LibWebview } from 'esoftplay/cache/lib/webview/import';
 import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
 import moment from 'esoftplay/moment';
 import useSafeState from 'esoftplay/state';
 import React, { useEffect } from 'react';
-import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 
 export interface EventArtist_detailProps {
@@ -36,21 +40,40 @@ export default function m(props: EventArtist_detailProps): any {
   moment().locale('id')
   let showSchedule = React.useRef<LibSlidingup>(null)
   const [qty, setQty] = useSafeState<any>(1)
-  const { data, subscribed } = LibNavigation.getArgsAll(props)
-  const startBooking = moment(data?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss')
+  const { data, subscribed, url } = LibNavigation.getArgsAll(props)
   const date = moment().localeFormat('YYYY-MM-DD HH:mm:ss')
   const [eventConfig] = EventConfigProperty.state().useState()
 
   const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
   const [priceList, setPriceList] = useSafeState<any>()
   const [showAll, setShowAll] = useSafeState<any>({});
+  const [loading, setLoading] = useSafeState<boolean>(false)
+
+  const [result, setResult, getResult] = useLazyState<any>(data)
+  const [startBooking, setStartBooking] = useLazyState<any>(moment(getResult()?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss'))
 
   useEffect(() => {
-    loadDataPrice()
+    loadResult()
     EventConfigProperty.curlConfig('v2/config_order_type')
     return () => { EventCountdownProperty.releaseQueue.trigger() }
   }, [])
 
+  function loadResult() {
+    if (!url) {
+      loadDataPrice(getResult()?.price_list_url)
+    } else {
+      new LibCurl(url, null, (res, msg) => {
+        loadDataPrice(res?.price_list_url)
+        setStartBooking(moment(res?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss'))
+        setResult(res)()
+      }, (err) => {
+        console.log(err)
+        LibToastProperty.show(err?.message)
+        LibNavigation.back()
+      })
+    }
+  }
+
   function sortByStatus(data: any) {
     // Fungsi sorting untuk memastikan status 1 di atas, lainnya di bawah
     const statusSorter = (a: any, b: any) => {
@@ -69,8 +92,8 @@ export default function m(props: EventArtist_detailProps): any {
   }
 
 
-  function loadDataPrice() {
-    new LibCurl(data?.price_list_url, null, (res, msg) => {
+  function loadDataPrice(price_list_url: string) {
+    new LibCurl(price_list_url, null, (res, msg) => {
 
       let stop = false
       let arr = sortByStatus(res)
@@ -101,7 +124,7 @@ export default function m(props: EventArtist_detailProps): any {
     })
   }
 
-  function proceedToPayment() {
+  async function proceedToPayment() {
     if (!selectedTicket) {
       if (priceList?.every((v: any) => v?.status == 0)) {
         LibToastProperty.show(esp.lang("event/artist_detail", "ticket_not_available"))
@@ -114,10 +137,10 @@ export default function m(props: EventArtist_detailProps): any {
     showSchedule.current?.hide()
 
     let dataPost: any = {
-      event_id: data?.event_id,
-      event_title: data?.event_title,
-      charge_payment: data?.charge_payment,
-      charge_payment_type: data?.charge_payment_type,
+      event_id: getResult()?.event_id,
+      event_title: getResult()?.event_title,
+      charge_payment: getResult()?.charge_payment,
+      charge_payment_type: getResult()?.charge_payment_type,
       selected_ticket: selectedTicket,
       qty: qty,
     }
@@ -126,83 +149,95 @@ export default function m(props: EventArtist_detailProps): any {
       dataPost.adjacent_seats = 1
     }
 
-    if (selectedTicket?.use_seat == 1) {
-      if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {
-        LibNavigation.navigate('payment/ticket', {
-          order_type: eventConfig?.order_type?.ticket,
-          tax: getSelectedTicket()?.tax || data?.tax,
-          dataBookingEvent: { ...dataPost, qty: qty },
-          subscribed: subscribed
-        })
-      } else {
-        LibNavigation.navigateForResult('event/seat_map_new', {
+    let finalDataPost = { ...dataPost }
+
+    if (getSelectedTicket()?.use_seat == 1) {
+      if (getSelectedTicket()?.config?.seat_autopick != 1) {
+        const seat = await LibNavigation.navigateForResult('event/seat_map_new', {
           url: 'event_seat',
-          dataTicket: dataPost,
-        }).then((value) => {
-          dataPost.seat_label = value.seat_label
-
-          if (data?.has_addition && data?.has_addition == 1) {
-            LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: data?.event_id, qty: qty, data: dataPost }, 221).then((additions) => {
-              if (additions != "") {
-                dataPost.addition = additions
-              }
-              LibNavigation.navigate('payment/ticket', {
-                order_type: eventConfig?.order_type?.ticket,
-                tax: getSelectedTicket()?.tax || data?.tax,
-                dataBookingEvent: dataPost,
-                fee_platform: {
-                  fee_platform_amount: data?.fee_platform_amount,
-                  fee_platform_type: data?.fee_platform_type,
-                },
-                subscribed: subscribed
-              })
-            })
-          } else {
-            LibNavigation.navigate('payment/ticket', {
-              order_type: eventConfig?.order_type?.ticket,
-              tax: getSelectedTicket()?.tax || data?.tax,
-              dataBookingEvent: dataPost,
-              fee_platform: {
-                fee_platform_amount: data?.fee_platform_amount,
-                fee_platform_type: data?.fee_platform_type,
-              },
-              subscribed: subscribed
-            })
-          }
+          dataTicket: finalDataPost,
         })
+
+        finalDataPost = {
+          ...finalDataPost,
+          seat_label: seat?.seat_label
+        }
       }
-    } else {
-      if (selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1) {
-        LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: data?.event_id, qty: qty, data: dataPost, price_id: selectedTicket?.price_id }, 221).then((additions) => {
-          if (additions != "") {
-            dataPost.addition = additions
-          }
-          LibNavigation.navigate('payment/ticket', {
-            order_type: eventConfig?.order_type?.ticket,
-            tax: getSelectedTicket()?.tax || data?.tax,
-            dataBookingEvent: dataPost,
-            fee_platform: {
-              fee_platform_amount: data?.fee_platform_amount,
-              fee_platform_type: data?.fee_platform_type,
-            },
-            subscribed: subscribed
-          })
-        })
-      } else {
-        LibNavigation.navigate('payment/ticket', {
-          order_type: eventConfig?.order_type?.ticket,
-          tax: getSelectedTicket()?.tax || data?.tax,
-          dataBookingEvent: dataPost,
-          fee_platform: {
-            fee_platform_amount: data?.fee_platform_amount,
-            fee_platform_type: data?.fee_platform_type,
-          },
-          subscribed: subscribed
-        })
+    }
+
+    finalDataPost = await handleAdditionIfNeeded(finalDataPost, qty)
+    const args = await buildPaymentArgs(finalDataPost, qty)
+    LibNavigation.navigate('payment/ticket', args)
+  }
+
+  async function buildPaymentArgs(dataPost: any, qty: number) {
+    setLoading(true)
+    const conf = await curlPriceConfig(getSelectedTicket()?.price_id)
+    setLoading(false)
+
+    return {
+      order_type: eventConfig?.order_type?.ticket,
+      tax: conf?.tax ?? getSelectedTicket()?.tax ?? getResult()?.tax ?? 0,
+      dataBookingEvent: { ...dataPost, qty },
+      subscribed,
+      fee_platform: conf?.fee_platform_amount != null
+        ? {
+          fee_platform_amount: conf.fee_platform_amount || 0,
+          fee_platform_type: conf.fee_platform_type || "NONE",
+        }
+        : {
+          fee_platform_amount: getResult()?.fee_platform_amount || 0,
+          fee_platform_type: getResult()?.fee_platform_type || "NONE",
+        },
+      fee_custom: {
+        fee_custom_label: conf?.fee_custom_label || "Custom Fee",
+        fee_custom_amount: conf?.fee_custom_amount,
+        fee_custom_type: conf?.fee_custom_type,
       }
     }
   }
 
+  async function handleAdditionIfNeeded(dataPost: any, qty: number) {
+    if (getSelectedTicket()?.has_addition != 1) return dataPost
+
+    const additions = await LibNavigation.navigateForResult(
+      'event/additional',
+      {
+        type_ticket: selectedTicket?.type,
+        ondate: selectedTicket?.list?.ondate,
+        event_id: getResult()?.event_id,
+        qty,
+        data: dataPost,
+        price_id: selectedTicket?.price_id
+      },
+      221
+    )
+
+    return additions ? { ...dataPost, addition: additions } : dataPost
+  }
+
+
+  function curlPriceConfig(price_id: string): Promise<any> {
+    return new Promise((resolve) => {
+      if (!getResult()?.url_price_config) {
+        resolve({})
+        return
+      }
+
+      new LibCurl(
+        getResult().url_price_config,
+        null,
+        (res) => {
+          resolve(res?.[price_id] || {})
+        },
+        (err) => {
+          LibToastProperty.show(err?.message)
+          resolve({})
+        }
+      )
+    })
+  }
+
   function add(): void {
     let hasQuota = getSelectedTicket().quota > 0
     const min = hasQuota ? Number(getSelectedTicket()?.quota) - Number(getSelectedTicket()?.quota_used) : Number(getSelectedTicket()?.qty_max)
@@ -212,10 +247,27 @@ export default function m(props: EventArtist_detailProps): any {
   }
 
   function min(): void {
-    if (qty <= getSelectedTicket()?.qty_min) {
-      setQty(Number(getSelectedTicket()?.qty_min))
+    const currentQty = qty
+    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(qty == 1 ? 1 : qty - 1)
+      setQty(currentQty - 1)
     }
   }
 
@@ -224,23 +276,23 @@ export default function m(props: EventArtist_detailProps): any {
     {
       icon: 'icons/ic_facebook.png',
       title: 'Facebook',
-      onPress: () => { EventShare.facebook(data?.url) }
+      onPress: () => { EventShare.facebook(getResult()?.url) }
     },
     {
       icon: 'icons/ic_whatsapp.png',
       title: 'Whatsapp',
-      onPress: () => { EventShare.whatsapp(data?.url) }
+      onPress: () => { EventShare.whatsapp(getResult()?.url) }
     },
     {
       icon: 'icons/ic_twitter.png',
       title: 'Twitter',
-      onPress: () => { EventShare.twitter(data?.url) }
+      onPress: () => { EventShare.twitter(getResult()?.url) }
     },
     {
       icon: 'icons/ic_copy.png',
       title: esp.lang("event/artist_detail", "copy"),
       onPress: () => {
-        LibUtils.copyToClipboard(data?.url).then((v) => {
+        LibUtils.copyToClipboard(getResult()?.url).then((v) => {
           LibToastProperty.show(esp.lang("event/artist_detail", "alert"))
         })
       }
@@ -287,29 +339,50 @@ export default function m(props: EventArtist_detailProps): any {
           }
         }} activeOpacity={itemT?.status == 1 ? 0 : 1} key={iT} style={{ flex: 1, flexDirection: 'row', backgroundColor: colorBackground, justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
         {
-          itemT.ondate == "0000-00-00" ?
-            <LibPicture source={esp.assets('icons/ic_special2.png')} style={{ height: 42, width: 42 }} />
-            :
-            <>
-              <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: _selectedTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: '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 &&
+                  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/artist_detail", "sold_out") : esp.lang("event/artist_detail", "coming_soon")}</Text>
+                    <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>
+                <>
+                  <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', alignItems: "center" })}>
+                    <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: 5, 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('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 != "" &&
+                  <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={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
@@ -321,13 +394,13 @@ export default function m(props: EventArtist_detailProps): any {
             item?.status == 1 && (ticketWithDate || ticketSpecial) && _selectedTicket &&
             <View style={applyStyle({ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' })}>
               <TouchableOpacity onPress={() => { min() }}>
-                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", justifyContent: 'center', alignContent: 'center', alignItems: 'center' })}>
                   <LibIcon name="minus" color="#e74c3c" />
                 </View>
               </TouchableOpacity>
               <Text style={applyStyle({ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 })}>{qty}</Text>
               <TouchableOpacity onPress={() => { add() }}>
-                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", justifyContent: 'center', alignContent: 'center', alignItems: 'center' })}>
                   <LibIcon name="plus" color="#16a085" />
                 </View>
               </TouchableOpacity>
@@ -347,7 +420,7 @@ export default function m(props: EventArtist_detailProps): any {
   function renderImages(item: any, i: number) {
     const styleId_Z1ecB7O: any = { height: bgHeight, width: LibStyle.width, resizeMode: 'cover' }
     return (
-      <TouchableOpacity key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: data?.images_artist, index: i })}>
+      <TouchableOpacity key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: getResult()?.images_artist, index: i })}>
         <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
       </TouchableOpacity>
     )
@@ -362,158 +435,182 @@ export default function m(props: EventArtist_detailProps): any {
   };
 
   return (
-    <View style={{ flex: 1 }} >
-      <EventHeader title={esp.lang("event/artist_detail", "title")} subtitle={data?.title} />
-      <ScrollView>
-        {
-          data?.images_artist && data?.images_artist?.length > 0 ?
-            <LibCarrousel
-              delay={3000}
-              style={{ height: bgHeight, width: LibStyle.width }}
-              autoplay
-              bullets
-              bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
-              chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
-              bulletsContainerStyle={{ marginBottom: -10 }}>
-              {
-                data?.images_artist && data?.images_artist?.map(renderImages)
-              }
-            </LibCarrousel>
-            :
-            <Pressable onPress={() => LibNavigation.navigate('lib/gallery', { image: data?.image_artist })} >
-              <LibPicture
-                style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width, backgroundColor: '#f2f3f4' })}
-                source={{ uri: data?.image_artist }} />
-            </Pressable>
-        }
-        <View style={applyStyle({ marginTop: 10, marginLeft: 17, flexDirection: 'row' })}>
+    <EventQueue event_id={result?.event_id}>
+      <View style={{ flex: 1 }} >
+        <EventHeader title={esp.lang("event/artist_detail", "title")} subtitle={result?.title} />
+        <LibScroll onRefresh={loadResult}>
           {
-            share.map(renderShare)
+            result && result?.images_artist && result?.images_artist?.length > 0 ?
+              <LibCarrousel
+                delay={3000}
+                style={{ height: bgHeight, width: LibStyle.width }}
+                autoplay
+                bullets
+                bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                bulletsContainerStyle={{ marginBottom: -10 }}>
+                {
+                  result?.images_artist && result?.images_artist?.map(renderImages)
+                }
+              </LibCarrousel>
+              :
+              <Pressable onPress={() => LibNavigation.navigate('lib/gallery', { image: result?.image_artist })} >
+                <LibPicture
+                  style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width, backgroundColor: '#f2f3f4' })}
+                  source={{ uri: result?.image_artist }} />
+              </Pressable>
           }
-        </View>
-        <Text allowFontScaling={false} style={applyStyle({ marginBottom: 12, marginLeft: 17, fontFamily: "Arial", marginTop: 20, fontSize: 26, fontWeight: "bold", fontStyle: "normal", lineHeight: 30, letterSpacing: 0, color: "#000" })}>{data?.title}</Text>
-        {/* {
+          <View style={applyStyle({ marginTop: 10, marginLeft: 17, flexDirection: 'row' })}>
+            {
+              share.map(renderShare)
+            }
+          </View>
+          <Text allowFontScaling={false} style={applyStyle({ marginBottom: 12, marginLeft: 17, fontFamily: "Arial", marginTop: 20, fontSize: 26, fontWeight: "bold", fontStyle: "normal", lineHeight: 30, letterSpacing: 0, color: "#000" })}>{result?.title}</Text>
+          {/* {
           data && priceList?.map?.(renderPrieList)
         } */}
-        {
-          data?.description != "" &&
-          <ScrollView>
-            <LibWebview onFinishLoad={() => { }} source={{ html: data?.description }} />
-          </ScrollView>
-        }
-        {
-          data && data?.youtube != "" &&
-          <>
-            <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 20, marginTop: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" })} >{esp.lang("event/artist_detail", "video")}</Text>
-            <TouchableOpacity onPress={() => LibNavigation.navigate('lib/video', { code: data?.youtube })} >
-              <LibPicture source={{ uri: LibVideoProperty.getUrlThumbnail(data?.youtube) }} style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width - 40, marginHorizontal: 20, resizeMode: 'cover' })} />
-            </TouchableOpacity>
-          </>
-        }
-      </ScrollView>
-      <View style={applyStyle({ flexDirection: 'row', padding: 10, backgroundColor: 'white' })} >
+          {
+            result?.description != "" &&
+            <ScrollView>
+              <LibWebview onFinishLoad={() => { }} source={{ html: getResult()?.description }} />
+            </ScrollView>
+          }
+          {
+            result && result?.youtube != "" &&
+            <>
+              <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 20, marginTop: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" })} >{esp.lang("event/artist_detail", "video")}</Text>
+              <TouchableOpacity onPress={() => LibNavigation.navigate('lib/video', { code: getResult()?.youtube })} >
+                <LibPicture source={{ uri: LibVideoProperty.getUrlThumbnail(getResult()?.youtube) }} style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width - 40, marginHorizontal: 20, resizeMode: 'cover' })} />
+              </TouchableOpacity>
+            </>
+          }
+        </LibScroll>
+        <View style={applyStyle({ flexDirection: 'row', padding: 10, backgroundColor: 'white' })} >
 
-        {
-          data?.book_available == 1 ?
-            <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
-              EventIndexProperty.isLogin(() => {
-                showSchedule.current?.show()
-              })
-            }} style={applyStyle({ backgroundColor: LibStyle.colorGreen })} />
-            :
-            <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
-              <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginRight: 10, marginLeft: 10 })} >{esp.lang("event/artist_detail", "book_available", moment(startBooking).serverFormat("DD MMMM YYYY HH:mm:ss"))}</Text>
-            </View>
-        }
-      </View>
+          {
+            result?.book_available == 1 ?
+              <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+                EventIndexProperty.isLogin(() => {
+                  showSchedule.current?.show()
+                })
+              }} style={applyStyle({ backgroundColor: LibStyle.colorGreen })} />
+              :
+              <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
+                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginRight: 10, marginLeft: 10 })} >{esp.lang("event/artist_detail", "book_available", moment(startBooking).serverFormat("DD MMMM YYYY HH:mm:ss"))}</Text>
+              </View>
+          }
+        </View>
 
-      <LibSlidingup ref={showSchedule}>
-        <View style={applyStyle({ backgroundColor: 'white', borderTopRightRadius: 30, borderTopLeftRadius: 30, paddingTop: 15, maxHeight: LibStyle.height - (LibStyle.height / 3) })}>
-          <Text allowFontScaling={false} style={applyStyle({ marginBottom: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" })}>{esp.lang("event/artist_detail", "select_date")}</Text>
-          <ScrollView showsVerticalScrollIndicator={false} >
-            {
-              priceList?.length > 0 && sortByStatus(priceList)?.map((item: any, i: number) => {
-                let filterFullData = priceList?.filter((it: any) => it.status != 0)
-                const displayedData = showAll[item.price_id] ? item?.list : item?.list.slice(0, maxDisplay);
-
-                let textOpacity = item?.status == 1 ? 1 : 0.3
-                let selTic = item.price_id == selectedTicket?.price_id
-                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', }}>
-                        <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
-                        {
-                          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>
-                        }
+        <LibSlidingup ref={showSchedule}>
+          <View style={applyStyle({ backgroundColor: 'white', borderTopRightRadius: 30, borderTopLeftRadius: 30, paddingTop: 15, maxHeight: LibStyle.height - (LibStyle.height / 3) })}>
+            <Text allowFontScaling={false} style={applyStyle({ marginBottom: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" })}>{esp.lang("event/artist_detail", "select_date")}</Text>
+            <ScrollView showsVerticalScrollIndicator={false} >
+              {
+                priceList?.length > 0 && sortByStatus(priceList)?.map((item: any, i: number) => {
+                  let filterFullData = priceList?.filter((it: any) => it.status != 0)
+                  const displayedData = showAll[item.price_id] ? item?.list : item?.list.slice(0, maxDisplay);
+
+                  let textOpacity = item?.status == 1 ? 1 : 0.3
+                  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 }}>
                         {
-                          item?.status != 1 &&
+                          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?.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/artist_detail", "sold_out") : esp.lang("event/artist_detail", "coming_soon")}</Text>
+                            <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 style={{ flex: 5 }}>
+                            <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
+                          </View>
+                          {
+                            item.qty_min > 1 &&
+                            <Text style={{ flex: 1, color: LibStyle.colorRed, textAlign: 'right', fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
+                          }
+                          {
+                            item?.status != 1 &&
+                            <View style={applyStyle({ marginLeft: 10, 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/artist_detail", "sold_out") : esp.lang("event/artist_detail", "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.info != "" &&
-                        <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>
+                        displayedData?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
                       }
-                    </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>
+                  )
+                })
+              }
+            </ScrollView>
+            <View style={applyStyle({ paddingVertical: 10 })} >
+              {
+                result?.price_type_info != "" &&
+                <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue })} >{result?.hasOwnProperty("price_type_info") && result?.price_type_info}</Text>
+              }
+              {
+                result?.book_available == 1 ?
+                  <>
                     {
-                      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>
+                      result?.book_available == 0 && result.end_booking <= date && result.end_booking != '0000-00-00 00:00:00' ?
+                        <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
+                          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_end")}</Text>
+                        </View>
+                        :
+                        <>
+                          {
+                            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 label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+                                EventIndexProperty.isLogin(() => {
+                                  proceedToPayment()
+                                })
+                              }} style={{ backgroundColor: LibStyle.colorGreen, marginTop: 2, marginHorizontal: 15 }} />
+                          }
+                        </>
                     }
-
-                  </Pressable>
-                )
-              })
-            }
-          </ScrollView>
-          <View style={applyStyle({ paddingVertical: 10 })} >
-            {
-              data?.price_type_info != "" &&
-              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue })} >{data?.hasOwnProperty("price_type_info") && data?.price_type_info}</Text>
-            }
-            {
-              data?.book_available == 1 ?
-                <>
-                  {
-                    data?.book_available == 0 && data.end_booking <= date && data.end_booking != '0000-00-00 00:00:00' ?
-                      <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
-                        <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_end")}</Text>
-                      </View>
-                      :
-                      <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
-                        EventIndexProperty.isLogin(() => {
-                          proceedToPayment()
-                        })
-                      }} style={{ backgroundColor: LibStyle.colorGreen, marginTop: 2, marginHorizontal: 15 }} />
-                  }
-                </>
-                :
-                <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
-                  <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_on", moment(data?.start_booking).serverFormat('DD MMMM YYYY HH:mm '))}</Text>
-                </View>
-            }
+                  </>
+                  :
+                  <View style={applyStyle({ flex: 1, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
+                    <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 })} >{esp.lang("event/artist_detail", "booking_on", moment(result?.start_booking).serverFormat('DD MMMM YYYY HH:mm '))}</Text>
+                  </View>
+              }
+            </View>
           </View>
-        </View>
-      </LibSlidingup>
+        </LibSlidingup>
 
-    </View>
+      </View>
+    </EventQueue>
   )
 }