esoftplay-event 0.0.1 → 0.0.2

package/event/artist.tsx

@@ -14,6 +14,7 @@ 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';
@@ -36,15 +37,14 @@ export default function m(props: BigbangArtistProps): any {
 
   const { title, has_addition } = LibNavigation.getArgsAll(props)
   const url = LibNavigation.getArgs(props, 'url', 'event_artist')
-  const regex = /(\d+)$/;
-  const match = url.match(regex);
-  const [event_id] = useSafeState(match?.[1])
 
   function loadData(): void {
     /* get detail event untuk dapat config antrian */
+
     new LibCurl(url, null,
       (res) => {
-        new LibCurl(res?.[0]?.url_event || `event_detail/${event_id}`, null, (res) => {
+        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)
@@ -66,7 +66,11 @@ export default function m(props: BigbangArtistProps): any {
   }
 
   useEffect(() => {
-    loadData?.()
+    if (esp.isDebug("") && UserClass?.state()?.get()?.email == "bagus@fisip.net") {
+      LibNavigation.replace('event/artistv2')
+    } else {
+      loadData?.()
+    }
   }, [])
 
   const itemWidth = (LibStyle.width - 2)
@@ -95,8 +99,8 @@ export default function m(props: BigbangArtistProps): any {
             }
             if (item.book_available == 1) {
               if (isInPricingQueueConfig(item.event_id)) {
-                LibNavigation.navigateForResult('event/queue_pricing', { event_id: event_id, autoPass: false }).then((v) => {
-                  EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
+                LibNavigation.navigateForResult('event/queue_pricing', { event_id: item?.event_id, autoPass: false }).then((v) => {
+                  EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
                   if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
                     LibNavigation.navigate('event/artist_detail_multi', {
                       data: newItem,

package/event/artist_detail.tsx

@@ -135,13 +135,11 @@ export default function m(props: EventArtist_detailProps): any {
           subscribed: subscribed
         })
       } else {
-        LibNavigation.navigateForResult('event/seat', {
+        LibNavigation.navigateForResult('event/seat_map_new', {
           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
+          dataPost.seat_label = value.seat_label
 
           if (data?.has_addition && data?.has_addition == 1) {
             LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: data?.event_id, qty: qty, data: dataPost }, 221).then((additions) => {
@@ -174,7 +172,7 @@ export default function m(props: EventArtist_detailProps): any {
         })
       }
     } else {
-      if (data?.has_addition && data?.has_addition == 1 || selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1) {
+      if (selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1) {
         LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: data?.event_id, qty: qty, data: dataPost, price_id: selectedTicket?.price_id }, 221).then((additions) => {
           if (additions != "") {
             dataPost.addition = additions

package/event/artist_detailv2.tsx

@@ -0,0 +1,386 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
+import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
+import { EventShare } from 'esoftplay/cache/event/share/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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/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';
+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 useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventArtist_detailv2Args {
+
+}
+export interface EventArtist_detailv2Props {
+
+}
+export default function m(props: EventArtist_detailv2Props): any {
+  const { url, subscribed } = LibNavigation.getArgsAll(props)
+  const [priceList, setPriceList] = useSafeState<any>()
+  const [detailArtist, setDetailArtist] = useSafeState<any>()
+
+  let showSchedule = React.useRef<LibSlidingup>(null)
+  const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
+  const [showAll, setShowAll] = useSafeState<any>({});
+  const [qty, setQty] = useSafeState<any>(1)
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  useEffect(() => {
+    loadDataArtist()
+  }, [])
+
+  esp.log({ priceList, detailArtist });
+
+  function loadDataArtist(): void {
+    new LibCurl(url, null, (res) => {
+      setRefreshing(false)
+      setDetailArtist(res)
+      loadDataPrice(res?.url_price)
+    }, (err) => {
+      setRefreshing(false)
+      LibToastProperty.show(err?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function loadDataPrice(url: string) {
+    new LibCurl(url, null, (res, msg) => {
+
+      const updatedData = res?.map((item: any) => ({
+        ...item,
+        list: item?.list?.map((itemList: any) => ({
+          ...itemList,
+          index_id: item?.price_id + "-" + itemList?.ondate
+        }))
+      }));
+
+      setPriceList(updatedData)
+    }, (err) => {
+      LibToastProperty.show(err?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function loadDataPriceConfig(url: string) {
+    let post = {
+      price_ids: selectedTicket?.price_id,
+      event_id: 443
+    }
+    LibProgress.show("Mohon tunggu")
+    new LibCurl(url, post, (res, msg) => {
+      esp.log({ res, url });
+      LibProgress.hide()
+    }, (err) => {
+      LibProgress.hide()
+      LibToastProperty.show(err?.message)
+
+    }, 1)
+  }
+
+  const maxDisplay = 3;
+  const handleShowAll = (price_id: any) => {
+    setShowAll((prevShowAll: any) => ({
+      ...prevShowAll,
+      [price_id]: !prevShowAll[price_id],
+    }));
+  };
+
+
+  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)
+    }
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadDataArtist()
+  }
+
+  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.index_id == selectedTicket?.list?.index_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>
+    )
+  }
+
+  const bgHeight = LibStyle.width * 9 / 16
+
+  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: detailArtist?.images, index: i })}>
+        <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
+      </TouchableOpacity>
+    )
+  }
+
+  let share = [
+    {
+      icon: 'icons/ic_facebook.png',
+      title: 'Facebook',
+      onPress: () => { EventShare.facebook(url) }
+    },
+    {
+      icon: 'icons/ic_whatsapp.png',
+      title: 'Whatsapp',
+      onPress: () => { EventShare.whatsapp(url) }
+    },
+    {
+      icon: 'icons/ic_twitter.png',
+      title: 'Twitter',
+      onPress: () => { EventShare.twitter(url) }
+    },
+    {
+      icon: 'icons/ic_copy.png',
+      title: esp.lang("event/artist_detail", "copy"),
+      onPress: () => {
+        LibUtils.copyToClipboard(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 })}>
+        <TouchableOpacity onPress={item.onPress} >
+          <LibPicture style={applyStyle({ resizeMode: 'contain', height: 25, width: 25, borderRadius: 12.5, backgroundColor: 'white' })} source={esp.assets(item.icon)} />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EventHeader title={esp.lang("event/artist_detail", "title")} subtitle={detailArtist?.name} />
+      <ScrollView refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+
+        {
+          detailArtist?.images && detailArtist?.images?.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 }}>
+              {
+                detailArtist?.images && detailArtist?.images?.map(renderImages)
+              }
+            </LibCarrousel>
+            :
+            <Pressable onPress={() => LibNavigation.navigate('lib/gallery', { image: detailArtist?.image })} >
+              <LibPicture
+                style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width, backgroundColor: '#f2f3f4' })}
+                source={{ uri: detailArtist?.image }} />
+            </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" })}>{detailArtist?.name}</Text>
+        {
+          detailArtist?.description != "" &&
+          <ScrollView>
+            <LibWebview onFinishLoad={() => { }} source={{ html: detailArtist?.description }} />
+          </ScrollView>
+        }
+        {
+          detailArtist?.video != "" &&
+          <>
+            <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: detailArtist?.video })} >
+              <LibPicture source={{ uri: LibVideoProperty.getUrlThumbnail(detailArtist?.video) }} style={applyStyle({ height: LibStyle.width * 9 / 16, width: LibStyle.width - 40, marginHorizontal: 20, resizeMode: 'cover' })} />
+            </TouchableOpacity>
+          </>
+        }
+
+
+      </ScrollView>
+      <View style={{ flexDirection: 'row', padding: 10, backgroundColor: 'white' }} >
+        <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+          EventIndexProperty.isLogin(() => {
+            showSchedule.current?.show()
+          })
+        }} style={{ backgroundColor: LibStyle.colorGreen }} />
+      </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?.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 (
+                  <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', }}>
+                        <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.name}</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.hasOwnProperty("price_type_info") && item.price_type_info != "" &&
+                        <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
+                          <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{item.price_type_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>
+                    }
+
+                  </View>
+                )
+              })
+            }
+          </ScrollView>
+          <View style={applyStyle({ paddingVertical: 10 })} >
+            <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
+              EventIndexProperty.isLogin(() => {
+                if (selectedTicket) {
+                  loadDataPriceConfig(selectedTicket?.url_config)
+                }
+                // proceedToPayment()
+              })
+            }} style={{ backgroundColor: LibStyle.colorGreen, marginTop: 2, marginHorizontal: 15 }} />
+          </View>
+        </View>
+      </LibSlidingup>
+
+    </View>
+  )
+}

package/event/artistv2.tsx

@@ -0,0 +1,162 @@
+// withHooks
+
+import { EventFirebase_socket } 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';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+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 esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+moment().locale('id')
+
+
+export interface EventArtistv2Props {
+
+}
+
+export default function m(props: EventArtistv2Props): any {
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>('')
+  const { isInPricingQueueConfig } = EventFirebase_socket()
+
+  const { title, has_addition } = LibNavigation.getArgsAll(props)
+  const url = LibNavigation.getArgs(props, 'url', 'https://storage.googleapis.com/bbo-test-images/images/modules/api/event_artist/411.json')
+
+  function loadData(): void {
+    /* get detail event untuk dapat config antrian */
+
+    // new LibCurl(url, null,
+    new LibCurl('v2/event_artist&event_id=443', null,
+      (res) => {
+        esp.log({ res });
+        // EventFirebase_socketProperty.eventIdQueue.set(res?.[0]?.event_id)
+        // if (res.allotment) {
+        //   esp.modProp("event/firebase_socket").userIdKeyReplacer.set({
+        //     t: Number(res.allotment.t),
+        //     s: Number(res.allotment.s),
+        //     priority: 1
+        //   })
+        // }
+
+        setResult(res)
+      }, (err) => {
+        setError(err?.message)
+      }, 1)
+  }
+
+  useEffect(() => {
+    loadData?.()
+  }, [])
+
+  const itemWidth = (LibStyle.width - 2)
+  const itemHeight = itemWidth * 9 / 16
+
+  let subs = {
+    is_subscribed: result?.config?.is_subscribed,
+    is_subscribed_default: result?.config?.is_subscribed_default,
+    is_subscribed_label: result?.config?.is_subscribed_label
+  }
+  const width = LibStyle?.width
+  const sliderHeight = 0.50 * width
+
+  function renderIt(item: any, i: number) {
+    const styleId_Z2g4Hs7: any = { backgroundColor: '#FFC523', width: itemWidth, height: itemHeight, margin: 0.5, justifyContent: 'center', alignItems: 'center' }
+    let isNotAvailable = item?.status_error != ""
+    const handlePress = () => {
+      if (isNotAvailable) {
+        LibToastProperty.show(esp.lang("event/artist", "ticket_not_available"));
+      } else {
+        EventIndexProperty.isLogin(async () => {
+          // if (isInPricingQueueConfig(item.event_id)) {
+          //   LibNavigation.navigateForResult('event/queue_pricing', {
+          //     event_id: item?.event_id,
+          //     autoPass: false,
+          //   });
+          // }
+          // EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'));
+          LibNavigation.navigate(
+            item?.config?.multiprice == 1
+              ? 'event/artist_detail_multi'
+              :
+              'event/artist_detailv2',
+            { url: item.url, subscribed: subs }
+          );
+        });
+      }
+    };
+
+    if (item?.images?.length > 1) {
+      return (
+        <LibCarrousel
+          key={i}
+          delay={4000}
+          style={{ height: sliderHeight, width: width }}
+          autoplay
+        >
+          {
+            item?.images?.map((item1: any, ii: number) => {
+              return (
+                <TouchableOpacity key={ii} onPress={handlePress} >
+                  <LibPicture key={ii} source={{ uri: item1 }} style={{ opacity: isNotAvailable ? 0.3 : 1, height: sliderHeight, width: width, resizeMode: 'cover', backgroundColor: "#f1f2f3" }} />
+                </TouchableOpacity>
+              )
+            })
+          }
+        </LibCarrousel>
+      )
+    } else if (item?.images?.length == 1) {
+      return (
+        <TouchableOpacity key={i} onPress={handlePress} >
+          <LibPicture style={{opacity: isNotAvailable ? 0.3 : 1, height: sliderHeight, width: width, resizeMode: 'cover', backgroundColor: "#f1f2f3" }} source={{ uri: item.images[0] }} />
+        </TouchableOpacity>
+      )
+    } else {
+      return (
+        <TouchableOpacity key={i} onPress={handlePress} style={styleId_Z2g4Hs7}>
+          <Text allowFontScaling={false} numberOfLines={2} style={styleId_2cYE4h}>{item.title}</Text>
+        </TouchableOpacity>
+      )
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: 'white' }} >
+      <EventHeader title={title ? title : result?.name} iconShare={result?.url_share_artist && result?.url_share_artist !== ""}
+        onPressShare={() => {
+          LibUtils.share(result?.url_share_artist)
+        }} />
+      {
+        !result && !error ? <LibLoading /> :
+          // <ScrollView>
+          //   {
+          //     result?.map(renderIt)
+          //   }
+          // </ScrollView>
+          <LibList
+            data={result?.list}
+            // keyExtractor={(item) => item.id}
+            onRefresh={loadData}
+            staticHeight={itemHeight + 1}
+            renderItem={renderIt}
+            ListEmptyComponent={
+              <EventMessage message={error} />
+            }
+          />
+      }
+    </View>
+  )
+}
+const styleId_2cYE4h: any = { padding: 15, color: 'white', fontSize: 24 }

