esoftplay-event 0.0.0-a → 0.0.0-b

package/event/artist_detail_multi.tsx

@@ -0,0 +1,548 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
+import { EventHeader } from 'esoftplay/cache/event/header/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 { 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 { UseTasks } from 'esoftplay/cache/use/tasks/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventArtist_detail_multiProps {
+
+}
+
+export type PriceList = Array<{
+  "price_id": string,
+  "type": string,
+  "price_date": string,
+  "currency": string,
+  "use_seat": string,
+  "use_code": string,
+  "global_quota": string,
+  "info": string,
+  "term": [],
+  "image_map": string,
+  "price": string,
+  "qty_min": string,
+  "qty_max": string,
+  "tax": string,
+  "date_start": string,
+  "date_end": string,
+  "status": number,
+  "config": {
+    "seat_autopick": number,
+    "seat_autopick_start": string,
+  },
+  "list": Array<{
+    "event_artist_id": string,
+    "ondate": string,
+    "image": string,
+    "date_id": number,
+    "price": string,
+    "quota": string,
+    "quota_used": string,
+    "status": number,
+  }>,
+  "quota_used": string,
+}>
+
+
+const taskSeat = UseTasks()
+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 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>({});
+
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_order_type')
+    loadDataPrice()
+    return () => { EventCountdownProperty.releaseQueue.trigger() }
+  }, [])
+
+
+  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 }],
+  }
+
+  const [ticketSeat, resetTicketSeat] = taskSeat((item: any) => new Promise((next) => {
+    if (item.use_seat == 1) {
+      if (item.seat_autopick == 0) {
+        LibNavigation.navigateForResult('event/seat_map', {
+          url: 'event_seat',
+          dataTicket: {
+            ...dataEvent,
+            qty: item.qty,
+            selected_ticket: {
+              price_id: item.price_id,
+              type: item.type,
+              list: {
+                ondate: item.ondate
+              }
+            }
+          },
+        }, item.list_id)
+          .then((value: any) => {
+            const merged = { ...item, ...value }
+            let a = LibObject.replaceItem(getDataPostBooking(), (it) => it.list_id == item.list_id, merged)()
+            setDataPostBooking(a)
+            next()
+          })
+      } else {
+        let a = LibObject.replaceItem(getDataPostBooking(), (it) => it.list_id == item.list_id, item)()
+        setDataPostBooking(a)
+        next()
+      }
+    } else {
+      let a = LibObject.replaceItem(getDataPostBooking(), (it) => it.list_id == item.list_id, item)()
+      setDataPostBooking(a)
+      next()
+    }
+  }), () => {
+
+    const transformedData: any[] = [];
+    priceList?.filter((y: any) => y.selected == 1)?.map((item: any) => {
+      item?.list?.filter((x: any) => x.selected == 1)?.map((listItem: any) => {
+        transformedData.push({
+          ...item,
+          list_id: item.price_id + " " + listItem?.ondate,
+          qty: listItem.qty,
+          ondate: listItem.ondate,
+          list: [listItem],
+        });
+      });
+    })
+
+
+    resetTicketAdditional()
+    ticketAdditional(transformedData)
+    setDataAddition([])
+
+  })
+
+  const [ticketAdditional, resetTicketAdditional] = taskAdditional((item: any) => new Promise((next) => {
+    if (data?.has_addition == 1 || item.has_addition && item.has_addition == 1) {
+      LibNavigation.navigateForResult('event/additional', {
+        event_id: dataEvent?.event_id,
+        qty: item.qty,
+        ondate: item.ondate,
+        data: dataEvent,
+        price_id: item.price_id,
+        type_ticket: item.type
+      }, item.list_id).then((value) => {
+        if (value != "") {
+          setDataAddition(dataAddition.push(JSON.parse(value)))
+        }
+        next()
+      })
+    } else {
+      next()
+    }
+  }), () => {
+    if (dataAddition?.length > 0) {
+      dataEvent.addition = dataAddition
+    }
+    LibNavigation.navigate('payment/ticket_multi', {
+      order_type: BboConfigProperty?.state()?.get()?.order_type?.ticket,
+      fee_platform: {
+        fee_platform_amount: data?.fee_platform_amount,
+        fee_platform_type: data?.fee_platform_type,
+      },
+      subscribed: subscribed,
+      dataEvent: dataEvent,
+      dataTicket: getDataPostBooking(),
+    })
+  })
+
+  function loadDataPrice() {
+    new LibCurl(data?.price_list_url, null, (res, msg) => {
+
+      setPriceList(res)
+    }, (err) => {
+      LibToastProperty.show(err?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function proceedToPayment() {
+    let newResult: any[] = [];
+    getPriceList().map((priceType: any) => {
+      let filteredList = priceType.list/* .filter((item: any) => item.selected == 1); */
+      filteredList = filteredList?.map((item: any) => ({
+        ...item,
+        type: priceType?.type,
+        tax: priceType?.tax,
+        term: priceType?.term,
+        list_id: priceType?.price_id + "-" + item.ondate,
+        price_id: priceType?.price_id
+      }))
+
+      newResult = newResult.concat(filteredList);
+    });
+
+    setDataPostBooking(newResult)
+    resetTicketSeat()
+    ticketSeat(newResult.filter((x: any) => x.selected == 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 })}>
+        <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>
+    )
+  }
+
+  function renderItem(itemC: any, iC: number, item: any, i: number) {
+    let ticketWithDate = item.price_date == 1 && item.use_code == 0
+    let ticketSpecial = item.price_date == 0 && item.use_code == 0
+
+    let _selectedTicket = itemC?.selected == 1
+
+    let colorDefault = _selectedTicket ? "#FFE9AD" : '#fff'
+    let colorBackground = item?.status != 1 ? LibStyle.colorLightGrey : itemC?.status != 1 ? LibStyle.colorLightGrey : colorDefault
+    let textOpacity = itemC?.status == 1 ? 1 : 0.3
+
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          let msg = itemC?.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 && itemC?.status == 1) {
+            const data = new LibObject(priceList)
+              .update((itemList) => {
+                itemList.selected = itemList.selected == 1 ? 0 : 1
+                itemList.qty = itemList.selected == 1 ? item.qty_min : 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 if (itemC?.status == 0) {
+            LibToastProperty.show(msg)
+          } else if (itemC?.status == 2) {
+            LibToastProperty.show(msg)
+          }
+        }} activeOpacity={itemC?.status == 1 ? 0 : 1} key={iC} style={{ borderBottomWidth: item.list.length == 1 ? 0 : 5, borderBottomColor: "#fff", flex: 1, flexDirection: 'row', backgroundColor: colorBackground, justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
+        {
+          itemC.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(itemC.ondate).localeFormat('DD')}</Text>
+              </View>
+              <View style={applyStyle({ flexDirection: 'column', flex: 1 })}>
+                {
+                  item?.status == 1 && itemC?.status != 1 &&
+                  <View style={applyStyle({ flexDirection: 'row', marginBottom: 5 })}>
+                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 5, borderWidth: 1, backgroundColor: itemC?.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: itemC?.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color:/*  itemC?.status == 2 ? "#000" :  */"#fff", fontWeight: 'bold' })}>{itemC?.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(itemC.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(itemC.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(itemC.ondate).localeFormat('YYYY')}</Text>
+                </View>
+              </View>
+            </>
+        }
+
+        <View style={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
+          {
+            (itemC?.status == 1 || itemC?.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" : (itemC.price == 0 ? LibStyle.colorGreen : '#999') })} >{itemC.price == 0 ? esp.lang("event/ticket_list", "free") : LibUtils.money(itemC.price, item.currency)}</Text>
+          }
+          {
+            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)
+                } else {
+                  qty = Number(itemC.qty) == 1 ? 1 : Number(itemC.qty) - 1
+                }
+
+                setPriceList(LibObject.set(getPriceList(), qty)(i, 'list', iC, 'qty'))
+
+              }}>
+                <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 })}>{itemC?.qty}</Text>
+              <TouchableOpacity onPress={() => {
+                // add()
+                let qty = 1
+                if (itemC.qty != item.qty_max) {
+                  if (qty != (Number(itemC.quota) - Number(itemC.quota_used))) {
+                    qty = Number(itemC?.qty) + 1
+                  }
+                } else {
+                  qty = Number(item.qty_max)
+                }
+                setPriceList(LibObject.set(getPriceList(), qty)(i, 'list', iC, 'qty'))
+
+              }}>
+                <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 (
+      <TouchableOpacity key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: data?.images_artist, index: i })}>
+        <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
+      </TouchableOpacity>
+    )
+  }
+
+  const maxDisplay = 3;
+  const handleShowAll = (price_id: any) => {
+    setShowAll((prevShowAll: any) => ({
+      ...prevShowAll,
+      [price_id]: !prevShowAll[price_id],
+    }));
+  };
+
+  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' })}>
+          {
+            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 ?
+            <EventButton 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>
+
+      <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>
+                        }
+                        {
+                          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((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>
+                )
+              })
+            }
+          </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={() => {
+                        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>
+      </LibSlidingup>
+
+    </View>
+  )
+}

