esoftplay-event 0.0.2-f → 0.0.2-h

package/event/artist.tsx

@@ -100,7 +100,9 @@ export default function m(props: BigbangArtistProps): any {
             if (item.book_available == 1) {
               if (isInPricingQueueConfig(item.event_id)) {
                 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'))
+                  const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(item?.event_id).time) * 1000);
+                  EventCountdownProperty.countdownTime.set(expTimestamp)
+
                   if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
                     LibNavigation.navigate('event/artist_detail_multi', {
                       data: newItem,

package/event/artist_detail.tsx

@@ -287,29 +287,50 @@ export default function m(props: EventArtist_detailProps): any {
           }
         }} 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' })}>
+          ticketWithDate ?
+            // view untuk yang ada tanggalnya
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+              <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: colorBackground, borderStyle: "solid", borderWidth: textOpacity, 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 &&
+                  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 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/ticket_list", "sold_out") : esp.lang("event/ticket_list", "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>
+                <>
+                  <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', alignItems: "center" })}>
+                    <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: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('YYYY')}</Text>
+                  </View>
+                </>
+              </View>
+            </View>
+            :
+            // view untuk yang undangan dan khusus
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibPicture source={esp.assets('icons/ic_special2.png')} style={{ height: 42, width: 42 }} />
+              <View style={{ marginLeft: 14, 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 : LibStyle.colorPrimary, borderColor: itemT.status == 0 ? LibStyle.colorRed : LibStyle.colorPrimary, borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{itemT.status == 0 ? esp.lang("event/ticket_list", "sold_out") : esp.lang("event/ticket_list", "coming_soon")}</Text>
+                    </View>
+                  </View>
+                }
+                {/* <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text> */}
+                {
+                  item.info != "" &&
+                  <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
+                }
               </View>
-            </>
+            </View>
         }
 
         <View style={applyStyle({ marginRight: 5, marginLeft: 5, flexDirection: 'column' })} >
