esoftplay-event 0.0.2 → 0.0.3

package/event/artist_detail_multi.tsx

@@ -1,11 +1,13 @@
 // withHooks
 
 import { applyStyle } from 'esoftplay';
+import { EventAlert } from 'esoftplay/cache/event/alert/import';
 import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
-import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
 import { EventHeader } from 'esoftplay/cache/event/header/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';
@@ -14,6 +16,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';
@@ -26,7 +29,7 @@ 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_detail_multiProps {
@@ -75,29 +78,45 @@ const taskAdditional = UseTasks()
 export default function m(props: EventArtist_detail_multiProps): any {
   moment().locale('id')
   let showSchedule = React.useRef<LibSlidingup>(null)
-  const { data, subscribed } = LibNavigation.getArgsAll(props)
-  const startBooking = moment(data?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss')
+  const { url, data, subscribed } = LibNavigation.getArgsAll(props)
+  const [result, setResult, getResult] = useLazyState<any>(data)
+  const [startBooking, setStartBooking] = useLazyState(moment(getResult()?.start_booking).serverFormat('YYYY-MM-DD HH:mm:ss'))
   const date = moment().localeFormat('YYYY-MM-DD HH:mm:ss')
 
   const [priceList, setPriceList, getPriceList] = useSafeState<PriceList>()
   const [, setDataPostBooking, getDataPostBooking] = useLazyState<any>([])
   const [dataAddition, setDataAddition] = useSafeState<any>([])
   const [showAll, setShowAll] = useSafeState<any>({});
+  const [loading, setLoading] = useSafeState<boolean>(false)
 
 
   useEffect(() => {
     EventConfigProperty.curlConfig('v2/config_order_type')
-    loadDataPrice()
-    return () => { EventCountdownProperty.releaseQueue.trigger() }
+    loadResult()
   }, [])
 
+  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) => {
+        LibToastProperty.show(err?.message)
+        LibNavigation.back()
+      })
+    }
+  }
+
 
   let dataEvent: any = {
-    event_id: data?.event_id,
-    event_title: data?.event_title,
-    charge_payment: data?.charge_payment,
-    charge_payment_type: data?.charge_payment_type,
-    images: [{ image: data?.image }],
+    event_id: getResult()?.event_id,
+    event_title: getResult()?.event_title,
+    charge_payment: getResult()?.charge_payment,
+    charge_payment_type: getResult()?.charge_payment_type,
+    images: [{ image: getResult()?.image }],
   }
 
   const [ticketSeat, resetTicketSeat] = taskSeat((item: any) => new Promise((next) => {
@@ -156,7 +175,7 @@ export default function m(props: EventArtist_detail_multiProps): any {
   })
 
   const [ticketAdditional, resetTicketAdditional] = taskAdditional((item: any) => new Promise((next) => {
-    if (data?.has_addition == 1 || item.has_addition && item.has_addition == 1) {
+    if (getResult()?.has_addition == 1 || item.has_addition && item.has_addition == 1) {
       LibNavigation.navigateForResult('event/additional', {
         event_id: dataEvent?.event_id,
         qty: item.qty,
@@ -177,20 +196,59 @@ export default function m(props: EventArtist_detail_multiProps): any {
     if (dataAddition?.length > 0) {
       dataEvent.addition = dataAddition
     }
-    LibNavigation.navigate('payment/ticket_multi', {
+    let args: any = {
       order_type: EventConfigProperty?.state()?.get()?.order_type?.ticket,
       fee_platform: {
-        fee_platform_amount: data?.fee_platform_amount,
-        fee_platform_type: data?.fee_platform_type,
+        fee_platform_amount: getResult()?.fee_platform_amount,
+        fee_platform_type: getResult()?.fee_platform_type,
       },
       subscribed: subscribed,
       dataEvent: dataEvent,
       dataTicket: getDataPostBooking(),
+    }
+
+    const selectedPriceIds = getDataPostBooking().filter((x: any) => x.selected == 1).map((x: any) => x.price_id)
+    curlPriceConfig(selectedPriceIds, (filteredFee) => {
+      const editedDataTicket = getDataPostBooking().map((item: any) => {
+        const priceId = item.price_id;
+        if (filteredFee?.[priceId]) {
+          return {
+            ...item,
+            ...filteredFee?.[priceId]
+          };
+        }
+        return item;
+      })
+      args["fee_platform"] = undefined
+      args["dataTicket"] = editedDataTicket
+      LibNavigation.navigate('payment/ticket_multi', args)
     })
   })
 
-  function loadDataPrice() {
-    new LibCurl(data?.price_list_url, null, (res, msg) => {
+  function curlPriceConfig(price_ids: string[], onDone: (data: any) => void) {
+    setLoading(true)
+    if (getResult()?.url_price_config) {
+      new LibCurl(getResult()?.url_price_config, null, (res, msg) => {
+        setLoading(false)
+        let filteredFee: any = {}
+        if (res) {
+          filteredFee = Object.fromEntries(
+            price_ids.flatMap(k => res[k] ? [[k, res[k]]] : [])
+          )
+        }
+        onDone(filteredFee)
+      }, (err) => {
+        setLoading(false)
+        LibToastProperty.show(err?.message)
+      })
+    } else {
+      setLoading(false)
+      onDone({})
+    }
+  }
+
+  function loadDataPrice(price_list_url: string) {
+    new LibCurl(price_list_url, null, (res, msg) => {
 
       setPriceList(res)
     }, (err) => {
@@ -225,23 +283,23 @@ export default function m(props: EventArtist_detail_multiProps): 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"))
         })
       }
@@ -333,18 +391,43 @@ export default function m(props: EventArtist_detail_multiProps): any {
             item?.status == 1 && (ticketWithDate || ticketSpecial) && itemC.selected == 1 &&
             <View style={applyStyle({ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' })}>
               <TouchableOpacity onPress={() => {
-                // min()
                 let qty = 1
-                if (itemC.qty <= item.qty_min) {
-                  qty = Number(item.qty_min)
+                if (Number(itemC.qty) - 1 <= 0) {
+                  // set 0 & unselect tiket
+                  qty = 0
+
+                  const data = new LibObject(priceList)
+                    .update((itemList) => {
+                      itemList.selected = 0
+                      itemList.qty = 0
+                      itemList.seat_autopick = item.config?.seat_autopick
+                      itemList.use_seat = item.use_seat
+                      return itemList
+                    })(i, 'list', iC)
+                    .update((priceTypeItem) => {
+                      return ({
+                        ...priceTypeItem,
+                        selected: priceTypeItem.list.some((item: any) => item.selected == 1) ? 1 : 0
+                      })
+                    })(i)
+                    .value()
+
+                  setPriceList(data)
+
                 } else {
-                  qty = Number(itemC.qty) == 1 ? 1 : Number(itemC.qty) - 1
-                }
+                  // patuhi qty_min
+                  if (itemC.qty <= item.qty_min) {
+                    qty = Number(item.qty_min)
+                  } else {
+                    qty = Number(itemC.qty) - 1
+                  }
 
-                setPriceList(LibObject.set(getPriceList(), qty)(i, 'list', iC, 'qty'))
+                  // set qty baru
+                  setPriceList(LibObject.set(getPriceList(), qty)(i, 'list', iC, 'qty'))
+                }
 
               }}>
-                <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>
@@ -362,7 +445,7 @@ export default function m(props: EventArtist_detail_multiProps): any {
                 setPriceList(LibObject.set(getPriceList(), qty)(i, 'list', iC, 'qty'))
 
               }}>
-                <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>
@@ -382,7 +465,7 @@ export default function m(props: EventArtist_detail_multiProps): 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>
     )
@@ -397,152 +480,178 @@ export default function m(props: EventArtist_detail_multiProps): 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)
+            getResult()?.images_artist && getResult()?.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 }}>
+                {
+                  getResult()?.images_artist && getResult()?.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: result?.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 && 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
-                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', }}>
-                        <Text allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</Text>
-                        {
-                          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} >
+              <EventAlert
+                color={LibStyle.colorPrimary}
+                msg={esp.lang("event/ticket_list2", "u_can_choose_multiple")}
+                style={{ marginHorizontal: 15, marginBottom: 0 }}
+                useIcon
+              />
+              {
+                priceList?.length > 0 && 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
+                  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 }}>
                         {
-                          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', }}>
+                          <Text allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</Text>
+                          {
+                            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 != "" &&
+                          <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((itemC: any, iC: number) => renderItem(itemC, iC, item, i))
+                      }
+
+                      {
+                        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>
-                    {
-                      displayedData?.map((itemC: any, iC: number) => renderItem(itemC, iC, item, i))
-                    }
 
+                    </View>
+                  )
+                })
+              }
+            </ScrollView>
+            <View style={applyStyle({ flexDirection: 'row', paddingVertical: 10 })} >
+              {
+                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 }} />
+                          }
+                        </>
                     }
-
+                  </>
+                  :
+                  <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>
-                )
-              })
-            }
-          </ScrollView>
-          <View style={applyStyle({ flexDirection: 'row', paddingVertical: 10 })} >
-            {
-              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>
           </View>
-        </View>
-      </LibSlidingup>
+        </LibSlidingup>
 
-    </View>
+      </View>
+    </EventQueue>
   )
 }