package/event/button_order_detail.tsx

@@ -0,0 +1,43 @@
+// withHooks
+
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
+import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventButton_order_detailArgs {
+
+}
+export interface EventButton_order_detailProps {
+  onPress: () => void
+  title: string
+  info?: string
+  color: any,
+  icon: any
+}
+export default function m(props: EventButton_order_detailProps): any {
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <View style={{ borderWidth: 1, borderColor: '#ccc', margin: 15, borderRadius: 7, marginBottom: 0, overflow: 'hidden', flexDirection: 'row' }}>
+        <LibGradient
+          colors={[props.color, props.color, "#f1f2f3",]}
+          direction='left-to-right'
+          style={{ margin: 3, borderRadius: 5, padding: 7, flex: 4, alignContent: 'center', justifyContent: 'center' }}
+        >
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ color: EventOrder_itemProperty.textColor(props?.color), fontSize: 16, fontWeight: 'bold' }}>{props.title}</Text>
+          {
+            props.info != "" &&
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ color: EventOrder_itemProperty.textColor(props?.color), fontSize: 12, fontWeight: 'normal' }}>{props?.info}</Text>
+          }
+        </LibGradient>
+        <View style={{ flex: 1, margin: 3, borderRadius: 5, ...LibStyle.elevation(2), backgroundColor: props.color, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+          {/* <LibIcon name={"dice-multiple"} size={40} color={EventOrder_itemProperty.textColor(props.color)} style={{ opacity: 1 }} /> */}
+          <LibIcon name={props.icon} size={40} color={EventOrder_itemProperty.textColor(props.color)} style={{ opacity: 1 }} />
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}