@@ -438,6 +459,7 @@ export default function m(props: EventArtist_detailProps): any {
 
                 let textOpacity = item?.status == 1 ? 1 : 0.3
                 let selTic = item.price_id == selectedTicket?.price_id
+                let ticketWithDate = item.price_date == 1 && item.use_code == 0
                 return (
                   <Pressable onPress={() => {
 
@@ -467,7 +489,7 @@ export default function m(props: EventArtist_detailProps): any {
                         }
                       </View>
                       {
-                        item.info != "" &&
+                        item.info != "" && ticketWithDate &&
                         <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>

package/event/artistv2.tsx

@@ -86,7 +86,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 +121,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_order_detail.tsx

@@ -18,25 +18,30 @@ export interface EventButton_order_detailProps {
   color: 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.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.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.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={35} 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>

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';
@@ -54,7 +54,7 @@ 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"))
@@ -65,7 +65,7 @@ export default function m(props: EventCountdownProps): any {
               LibNavigation.backToRoot()
             countdownTime.reset()
           }}
-          expired={timer}
+          expiredTimestamp={timer}
           style={{ color: "#fff" }} />
       </Animated.View>
     )

package/event/countdown_timestamp.tsx

@@ -0,0 +1,106 @@
+// withHooks
+// noPage
+
+import esp from 'esoftplay/esp';
+import React, { useEffect, useRef } from 'react';
+import { TextInput, View } from 'react-native';
+
+export interface EventCountdown_timestampProps {
+  expiredTimestamp: number;
+  expiredText?: string;
+  style?: any;
+  containerStyle?: any;
+  onlyDay?: boolean;
+  onExpired?: () => void;
+  hideTimeUnit?: boolean;
+  showDayUnit?: boolean;
+}
+
+const fixSingleNumber = (n: number) => (n < 10 ? "0" + n : n);
+
+export default function CountdownTimestamp(props: EventCountdown_timestampProps) {
+  const ref = useRef<TextInput>(null)
+  let timmerRef = useRef<any>(undefined)
+
+  useEffect(() => {
+    countDown()
+    return () => {
+      clearTimeout(timmerRef.current)
+      timmerRef.current = undefined
+    }
+  }, [])
+
+  function countDown(): any {
+    let expired = false
+    function loop() {
+      const labels = [esp.lang("market/countdown", "day"), esp.lang("market/countdown", "hour"), esp.lang("market/countdown", "minutes"), esp.lang("market/countdown", "second")]
+
+      const expiredTimestamp = props.expiredTimestamp
+      const now = Date.now();
+      const diffMs = expiredTimestamp - now;
+
+      if (diffMs <= 0) {
+        expired = true;
+        props.onExpired?.();
+        ref.current?.setNativeProps({
+          text: props.expiredText || esp.lang('market/countdown', 'expired'),
+        });
+        return;
+      }
+
+      const totalSeconds = Math.floor(diffMs / 1000);
+      const days = Math.floor(totalSeconds / 86400);
+      const hours = Math.floor((totalSeconds % 86400) / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+
+      const parts = [
+        days,
+        fixSingleNumber(hours),
+        fixSingleNumber(minutes),
+        fixSingleNumber(seconds),
+      ];
+
+      if (parts[0] != 0 && props.onlyDay) {
+        ref.current?.setNativeProps({
+          text: parts[0] + esp.lang('market/countdown', 'days'),
+        });
+      } else if (parts[0] == 0) {
+        const filteredParts = [...parts];
+        while (filteredParts.length > 1 && (filteredParts[0] === 0 || filteredParts[0] === "00")) {
+          filteredParts.splice(0, 1);
+        }
+
+        const filtered = filteredParts.map((d, i) =>
+          `${d}${props?.hideTimeUnit ? '' : ' ' + labels[parts.length - filteredParts.length + i]}`
+        );
+
+        ref.current?.setNativeProps({ text: filtered.join(' : ') });
+      } else if (props?.showDayUnit && props?.hideTimeUnit) {
+        const data = parts.map(
+          (d, i) => d + (i === 0 ? ' ' + labels[0] + ' ' : '')
+        );
+
+        const first = data[0];
+        ref.current?.setNativeProps({
+          text: first + ' ' + data.slice(1).join(' : '),
+        });
+      } else {
+        const filtered = parts.map(
+          (d, i) => `${d}${props?.hideTimeUnit ? '' : ' ' + labels[i]}`
+        );
+        ref.current?.setNativeProps({ text: filtered.join(' : ') });
+      }
+
+      if (!expired) timmerRef.current = setTimeout(loop, 1000);
+
+    };
+    loop()
+  }
+
+  return (
+    <View style={props.containerStyle} >
+      <TextInput ref={ref} editable={false} allowFontScaling={false} style={props.style} />
+    </View>
+  )
+}

package/event/order_detail.tsx

@@ -106,6 +106,7 @@ export default function m(props: EventOrder_detailProps): any {
   const url = LibNavigation.getArgs(props, 'url')
   const [result, setResult] = useSafeState<any>(EventIndexProperty?.stateTicketCache()?.get()?.filter?.((x: any) => x.url?.replace?.('?id=', '/') == url?.replace?.('?id=', '/'))?.[0]?.detail)
   const [tickets, setTickets] = useSafeState(result?.detail_ticket?.tickets ?? [])
+  const [dataAddons, setDataAddons] = useSafeState()
   const useIndividualQr = result?.config?.use_individual_qr_ticket
 
   const dataTickets = tickets?.filter?.((x: ItemTiket) => x?.email == user?.email && x?.ticket_code != '')
@@ -165,6 +166,17 @@ export default function m(props: EventOrder_detailProps): any {
         }
       )
 
+      // addons list
+      if (res?.hasOwnProperty('url_addons') && res?.url_addons != "") {
+        new LibCurl(res?.url_addons, null,
+          (resss: any, msg: string) => {
+            setDataAddons(resss)
+          }, (err: any) => {
+            esp.log(err, "res url_addons");
+          }
+        )
+      }
+
     }, (error: any) => {
       const transformedUrl = url?.includes("?id=") ? url?.replace(/\?id=/, '/') : url
       const urlArr = transformedUrl?.split("/")
@@ -259,7 +271,7 @@ export default function m(props: EventOrder_detailProps): any {
             currency: res?.currency,
           }
         },
-        qty: result?.qty
+        qty: res?.qty
       }
       let fee_platform = {
         fee_platform_amount: res?.fee_platform?.fee_platform_amount,
@@ -270,15 +282,34 @@ export default function m(props: EventOrder_detailProps): any {
       let order_type = EventConfigProperty.state().get()?.order_type?.ticket
       let addons_id = id
       let booking_id_ref = result?.id
-      LibNavigation.navigate('payment/ticket', {
-        order_type: order_type,
-        tax: tax,
-        fee_platform: fee_platform,
-        dataBookingEvent: dataBookingEvent,
-        show_fee_percentage,
-        addons_id,
-        booking_id_ref
-      })
+
+      if (res?.hasOwnProperty('alert') && res?.alert != "") {
+        LibDialog.warningConfirm("Informasi", res?.alert, "Lanjutkan", () => {
+          LibNavigation.navigate('payment/ticket', {
+            order_type: order_type,
+            tax: tax,
+            fee_platform: fee_platform,
+            dataBookingEvent: dataBookingEvent,
+            show_fee_percentage,
+            addons_id,
+            booking_id_ref
+          })
+        }, "Kembali", () => {
+
+        })
+      } else {
+        LibNavigation.navigate('payment/ticket', {
+          order_type: order_type,
+          tax: tax,
+          fee_platform: fee_platform,
+          dataBookingEvent: dataBookingEvent,
+          show_fee_percentage,
+          addons_id,
+          booking_id_ref
+        })
+      }
+
+
     }, (err: any) => {
       LibProgress.hide()
       LibDialog.warning("Oops", err?.message)
@@ -579,10 +610,12 @@ export default function m(props: EventOrder_detailProps): any {
 
         {/* tombol add on */}
         {
-          result?.addons?.length > 0 && result?.addons?.map((item: any, i: number) => {
+          dataAddons?.length > 0 && dataAddons?.map((item: any, i: number) => {
             if (item?.hasOwnProperty("group_id")) {
               return (
                 <EventButton_order_detail
+                  disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                  status_message={item?.status_message}
                   key={i}
                   color={result?.color}
                   onPress={() => {
@@ -594,12 +627,14 @@ export default function m(props: EventOrder_detailProps): any {
                   }}
                   icon={'chevron-down'}
                   title={item.group_title}
-                  info={""}
+                  info={item.info}
                 />
               )
             } else if (item?.hasOwnProperty('list')) {
               return (
                 <EventButton_order_detail
+                  disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                  status_message={item?.status_message}
                   key={i}
                   color={result?.color}
                   onPress={() => {
@@ -611,16 +646,20 @@ export default function m(props: EventOrder_detailProps): any {
                   }}
                   icon={'chevron-down'}
                   title={item.title}
-                  info={""}
+                  info={item.info}
                 />
               )
             } else {
               return (
                 <EventButton_order_detail
+                  disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                  status_message={item?.status_message}
                   key={i}
                   color={result?.color}
                   onPress={() => {
-                    loadDataAddons(item?.addons_id, item?.url)
+                    if (item?.hasOwnProperty('status') && item?.status == 1) {
+                      loadDataAddons(item?.addons_id, item?.url)
+                    }
                   }}
                   icon={'plus-circle-outline'}
                   title={item.title}
@@ -907,11 +946,14 @@ export default function m(props: EventOrder_detailProps): any {
               getGroupAddon()?.list?.length > 0 && getGroupAddon()?.list?.map((item: any, i: number) => {
                 return (
                   <EventButton_order_detail
-                    // disable
+                    disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                    status_message={item?.status_message}
                     key={i}
                     color={result?.color}
                     onPress={() => {
-                      loadDataAddons(getGroupAddon()?.addons_id, item?.url)
+                      if (item?.hasOwnProperty('status') && item?.status == 1) {
+                        loadDataAddons(getGroupAddon()?.addons_id, item?.url)
+                      }
                     }}
                     icon={'plus-circle-outline'}
                     title={getGroupAddon()?.title + " " + LibUtils.moment(item.ondate).format("DD MMM YYYY")}
@@ -925,10 +967,14 @@ export default function m(props: EventOrder_detailProps): any {
               getGroupAddon()?.addons?.length > 0 && getGroupAddon()?.addons?.map((item: any, i: number) => {
                 return (
                   <EventButton_order_detail
+                    disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                    status_message={item?.status_message}
                     key={i}
                     color={result?.color}
                     onPress={() => {
-                      loadDataAddons(item?.addons_id, item?.url)
+                      if (item?.hasOwnProperty('status') && item?.status == 1) {
+                        loadDataAddons(item?.addons_id, item?.url)
+                      }
                     }}
                     icon={'plus-circle-outline'}
                     title={item.title}

package/event/order_detail_upgrade.tsx

@@ -78,6 +78,8 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
     )
   }
 
+  esp.log(result);
+
   return (
     <View style={{ flex: 1 }} >
       <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
@@ -122,14 +124,22 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
                 }
               }} key={i} style={{
                 ...LibStyle.elevation(2), marginHorizontal: 15, marginTop: 2.5, marginBottom: 10, borderRadius: 10,
-                backgroundColor: item.status == 0 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center'
+                backgroundColor: item.status != 1 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, /* alignContent: 'center', alignItems: 'center', justifyContent: 'center' */
               }}>
-                <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 16, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{item?.price_name_to}</EventHtmltext>
-                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000" }}>{"+ " + LibUtils.money(Number(dataTicket?.qty_upgrade) * Number(item?.amount), item?.currency)}</Text>
+                {
+                  item?.status != 1 &&
+                  <View style={applyStyle({ flexDirection: 'row' })}>
+                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{item?.status_text}</Text>
+                    </View>
+                  </View>
+                }
+                <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 16, color: item.status != 1 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{item?.price_name_to}</EventHtmltext>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status != 1 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000" }}>{"+ " + LibUtils.money(Number(dataTicket?.qty_upgrade) * Number(item?.amount), item?.currency)}</Text>
 
                 {
                   item.info &&
-                  <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#c9c9c9" }}>{item.info}</Text>
+                  <Text allowFontScaling={false} style={{ textAlign: 'center', marginTop: 10, fontSize: 12, color: selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#c9c9c9" }}>{item.info}</Text>
                 }
 
               </Pressable>

package/event/order_detail_visitor.tsx

@@ -119,6 +119,7 @@ export default function m(props: EventOrder_detail_visitorProps): any {
               <View style={{ margin: 15, borderRadius: 10, backgroundColor: '#fff', padding: 10 }}>
                 {
                   result?.tickets?.map((item: any, i: number) => {
+                    const [front, end] = item?.seat_name?.split("#") || ["", ""];
                     return (
                       <View key={i} style={{ marginLeft: 14, marginBottom: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
                         <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
@@ -151,10 +152,15 @@ export default function m(props: EventOrder_detail_visitorProps): any {
                         </View>
                         <View style={{ alignContent: 'center', alignItems: 'center' }}>
                           {
-                            item.hasOwnProperty('seat_name') && item?.seat_name != "" &&
-                            <View style={{ paddingVertical: 5, paddingHorizontal: 7, borderWidth: 1, borderColor: '#000', backgroundColor: '#fff', borderRadius: 5, marginRight: 7 }}>
-                              <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: '#000' }}>{item.seat_name}</Text>
-                            </View>
+                            item.hasOwnProperty('seat_name') && item?.seat_name != "" && item?.seat_name?.includes('#') ?
+                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}> {front} </Text>
+                                <Text allowFontScaling={false} style={{ marginLeft: 3, fontWeight: 'bold', fontSize: 16, color: '#000', }}> {end} </Text>
+                              </View>
+                              :
+                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: "#000" }}>{item?.seat_name}</Text>
+                              </View>
                           }
                         </View>
                       </View>

package/event/ticket_list.tsx

@@ -19,8 +19,8 @@ import moment from 'esoftplay/moment';
 import { applyStyle } from 'esoftplay';
 import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
-import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
 import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
+import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
 import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventLoading_pageProperty } from 'esoftplay/cache/event/loading_page/import';
@@ -155,8 +155,10 @@ export default function m(props: EventTicket_listProps): any {
   useEffect(() => {
     EventConfigProperty.curlConfig('v2/config_order_type')
     const { event_id } = EventQueue_pricingProperty.state().get()
-    if (isInPricingQueueConfig(event_id))
-      EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
+    if (isInPricingQueueConfig(event_id)) {
+      const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time) * 1000);
+      EventCountdownProperty.countdownTime.set(expTimestamp)
+    }
     // loadData()
     getCheckCounter()
     return () => {
@@ -577,11 +579,11 @@ export default function m(props: EventTicket_listProps): any {
                 <LibEffect deps={[]}>
                   <View style={{ backgroundColor: LibStyle.colorGreen, margin: 16, borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }} >
                     <LibTextstyle text={esp.lang("event/ticket_list", "select_ticket")} textStyle='caption1' style={{ color: 'white' }} />
-                    <EventCountdown_base
+                    <EventCountdown_timestamp
                       onExpired={() => {
                         LibNavigation.navigate("event/detail")
                       }}
-                      expired={timer}
+                      expiredTimestamp={timer}
                       style={{ color: "#fff", fontWeight: 'bold' }} />
                   </View>
                 </LibEffect>

package/event/ticket_list2.tsx

@@ -21,8 +21,8 @@ import { useEffect, useRef } from 'react';
 import { EventAlert } from 'esoftplay/cache/event/alert/import';
 import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
-import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
 import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
+import { EventCountdown_timestamp } from 'esoftplay/cache/event/countdown_timestamp/import';
 import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventLoading_pageProperty } from 'esoftplay/cache/event/loading_page/import';
@@ -271,8 +271,10 @@ export default function m(props: EventTicket_list2Props): any {
     EventConfigProperty.curlConfig('v2/config_order_type')
     const { event_id } = EventQueue_pricingProperty.state().get()
     loadData()
-    if (isInPricingQueueConfig(event_id))
-      EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
+    if (isInPricingQueueConfig(event_id)) {
+      const expTimestamp = Date.now() + (Number(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time) * 1000);
+      EventCountdownProperty.countdownTime.set(expTimestamp)
+    }
     getCheckCounter()
     return () => {
       clearTimeout(refTimeout.current)
@@ -656,11 +658,11 @@ export default function m(props: EventTicket_list2Props): any {
               isInPricingQueueConfig(availableResult?.id) && isPass ?
                 <View style={{ backgroundColor: LibStyle.colorGreen, margin: 16, borderRadius: 5, padding: 10, ...LibStyle.elevation(2) }} >
                   <LibTextstyle text={esp.lang("event/ticket_list", "select_ticket")} textStyle='caption1' style={{ color: 'white' }} />
-                  <EventCountdown_base
+                  <EventCountdown_timestamp
                     onExpired={() => {
                       LibNavigation.back(1)
                     }}
-                    expired={timer}
+                    expiredTimestamp={timer}
                     style={{ color: "#fff", fontWeight: 'bold' }} />
                 </View>
                 : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay-event",
-  "version": "0.0.2-f",
+  "version": "0.0.2-h",
   "description": "event module on esoftplay framework",
   "main": "index.js",
   "scripts": {