esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/artist/detail.tsx

@@ -0,0 +1,522 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
+import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+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 { LibShare } from 'esoftplay/cache/lib/share/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 { LibVideoProperty } from 'esoftplay/cache/lib/video/import';
+import { LibWebview } from 'esoftplay/cache/lib/webview/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventArtist_detailProps {
+
+}
+
+export default function m(props: EventArtist_detailProps): any {
+  moment().locale('id')
+  let showSchedule = React.useRef<ComponentSlidingup>(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 date = moment().localeFormat('YYYY-MM-DD HH:mm:ss')
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
+  const [priceList, setPriceList] = useSafeState<any>()
+  const [showAll, setShowAll] = useSafeState<any>({});
+
+  useEffect(() => {
+    loadDataPrice()
+    BboConfigProperty.curlConfig('v2/config_order_type')
+    return () => { EventCountdownProperty.releaseQueue.trigger() }
+  }, [])
+
+  function sortByStatus(data: any) {
+    // Fungsi sorting untuk memastikan status 1 di atas, lainnya di bawah
+    const statusSorter = (a: any, b: any) => {
+      if (a.status == 1 && b.status != 1) return -1; // a = 1, b bukan 1 -> a di atas
+      if (a.status != 1 && b.status == 1) return 1;  // a bukan 1, b = 1 -> b di atas
+      return a.status - b.status; // Urutkan status selain 1 secara alami
+    };
+
+    return data
+      .map((item: any) => {
+        // Sorting array 'list' di dalam setiap item
+        const sortedList = item?.list?.sort(statusSorter);
+        return { ...item, list: sortedList };
+      })
+      .sort(statusSorter); // Sorting array utama
+  }
+
+
+  function loadDataPrice() {
+    new LibCurl(data?.price_list_url, null, (res, msg) => {
+
+      let stop = false
+      let arr = sortByStatus(res)
+
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        if (item?.status == 1) {
+          for (let it = 0; it < item?.list.length; it++) {
+            const element = item?.list[it];
+            if (element?.status == 1) {
+              let replaceList = LibObject.set(item, element)('list')
+              setQty(item?.qty_min)
+              setSelectedTicket(replaceList)
+              stop = true
+              break;
+            }
+          }
+          if (stop) {
+            break;
+          }
+        }
+      }
+
+      setPriceList(res)
+    }, (err) => {
+      LibToastProperty.show(err?.message)
+      LibNavigation.back()
+    })
+  }
+
+  function proceedToPayment() {
+    if (!selectedTicket) {
+      if (priceList?.every((v: any) => v?.status == 0)) {
+        LibToastProperty.show(esp.lang("event/artist_detail", "ticket_not_available"))
+        return
+      }
+      LibToastProperty.show(esp.lang("event/artist_detail", "select_tiket_first"))
+      return
+    }
+
+    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,
+      selected_ticket: selectedTicket,
+      qty: qty,
+    }
+
+    if (selectedTicket?.config?.seat_autopick == 1 && qty > 1) {
+      dataPost.adjacent_seats = 1
+    }
+
+    if (selectedTicket?.use_seat == 1) {
+      if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {
+        LibNavigation.navigate('payment/ticket', {
+          order_type: bboConfig?.order_type?.ticket,
+          tax: getSelectedTicket()?.tax || data?.tax,
+          dataBookingEvent: { ...dataPost, qty: qty },
+          subscribed: subscribed
+        })
+      } else {
+        LibNavigation.navigateForResult('event/seat', {
+          url: 'event_seat',
+          dataTicket: dataPost,
+        }).then((value) => {
+          dataPost.row_id = value.row_id
+          dataPost.column_id = value.column_id
+          dataPost.seat_name = value.seat_name
+
+          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: bboConfig?.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: bboConfig?.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 {
+      if (data?.has_addition && data?.has_addition == 1 || 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: bboConfig?.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: bboConfig?.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
+        })
+      }
+    }
+  }
+
+  function add(): void {
+    let hasQuota = getSelectedTicket().quota > 0
+    const min = hasQuota ? Number(getSelectedTicket()?.quota) - Number(getSelectedTicket()?.quota_used) : Number(getSelectedTicket()?.qty_max)
+    if (qty < Math.min(min, Number(getSelectedTicket()?.qty_max))) {
+      setQty(Number(qty) + 1)
+    }
+  }
+
+  function min(): void {
+    if (qty <= getSelectedTicket()?.qty_min) {
+      setQty(Number(getSelectedTicket()?.qty_min))
+    } else {
+      setQty(qty == 1 ? 1 : qty - 1)
+    }
+  }
+
+
+  let share = [
+    {
+      icon: 'icons/ic_facebook.png',
+      title: 'Facebook',
+      onPress: () => { LibShare.facebook(data?.url) }
+    },
+    {
+      icon: 'icons/ic_whatsapp.png',
+      title: 'Whatsapp',
+      onPress: () => { LibShare.whatsapp(data?.url) }
+    },
+    {
+      icon: 'icons/ic_twitter.png',
+      title: 'Twitter',
+      onPress: () => { LibShare.twitter(data?.url) }
+    },
+    {
+      icon: 'icons/ic_copy.png',
+      title: esp.lang("event/artist_detail", "copy"),
+      onPress: () => {
+        LibUtils.copyToClipboard(data?.url).then((v) => {
+          LibToastProperty.show(esp.lang("event/artist_detail", "alert"))
+        })
+      }
+    },
+  ]
+
+  function renderShare(item: any, i: number) {
+    return (
+      <View key={i} style={applyStyle({ marginRight: 10 })}>
+        <ComponentTouchable onPress={item.onPress} >
+          <LibPicture style={applyStyle({ resizeMode: 'contain', height: 25, width: 25, borderRadius: 12.5, backgroundColor: 'white' })} source={esp.assets(item.icon)} />
+        </ComponentTouchable>
+      </View>
+    )
+  }
+
+  function renderItem(item: any, itemT: any, iT: number) {
+    let ticketWithDate = item.price_date == 1 && item.use_code == 0
+    let ticketSpecial = item.price_date == 0 && item.use_code == 0
+
+    let _selectedTicket = item.price_id == selectedTicket?.price_id && itemT.date_id == selectedTicket?.list?.date_id
+
+    let colorDefault = _selectedTicket ? "#FFE9AD" : '#fff'
+    let colorBackground = item?.status != 1 ? LibStyle.colorLightGrey : itemT?.status != 1 ? LibStyle.colorLightGrey : colorDefault
+    let textOpacity = /* item?.status == 1 ? 1 : */ itemT?.status == 1 ? 1 : 0.3
+
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          let itemTicket = {
+            ...item
+          }
+          let replaceList = LibObject.set(itemTicket, itemT)('list')
+          let msg = itemT?.status == 0 ? esp.lang("event/artist_detail", "sold_out") : esp.lang("event/artist_detail", "coming_soon")
+
+          // kondisi untuk tipe tiket yang ada tanggalnya
+          if (item?.status == 1 && itemT?.status == 1) {
+            setSelectedTicket(replaceList)
+            setQty(item.qty_min)
+          } else if (item?.status == 0) {
+            LibToastProperty.show(msg)
+          } else if (item?.status == 2) {
+            LibToastProperty.show(msg)
+          }
+        }} 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' })}>
+                <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 &&
+                  <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>
+                  </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>
+              </View>
+            </>
+        }
+
+        <View style={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
+          {
+            (itemT?.status == 1 || itemT?.status == 0) &&
+            <Text allowFontScaling={false} style={applyStyle({ opacity: ticketWithDate ? textOpacity : 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: _selectedTicket ? "#3ea4dc" : (itemT.price == 0 ? LibStyle.colorGreen : '#999') })} >{itemT.price == 0 ? esp.lang("event/ticket_list", "free") : LibUtils.money(itemT.price, item.currency)}</Text>
+          }
+          {
+            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' })}>
+                  <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' })}>
+                  <LibIcon name="plus" color="#16a085" />
+                </View>
+              </TouchableOpacity>
+            </View>
+          }
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  if (!priceList) {
+    return <LibLoading />
+  }
+
+  const bgHeight = LibStyle.width * 9 / 16
+
+  function renderImages(item: any, i: number) {
+    const styleId_Z1ecB7O: any = { height: bgHeight, width: LibStyle.width, resizeMode: 'cover' }
+    return (
+      <ComponentTouchable key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: data?.images_artist, index: i })}>
+        <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
+      </ComponentTouchable>
+    )
+  }
+
+  const maxDisplay = 3;
+  const handleShowAll = (price_id: any) => {
+    setShowAll((prevShowAll: any) => ({
+      ...prevShowAll,
+      [price_id]: !prevShowAll[price_id],
+    }));
+  };
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ComponentHeader 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' })}>
+          {
+            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" })}>{data?.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' })} >
+
+        {
+          data?.book_available == 1 ?
+            <ComponentButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+              UserProfileProperty.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>
+
+      <ComponentSlidingup 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>
+                        }
+                        {
+                          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>
+                    {
+                      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 })} >
+            {
+              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>
+                      :
+                      <ComponentButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+                        UserProfileProperty.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>
+      </ComponentSlidingup>
+
+    </View>
+  )
+}