esoftplay-event 0.0.2-l → 0.0.2-m

package/event/artist.tsx

@@ -1,8 +1,6 @@
 // withHooks
 
 import { applyStyle } from 'esoftplay';
-import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
-import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
 import { EventMessage } from 'esoftplay/cache/event/message/import';
@@ -14,7 +12,6 @@ import { LibPicture } from 'esoftplay/cache/lib/picture/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 { UserClass } from 'esoftplay/cache/user/class/import';
 import esp from 'esoftplay/esp';
 import moment from 'esoftplay/moment';
 import useSafeState from 'esoftplay/state';
@@ -33,7 +30,6 @@ export default function m(props: BigbangArtistProps): any {
   const [result, setResult] = useSafeState<any>()
   const [resultEvent, setResultEvent] = useSafeState<any>()
   const [error, setError] = useSafeState<any>('')
-  const { isInPricingQueueConfig } = EventFirebase_socket()
 
   const { title, has_addition } = LibNavigation.getArgsAll(props)
   const url = LibNavigation.getArgs(props, 'url', 'event_artist')
@@ -46,9 +42,6 @@ export default function m(props: BigbangArtistProps): any {
         esp.log({ res });
         new LibCurl(res?.[0]?.url_event || `event_detail/${res?.[0]?.event_id}`, null, (res) => {
           setResultEvent(res)
-          if (res?.id) {
-            EventFirebase_socketProperty.eventIdQueue.set(res?.id)
-          }
           if (res.allotment) {
             esp.modProp("event/firebase_socket").userIdKeyReplacer.set({
               t: Number(res.allotment.t),
@@ -66,11 +59,11 @@ export default function m(props: BigbangArtistProps): any {
   }
 
   useEffect(() => {
-    if (esp.isDebug("") && UserClass?.state()?.get()?.email == "bagus@fisip.net") {
-      LibNavigation.replace('event/artistv2')
-    } else {
-      loadData?.()
-    }
+    // if (esp.isDebug("") && UserClass?.state()?.get()?.email == "bagus@fisip.net") {
+    //   LibNavigation.replace('event/artistv2')
+    // } else {
+    loadData?.()
+    // }
   }, [])
 
   const itemWidth = (LibStyle.width - 2)
@@ -90,7 +83,7 @@ export default function m(props: BigbangArtistProps): any {
     return (
       <TouchableOpacity key={index} onPress={() => {
         if (isNotAvailable) {
-          LibToastProperty.show(esp.lang("event/artist", "ticket_not_available"))
+          LibToastProperty.show(item?.price_list?.[0]?.message)
         } else {
           EventIndexProperty.isLogin(() => {
             let newItem = {
@@ -98,36 +91,20 @@ export default function m(props: BigbangArtistProps): any {
               ...item,
             }
             if (item.book_available == 1) {
-              if (isInPricingQueueConfig(item.event_id)) {
-                LibNavigation.navigateForResult('event/queue_pricing', { event_id: item?.event_id, autoPass: false }).then((v) => {
-                  const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time) * 1000);
-                  EventCountdownProperty.countdownTime.set(expTimestamp)
-
-                  if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
-                    LibNavigation.navigate('event/artist_detail_multi', {
-                      data: newItem,
-                      subscribed: subs
-                    })
-                  } else {
-                    LibNavigation.navigate('event/artist_detail', {
-                      data: newItem,
-                      subscribed: subs
-                    })
-                  }
+              if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
+                LibNavigation.navigate('event/artist_detail_multi', {
+                  data: newItem,
+                  subscribed: subs,
+                  url: item?.url_detail
                 })
               } else {
-                if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
-                  LibNavigation.navigate('event/artist_detail_multi', {
-                    data: newItem,
-                    subscribed: subs
-                  })
-                } else {
-                  LibNavigation.navigate('event/artist_detail', {
-                    data: newItem,
-                    subscribed: subs
-                  })
-                }
+                LibNavigation.navigate('event/artist_detail', {
+                  data: newItem,
+                  subscribed: subs,
+                  url: item?.url_detail
+                })
               }
+              // }
             } else {
               LibToastProperty.show(esp.lang("event/artist_detail", "book_available", moment(item?.start_booking).serverFormat("DD MMMM YYYY HH:mm:ss")))
             }

package/event/artist_detail.tsx

@@ -8,6 +8,7 @@ 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';
@@ -16,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';
@@ -23,6 +25,7 @@ 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';
@@ -37,8 +40,7 @@ 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()
 
@@ -47,12 +49,31 @@ export default function m(props: EventArtist_detailProps): 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) => {
@@ -71,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)
@@ -116,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,
     }
@@ -156,7 +177,7 @@ export default function m(props: EventArtist_detailProps): any {
 
     return {
       order_type: eventConfig?.order_type?.ticket,
-      tax: conf?.tax ?? getSelectedTicket()?.tax ?? data?.tax ?? 0,
+      tax: conf?.tax ?? getSelectedTicket()?.tax ?? getResult()?.tax ?? 0,
       dataBookingEvent: { ...dataPost, qty },
       subscribed,
       fee_platform: conf?.fee_platform_amount != null
@@ -165,8 +186,8 @@ export default function m(props: EventArtist_detailProps): any {
           fee_platform_type: conf.fee_platform_type || "NONE",
         }
         : {
-          fee_platform_amount: data?.fee_platform_amount || 0,
-          fee_platform_type: data?.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",
@@ -184,7 +205,7 @@ export default function m(props: EventArtist_detailProps): any {
       {
         type_ticket: selectedTicket?.type,
         ondate: selectedTicket?.list?.ondate,
-        event_id: data?.event_id,
+        event_id: getResult()?.event_id,
         qty,
         data: dataPost,
         price_id: selectedTicket?.price_id
@@ -198,13 +219,13 @@ export default function m(props: EventArtist_detailProps): any {
 
   function curlPriceConfig(price_id: string): Promise<any> {
     return new Promise((resolve) => {
-      if (!data?.url_price_config) {
+      if (!getResult()?.url_price_config) {
         resolve({})
         return
       }
 
       new LibCurl(
-        data.url_price_config,
+        getResult().url_price_config,
         null,
         (res) => {
           resolve(res?.[price_id] || {})
@@ -255,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"))
         })
       }
@@ -399,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>
     )
@@ -414,178 +435,180 @@ 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
-                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?.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', }}>
-                        <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', }}>
+                          <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>
+                          }
+                          {
+                            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/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 != "" && 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>
+                        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>
-                    }
+                      {
+                        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 })} >
-            {
-              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>
-                      :
-                      <>
-                        {
-                          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} />
+                    </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 ?
+                  <>
+                    {
+                      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>
-                            </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>
-            }
+                              :
+                              <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(result?.start_booking).serverFormat('DD MMMM YYYY HH:mm '))}</Text>
+                  </View>
+              }
+            </View>
           </View>
-        </View>
-      </LibSlidingup>
+        </LibSlidingup>
 
-    </View>
+      </View>
+    </EventQueue>
   )
 }