package/event/badge.tsx

@@ -0,0 +1,22 @@
+// withHooks
+
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventBadgeArgs {
+
+}
+export interface EventBadgeProps {
+  counter: any
+}
+export default function m(props: EventBadgeProps): any {
+  if (props?.counter <= 0) return null
+  return (
+    <View style={{ position: 'absolute', top: 0, right: 0, height: 15, borderRadius: 10, padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed }} >
+      <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 10, letterSpacing: 0, color: "#ffffff" }} >{props?.counter > 99 ? "99+" : String(props?.counter)}</Text>
+    </View>
+  )
+
+}

package/event/button.tsx

@@ -0,0 +1,40 @@
+// withHooks
+
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventButtonArgs {
+
+}
+export interface EventButtonProps {
+  icon?: string,
+  label: string,
+  style?: any,
+  fontColor?: string,
+  borderColor?: string,
+  backgroundColor?: string,
+  testID?: any
+  onPress: () => void
+}
+export default function m(props: EventButtonProps): any {
+  return (
+    <View>
+      <Pressable testID={props.testID} onPress={() => props.onPress()} style={{ minWidth: '100%', alignSelf: 'center' }}  >
+        {
+          props.icon ?
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: props.backgroundColor || "#6c432c", flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9 }, props.style]} >
+              <LibPicture source={esp.assets(props.icon)} style={{ width: 18, height: 18, resizeMode: 'contain' }} />
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white', flex: 1, marginRight: 30, marginLeft: 10 }} >{props.label}</Text>
+            </View>
+            :
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 17, backgroundColor: props.backgroundColor || "#6c432c", justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }, props.style]} >
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: props.fontColor ? props.fontColor : 'white', marginRight: 10, marginLeft: 10 }} >{props.label}</Text>
+            </View>
+        }
+      </Pressable>
+    </View>
+  )
+}

