esoftplay-event 0.0.2 → 0.0.3

package/event/artist_detailv2.tsx

@@ -11,7 +11,6 @@ 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';
@@ -38,7 +37,7 @@ export default function m(props: EventArtist_detailv2Props): any {
   const [detailArtist, setDetailArtist] = useSafeState<any>()
 
   let showSchedule = React.useRef<LibSlidingup>(null)
-  const [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState<any>()
+  const [, setSelectedTicket, getSelectedTicket] = useSafeState<any[]>([])
   const [showAll, setShowAll] = useSafeState<any>({});
   const [qty, setQty] = useSafeState<any>(1)
   const [refreshing, setRefreshing] = useSafeState<boolean>(false);
@@ -47,10 +46,11 @@ export default function m(props: EventArtist_detailv2Props): any {
     loadDataArtist()
   }, [])
 
-  esp.log({ priceList, detailArtist });
+  // esp.log({ priceList, detailArtist });
 
   function loadDataArtist(): void {
     new LibCurl(url, null, (res) => {
+      esp.log({ res, url });
       setRefreshing(false)
       setDetailArtist(res)
       loadDataPrice(res?.url_price)
@@ -81,7 +81,7 @@ export default function m(props: EventArtist_detailv2Props): any {
 
   function loadDataPriceConfig(url: string) {
     let post = {
-      price_ids: selectedTicket?.price_id,
+      price_ids: "1",
       event_id: 443
     }
     LibProgress.show("Mohon tunggu")
@@ -104,77 +104,136 @@ export default function m(props: EventArtist_detailv2Props): any {
   };
 
 
-  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 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 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) {
+  function selectTicket(priceTypeItem: any, ticket: any, isMultiple: number) {
+    const selectedData = {
+      ...ticket,
+      qty: Number(priceTypeItem.qty_min),
+      qty_min: Number(priceTypeItem?.qty_min),
+      qty_max: Number(priceTypeItem?.qty_max),
+      list_id: ticket.list_id,
+      subtotal: Number(ticket.price) * Number(priceTypeItem.qty_min),
+      type: priceTypeItem?.type,
+      tax: priceTypeItem?.tax,
+      term: priceTypeItem?.term,
+      has_addition: priceTypeItem?.has_addition,
+      image_map: priceTypeItem?.image_map,
+      use_seat: priceTypeItem?.use_seat,
+      adjacent_seats: priceTypeItem?.config?.seat_autopick,
+      fee_amount: priceTypeItem?.fee_amount,
+      fee_type: priceTypeItem?.fee_type,
+      // event_id: availableResult?.id
+    }
+
+    setSelectedTicket((prev: any) => {
+      const alreadySelected = prev.some((x: any) => x.list_id == ticket.list_id)
+
+      // SINGLE
+      if (isMultiple != 1) {
+
+        // klik lagi = unselect
+        if (alreadySelected) {
+          return []
+        }
+
+        // replace semua
+        return [selectedData]
+      }
+
+      // MULTIPLE
+      // remove
+      if (alreadySelected) {
+        return prev.filter((x: any) => x.list_id != ticket.list_id)
+      }
+
+      // add
+      return [...prev, selectedData]
+    })
+  }
+
+  function getTicketStatusMessage(priceTypeItem: any, ticket: any) {
+    const status = priceTypeItem.status != 1 ? priceTypeItem.status : ticket.status
+
+    switch (status) {
+      case 2:
+        return "Segera Hadir"
+
+      case 0:
+        return "Habis terjual"
+
+      default:
+        return ""
+    }
+  }
+
+  function renderItem(itemC: any, iC: any, item: any) {
     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 _selectedTicket = item.price_id == selectedTicket?.price_id && itemC?.index_id == selectedTicket?.list?.index_id
+    let _selectedTicket = getSelectedTicket()?.find((x: any) => x.list_id == itemC.list_id)
+    // const qty = _selectedTicket?.qty || 0
+    let isMultiple = 1
+
 
     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
+    let colorBackground = item?.status != 1 ? LibStyle.colorLightGrey : itemC?.status != 1 ? LibStyle.colorLightGrey : colorDefault
+    let textOpacity = /* item?.status == 1 ? 1 : */ itemC?.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)
+          const isAvailable = item.status == 1 && itemC.status == 1
+
+          if (!isAvailable) {
+            LibToastProperty.show(getTicketStatusMessage(item, itemC))
+            return
           }
-        }} activeOpacity={itemT?.status == 1 ? 0 : 1} key={iT} style={{ flex: 1, flexDirection: 'row', backgroundColor: colorBackground, justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
+          selectTicket(item, itemC, isMultiple)
+
+
+        }} activeOpacity={itemC?.status == 1 ? 0 : 1} key={iC} style={{ flex: 1, flexDirection: 'row', backgroundColor: colorBackground, justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
         {
-          itemT.ondate == "0000-00-00" ?
+          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(itemT.ondate).localeFormat('DD')}</Text>
+                <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 && itemT?.status != 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: 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 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(itemT.ondate).localeFormat('dddd')}</Text>
+                <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(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>
+                  <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>
             </>
@@ -182,19 +241,19 @@ export default function m(props: EventArtist_detailv2Props): any {
 
         <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>
+            (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) && _selectedTicket &&
             <View style={applyStyle({ marginTop: 4, flexDirection: 'row', marginLeft: 8, alignContent: 'center', alignItems: 'center' })}>
-              <TouchableOpacity onPress={() => { min() }}>
+              <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() }}>
+              <TouchableOpacity onPress={() => { /* add() */ }}>
                 <View style={applyStyle({ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
                   <LibIcon name="plus" color="#16a085" />
                 </View>
@@ -319,47 +378,48 @@ export default function m(props: EventArtist_detailv2Props): any {
           <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) => {
+              priceList?.map((priceType: 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
+                const displayedData = showAll[priceType.price_id] ? priceType?.list : priceType?.list.slice(0, maxDisplay);
+                let textOpacity = priceType?.status == 1 ? 1 : 0.3
+                let _selectedTicket = getSelectedTicket()?.some((x: any) => x.price_id == priceType.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 key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: _selectedTicket ? 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>
+                        <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{priceType.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>
+                          priceType.qty_min > 1 &&
+                          <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(priceType.qty_min) + ")"}</Text>
                         }
                         {
-                          item?.status != 1 &&
+                          priceType?.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 style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: priceType?.status == 0 ? LibStyle.colorRed : "#4cd964", borderColor: priceType?.status == 0 ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                              <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: /* priceType?.status == 2 ? "#000" : */ "#fff", fontWeight: 'bold' })}>{priceType?.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 != "" &&
+                        priceType.hasOwnProperty("price_type_info") && priceType.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>
+                          <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{priceType.price_type_info}</Text>
                         </View>
                       }
                     </View>
 
                     {
-                      displayedData?.map((itemT: any, iT: number) => renderItem(item, itemT, iT))
+                      displayedData?.map((itemC: any, iC: number) => renderItem(itemC, iC, priceType))
                     }
                     {
                       filterFullData?.[i]?.list?.length > 3 &&
                       <TouchableOpacity onPress={() => {
-                        handleShowAll(item.price_id)
+                        handleShowAll(priceType.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} />
+                        <Text allowFontScaling={false} style={{ marginRight: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{showAll[priceType.price_id] ? esp.lang("event/ticket_list", "see_less") : esp.lang("event/ticket_list", "see_more")}</Text>
+                        <LibIcon name={showAll[priceType.price_id] ? 'chevron-up-circle-outline' : 'chevron-down-circle-outline'} color={LibStyle.colorBlue} size={18} />
                       </TouchableOpacity>
                     }
 
@@ -371,9 +431,9 @@ export default function m(props: EventArtist_detailv2Props): any {
           <View style={applyStyle({ paddingVertical: 10 })} >
             <EventButton label={esp.lang("event/artist_detail", "buy_ticket")} onPress={() => {
               EventIndexProperty.isLogin(() => {
-                if (selectedTicket) {
-                  loadDataPriceConfig(selectedTicket?.url_config)
-                }
+                // if (selectedTicket) {
+                //   loadDataPriceConfig(selectedTicket?.url_config)
+                // }
                 // proceedToPayment()
               })
             }} style={{ backgroundColor: LibStyle.colorGreen, marginTop: 2, marginHorizontal: 15 }} />

package/event/artistv2.tsx

@@ -39,19 +39,10 @@ export default function m(props: EventArtistv2Props): any {
     /* get detail event untuk dapat config antrian */
 
     // new LibCurl(url, null,
-    new LibCurl('v2/event_artist&event_id=443', null,
+    new LibCurl('v2/event_artist&event_id=523', 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)
+        esp.log(res);
       }, (err) => {
         setError(err?.message)
       }, 1)
@@ -86,7 +77,8 @@ export default function m(props: EventArtistv2Props): any {
           //     autoPass: false,
           //   });
           // }
-          // EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'));
+          // const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time) * 1000);
+          // EventCountdownProperty.countdownTime.set(expTimestamp)
           LibNavigation.navigate(
             item?.config?.multiprice == 1
               ? 'event/artist_detail_multi'
@@ -120,7 +112,7 @@ export default function m(props: EventArtistv2Props): any {
     } 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] }} />
+          <LibPicture style={{ opacity: isNotAvailable ? 0.3 : 1, height: sliderHeight, width: width, resizeMode: 'cover', backgroundColor: "#f1f2f3" }} source={{ uri: item.images[0] }} />
         </TouchableOpacity>
       )
     } else {

package/event/button.tsx

@@ -25,12 +25,12 @@ export default function m(props: EventButtonProps): any {
       <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]} >
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 5, 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]} >
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 5, 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>
         }

package/event/button_order_detail.tsx

@@ -14,30 +14,42 @@ export interface EventButton_order_detailArgs {
 export interface EventButton_order_detailProps {
   onPress: () => void
   title: string
+  subtitle?: string
   info?: string
   color: any,
-  icon: any
+  icon: any,
+  disable?: boolean
+  status_message?: string
 }
 export default function m(props: EventButton_order_detailProps): any {
   return (
-    <TouchableOpacity onPress={props.onPress}>
+    <TouchableOpacity onPress={props.onPress} activeOpacity={props.disable == true ? 1 : 0}>
       <View style={{ borderWidth: 1, borderColor: '#ccc', margin: 15, borderRadius: 7, marginBottom: 0, overflow: 'hidden', flexDirection: 'row' }}>
         <LibGradient
-          colors={[props.color, props.color, "#f1f2f3",]}
+          colors={props.disable ? [LibStyle.colorBgGrey, LibStyle.colorBgGrey, "#f1f2f3"] : [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>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontSize: 16, fontWeight: 'bold' }}>{props.title}</Text>
+          {
+            props.subtitle && props.subtitle != "" &&
+            < Text allowFontScaling={false} style={{ fontSize: 11, color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: 1.5, }}>{props.subtitle}</Text>
+          }
+
           {
             props.info != "" &&
-            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ color: EventOrder_itemProperty.textColor(props?.color), fontSize: 12, fontWeight: 'normal' }}>{props?.info}</Text>
+            <Text allowFontScaling={false} ellipsizeMode='tail' style={{ color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontSize: 12, fontWeight: 'normal' }}>{props?.info}</Text>
+          }
+          {
+            props.status_message && props.status_message != "" &&
+            <Text allowFontScaling={false} ellipsizeMode='tail' style={{ color: LibStyle.colorRed, fontSize: 12, fontWeight: 'normal' }}>{props?.status_message}</Text>
           }
         </LibGradient>
-        <View style={{ flex: 1, margin: 3, borderRadius: 5, ...LibStyle.elevation(2), backgroundColor: props.color, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+        <View style={{ flex: 1, margin: 3, borderRadius: 5, ...LibStyle.elevation(2), backgroundColor: props.disable ? LibStyle.colorBgGrey : 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 }} />
+          <LibIcon name={props.icon} size={35} color={props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color)} style={{ opacity: 1 }} />
         </View>
       </View>
-    </TouchableOpacity>
+    </TouchableOpacity >
   )
 }

package/event/capture.tsx

@@ -19,6 +19,8 @@ export default class m {
             const uriArray = images.split("/");
             const nameToChange = uriArray[uriArray.length - 1];
             const renamedURI = images.replace(nameToChange, name.replace(/\s/g, '_') + ".jpg");
+
+
             if (Platform.OS == 'ios') {
               MediaLibrary.saveToLibraryAsync(images)
               LibToastProperty.show(esp.lang("lib/capture", "saved_to_gallery"))

package/event/checkout.ts

@@ -0,0 +1,135 @@
+// useLibs
+// noPage
+
+import { EventConfigProperty } from "esoftplay/cache/event/config/import"
+import { LibCurl } from "esoftplay/cache/lib/curl/import"
+import { LibNavigation } from "esoftplay/cache/lib/navigation/import"
+import { LibToastProperty } from "esoftplay/cache/lib/toast/import"
+import esp from "esoftplay/esp"
+import useGlobalState from "esoftplay/global"
+
+
+export interface EventCheckout {
+  doPayment: (eventData: any, ticketSelected: any, qty: number, subscribed: any) => void,
+  curlPriceConfig: (url: string, price_id: string) => Promise<any>
+}
+
+export const loading = useGlobalState<boolean>(false)
+
+export default function m(): EventCheckout {
+  async function proceedToPayment(eventData: any, ticketSelected: any, qty: number, subscribed: any) {
+    if (!ticketSelected) {
+      LibToastProperty.show(esp.lang("event/artist_detail", "select_tiket_first"))
+      return
+    }
+
+    const event_id = eventData?.event_id || eventData?.id
+    let dataPost: any = {
+      event_id: event_id,
+      event_title: eventData?.event_title || eventData?.title,
+      charge_payment: eventData?.charge_payment,
+      charge_payment_type: eventData?.charge_payment_type,
+      selected_ticket: ticketSelected,
+      qty: qty,
+    }
+
+    if (ticketSelected?.config?.seat_autopick == 1 && qty > 1) {
+      dataPost.adjacent_seats = 1
+    }
+
+    let finalDataPost = { ...dataPost }
+
+    if (ticketSelected?.use_seat == 1) {
+      if (ticketSelected?.config?.seat_autopick != 1) {
+        const seat = await LibNavigation.navigateForResult('event/seat_map_new', {
+          url: 'event_seat',
+          dataTicket: finalDataPost,
+        })
+
+        finalDataPost = {
+          ...finalDataPost,
+          seat_label: seat?.seat_label
+        }
+      }
+    }
+
+
+    finalDataPost = await handleAdditionIfNeeded(event_id, ticketSelected, finalDataPost, qty)
+    const args = await buildPaymentArgs(eventData, ticketSelected, finalDataPost, qty, subscribed)
+    LibNavigation.navigate('payment/ticket', args)
+  }
+
+  function curlPriceConfig(url: string, price_id: string): Promise<any> {
+    return new Promise((resolve) => {
+      if (!url) {
+        resolve({})
+        return
+      }
+
+      new LibCurl(
+        url,
+        null,
+        (res) => {
+          resolve(res?.[price_id] || {})
+        },
+        (err) => {
+          LibToastProperty.show(err?.message)
+          resolve({})
+        }
+      )
+    })
+  }
+
+  async function buildPaymentArgs(data: any, selectedTicket: any, dataPost: any, qty: number, subscribed: any) {
+    const eventConfig = EventConfigProperty.state().get()
+    loading.set(true)
+    const conf = await curlPriceConfig(data?.url_price_config, selectedTicket?.price_id)
+    loading.set(false)
+
+    return {
+      order_type: eventConfig?.order_type?.ticket,
+      tax: conf?.tax ?? selectedTicket?.tax ?? data?.tax ?? 0,
+      dataBookingEvent: { ...dataPost, qty },
+      subscribed,
+      fee_platform: conf?.fee_platform_amount != null
+        ? {
+          fee_platform_amount: conf.fee_platform_amount || 0,
+          fee_platform_type: conf.fee_platform_type || "NONE",
+        }
+        : {
+          fee_platform_amount: data?.fee_platform_amount || 0,
+          fee_platform_type: data?.fee_platform_type || "NONE",
+        },
+      fee_custom: {
+        fee_custom_label: conf?.fee_custom_label || "Custom Fee",
+        fee_custom_amount: conf?.fee_custom_amount,
+        fee_custom_type: conf?.fee_custom_type,
+      }
+    }
+  }
+
+  async function handleAdditionIfNeeded(event_id: string, selectedTicket: any, dataPost: any, qty: number) {
+    if (selectedTicket?.has_addition != 1) return dataPost
+
+    const additions = await LibNavigation.navigateForResult(
+      'event/additional',
+      {
+        type_ticket: selectedTicket?.type,
+        ondate: selectedTicket?.list?.ondate,
+        event_id: event_id,
+        qty,
+        data: dataPost,
+        price_id: selectedTicket?.price_id
+      },
+      221
+    )
+
+    return additions ? { ...dataPost, addition: additions } : dataPost
+  }
+
+  return {
+    doPayment: proceedToPayment,
+    curlPriceConfig
+  }
+
+}

package/event/countdown.tsx

@@ -1,6 +1,6 @@
 // withHooks
 
-import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
 import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
 import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
@@ -23,6 +23,8 @@ export const countdownTime = useGlobalState<any>('0')
 
 export const releaseQueue = useGlobalSubscriber()
 
+export const eventURI = useGlobalState<string>('')
+
 export default function m(props: EventCountdownProps): any {
   const [timer] = countdownTime.useState()
   const routes = UserRoutes.state().useSelector((x) => x?.routes)
@@ -36,6 +38,7 @@ export default function m(props: EventCountdownProps): any {
       doneQueue(pathQueue, event_id, key, () => { })
       EventQueue_pricingProperty.state().reset()
       countdownTime.reset()
+      eventURI.reset()
     }
   })
 
@@ -54,18 +57,19 @@ 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]} >
-        <EventCountdown_base
+        <EventCountdown_timestamp
           onExpired={() => {
             const routeNames = UserRoutes.state()?.get()?.routes?.map?.((x: any) => x.name)
-            if (routeNames.includes("event/artist"))
-              LibNavigation.navigate("event/artist")
-            else if (routeNames.includes("event/detail"))
-              LibNavigation.navigate("event/detail")
-            else
-              LibNavigation.backToRoot()
+            if (routeNames.includes("event/artist")) {
+              LibNavigation.navigate("event/artist", { url: eventURI.get() })
+            } else if (routeNames.includes("event/detail")) {
+              LibNavigation.navigate("event/detail", { url: eventURI.get() })
+            }
+            LibNavigation.backToRoot()
             countdownTime.reset()
+            eventURI.reset()
           }}
-          expired={timer}
+          expiredTimestamp={timer}
           style={{ color: "#fff" }} />
       </Animated.View>
     )