package/event/config.ts

@@ -0,0 +1,4 @@
+//noPage
+import { BboConfig } from "esoftplay/cache/bbo/config/import";
+
+export default BboConfig

package/event/countdown.tsx

@@ -1,10 +1,10 @@
 // withHooks
 
+import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
 import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
 import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import { LibUtils } from 'esoftplay/cache/lib/utils/import';
-import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
 import { UserRoutes } from 'esoftplay/cache/user/routes/import';
 import useGlobalState from 'esoftplay/global';
 import useGlobalSubscriber from 'esoftplay/subscribe';
@@ -19,7 +19,7 @@ export interface EventCountdownArgs {
 export interface EventCountdownProps {
 
 }
-export const countdownTime = useGlobalState('0')
+export const countdownTime = useGlobalState<any>('0')
 
 export const releaseQueue = useGlobalSubscriber()
 
@@ -54,11 +54,11 @@ export default function m(props: EventCountdownProps): any {
   else
     return (
       <Animated.View pointerEvents='none' style={[{ position: 'absolute', alignItems: 'center', justifyContent: 'center', top: LibStyle.STATUSBAR_HEIGHT + 61, padding: 1, backgroundColor: LibUtils.hexToRgba(LibStyle.colorGreen, 1), width: '100%' }, animated]} >
-        <MarketCountdown
+        <EventCountdown_base
           onExpired={() => {
             const routeNames = UserRoutes.state()?.get()?.routes?.map?.((x: any) => x.name)
-            if (routeNames.includes("artist/list"))
-              LibNavigation.navigate("artist/list")
+            if (routeNames.includes("event/artist"))
+              LibNavigation.navigate("event/artist")
             else if (routeNames.includes("event/detail"))
               LibNavigation.navigate("event/detail")
             else