esoftplay-event 0.0.2-e → 0.0.2-g

package/config.json

@@ -1,9 +1,9 @@
 {
   "fonts": {
-    "mono": "mono.ttf",
     "Arial": "Arial.ttf",
     "ArialBold": "ArialBold.ttf",
     "SFProText": "SFProText.ttf",
+    "mono": "mono.ttf",
     "MonoSpace": "MonoSpace.ttf",
     "DecoNumbers": "DecoNumbers.ttf",
     "digital": "digital.ttf"

package/event/additional_input.tsx

@@ -64,6 +64,8 @@ export default function m(props: EventAdditional_inputProps): any {
 
   const [newData, setNewData] = useSafeState()
   const [, setIdx, getIdx] = useLazyState<number>()
+  const inputRefs = useRef<React.RefObject<EventInput_rectangle>[]>([]);
+
 
   useEffect(() => {
     if (Object.keys(itemAddition).length > 0) {
@@ -75,6 +77,12 @@ export default function m(props: EventAdditional_inputProps): any {
     return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
   }, [])
 
+  useEffect(() => {
+    if (data?.additions?.length) {
+      inputRefs.current = data.additions.map((_, i: number) => inputRefs.current[i] || React.createRef<EventInput_rectangle>());
+    }
+  }, [data?.additions]);
+
   function save() {
     let stillEmpty1 = newData?.additions?.filter((item: any) => item.is_required == 1).filter((it: any) => (it.value?.length == 0 && !it.subvalue)).length > 0
     if (stillEmpty1) {
@@ -85,6 +93,7 @@ export default function m(props: EventAdditional_inputProps): any {
     }
   }
 
+
   function renderCatNew(item: any, i: number) {
     let values = newData?.additions?.[i]?.value
     let display_values = newData?.additions?.[i]?.display_value
@@ -109,11 +118,17 @@ export default function m(props: EventAdditional_inputProps): any {
             {
               item.type == 1 && // text field
               <EventInput_rectangle
+                ref={inputRefs.current[i]}
                 placeholder={item.question}
+                returnKeyType='next'
                 placeholderTextColor='#c9c9c9'
                 style={{ borderRadius: 5, borderColor: '#c9c9c9' }}
                 defaultValue={newData?.additions?.[i]?.value?.[0]}
                 inputStyle={{ marginLeft: 0 }}
+                onSubmitEditing={() => {
+                  const nextInput = inputRefs.current[i + 1];
+                  nextInput?.current?.focus();
+                }}
                 onChangeText={(text) => {
                   let t = text?.length == 0 ? [] : [text]
                   let updateValue = LibObject.set(newData, t)('additions', i, 'value')

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

@@ -443,6 +443,14 @@ export default function m(props: EventArtist_detailProps): any {
 
                   }} 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 }}>
+                      {
+                        item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
+                        <View style={applyStyle({ flexDirection: 'row' })}>
+                          <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
+                            <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
+                          </View>
+                        </View>
+                      }
                       <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                         <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</EventHtmltext>
                         {

package/event/artist_detail_multi.tsx

@@ -6,6 +6,7 @@ import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
 import { EventShare } from 'esoftplay/cache/event/share/import';
 import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
@@ -476,6 +477,14 @@ export default function m(props: EventArtist_detail_multiProps): any {
                 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 }}>
+                      {
+                        item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
+                        <View style={applyStyle({ flexDirection: 'row' })}>
+                          <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
+                            <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
+                          </View>
+                        </View>
+                      }
                       <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                         <Text allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}</Text>
                         {

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

@@ -16,26 +16,32 @@ export interface EventButton_order_detailProps {
   title: 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.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={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,17 +282,37 @@ 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)
       esp.log({ err });
     }, 1)
   }
@@ -444,16 +476,18 @@ export default function m(props: EventOrder_detailProps): any {
                 </View>
                 {/* </View> */}
                 <UseCondition if={result?.show_ticket_status == 1 && result?.status == 1 || result?.status == 3 || result?.status == 6}>
-                  <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
-                    {
-                      result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
-                        :
-                        result.kind_detail?.everyday_pass == 1 ?
-                          "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
+                  <View style={{ flex: 1, marginRight: LibStyle.width / 4 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
+                      {
+                        result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
                           :
-                          "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
-                    }
-                  </Text>
+                          result.kind_detail?.everyday_pass == 1 ?
+                            "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
+                            :
+                            "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
+                      }
+                    </Text>
+                  </View>
                 </UseCondition>
                 {
                   result?.qty_shared > 0 &&
@@ -576,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={() => {
@@ -591,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={() => {
@@ -608,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}
@@ -904,10 +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={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")}
@@ -921,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

@@ -122,10 +122,11 @@ 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>
+                {/* <Text allowFontScaling={false} style={{ color: LibStyle.colorRed }} >{item?.message_error}</Text> */}
+                <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={{ 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 &&

package/event/order_detail_upgrade_payment.tsx

@@ -56,7 +56,7 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
       }
 
       if (selectedTicket?.selected_ticket?.use_seat == 1) {
-        post.seat_label = selectedTicket?.seat_label.join('|')
+        post.seat_label = selectedTicket?.seat_label?.join('|')
       }
 
       if (selectedTicket?.selected_ticket?.seat_autopick == 1) {

package/event/ticket_list.tsx

@@ -19,15 +19,15 @@ 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';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
 import { LibEffect } from 'esoftplay/cache/lib/effect/import';
 import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { UseDeeplinkProperty } from 'esoftplay/cache/use/deeplink/import';
-import { UserClass } from 'esoftplay/cache/user/class/import';
 import esp from 'esoftplay/esp';
 import useLazyState from 'esoftplay/lazy';
 import useSafeState from 'esoftplay/state';
@@ -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>
@@ -613,10 +615,10 @@ export default function m(props: EventTicket_listProps): any {
                       }} key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, backgroundColor: '#fff', borderRadius: 5, borderWidth: 1.5, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
                         <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 5, borderTopRightRadius: 5 }}>
                           {
-                            esp.isDebug("") && UserClass.state().get()?.email == "bagus@fisip.net" &&
+                            item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
                             <View style={applyStyle({ flexDirection: 'row' })}>
-                              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: LibStyle.colorGreen, borderColor: "#4cd964", borderRadius: 5, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
-                                <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: '#fff', fontWeight: 'bold' }}>Disini kah boy</Text>
+                              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
+                                <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
                               </View>
                             </View>
                           }

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
@@ -697,6 +699,14 @@ export default function m(props: EventTicket_list2Props): any {
 
                       }} key={i} style={{ overflow: 'hidden', margin: 15, marginBottom: 5, marginTop: 10, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2), borderWidth: 1, borderColor: item.selected == 1 ? LibStyle.colorBlue : LibStyle.colorBgGrey }}>
                         <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
+                          {
+                            item?.hasOwnProperty('label') && (item?.label != "" && item?.label != null) &&
+                            <View style={applyStyle({ flexDirection: 'row' })}>
+                              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: item?.label_color, borderColor: item?.label_color, borderRadius: 3, padding: 2, paddingHorizontal: 5, opacity: 1 })}>
+                                <Text allowFontScaling={false} style={{ fontSize: 10, fontStyle: "normal", letterSpacing: 0.5, color: EventOrder_itemProperty.textColor(item?.label_color), fontWeight: 'bold' }}>{item?.label}</Text>
+                              </View>
+                            </View>
+                          }
                           <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                             <View>
                               <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}

package/event/tms_idcard.tsx

@@ -136,7 +136,7 @@ export default function m(props: EventTms_idcardProps): any {
         <LibPicture source={result?.event?.image_idcard == "" ? esp.assets('white_idcard.png') : { uri: result?.event?.image_idcard }} style={{ width: width, height: height, resizeMode: 'contain' }} />
         <View style={{ position: 'absolute' }}>
           <LibPicture source={{ uri: selectedTicket?.user_image != '' ? decodeURIComponent(selectedTicket?.user_image) : 'https://www.w3schools.com/howto/img_avatar.png' }} style={{ marginBottom: photoMarginBot, marginTop: marginTop, height: photoHeight, width: photoWidth, alignSelf: 'center', resizeMode: 'cover', }} />
-          <View style={{ padding: 10, marginTop: -10 }} >
+          <View style={{ padding: 10, marginTop: 5 }} >
             {/* view nama */}
             <View style={{ flexDirection: 'row' }} >
               <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 3 }} >{esp.lang("event/tms_idcard", "name")}</Text>

package/event/token_order.tsx

@@ -3,7 +3,18 @@ import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { LibIcon } from 'esoftplay/cache/lib/icon/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import esp from 'esoftplay/esp';
+import { useRef } from 'react';
 
+import { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
+import { EventSection_menu } from 'esoftplay/cache/event/section_menu/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
 import React from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 
@@ -15,13 +26,39 @@ export interface EventToken_orderProps {
 
 }
 export default function m(props: EventToken_orderProps): any {
+
+  const allStatus = EventOrder_status()
+  const statusCode = LibNavigation.getArgs(props, 'status', esp.isDebug("filter") ? '0,1,2,3,4,5,6,7,10' : '1')
+  const [status, setStatus] = useSafeState(statusCode)
+  const [code, setCode] = useSafeState(statusCode)
+  const [selectedDate, setSelectedDate] = useSafeState({ date_start: '', date_end: '', id: 1, title: esp.lang("event/order", "all_date") })
+  const [selectedDateRange, setSelectedDateRange] = useSafeState({ date_start: LibUtils.moment().localeFormat("YYYY-MM-DD"), date_end: LibUtils.moment().localeFormat("YYYY-MM-DD") })
+
+  const statusRef = useRef<LibSlidingup>(null)
+
+
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
       <EventHeader title='Riwayar Transaksi Token' />
+      <View style={{ minHeight: 50, }} >
+        <LibScroll
+          initialNumToRender={20}
+          horizontal
+        >
+          <View style={{ width: 10 }} />
+          <Pressable
+            onPress={() => { statusRef.current?.show() }}
+            style={applyStyle({ height: 30, marginVertical: 10, marginRight: 10, borderRadius: 12, backgroundColor: 'white', borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' })} >
+            <LibTextstyle textStyle='footnote' text={allStatus[allStatus.findIndex((x) => String(x.code) == status)]?.text || esp.lang("event/order", "all_statis")} style={applyStyle({ fontSize: 11, color: "#4E4E4E", marginRight: 5 })} />
+            <LibIcon name='chevron-down' style={applyStyle({ color: "#4E4E4E" })} />
+          </Pressable>
+        </LibScroll>
+        <EventSection_menu size='line' />
+      </View>
       <ScrollView>
         <Pressable onPress={() => {
 
-        }} style={{ padding: 7, margin: 15, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        }} style={{ padding: 7, margin: 15, marginTop: 10, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
           <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{esp.lang("event/order", "wawit")}</Text>
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             {/* {
@@ -34,6 +71,33 @@ export default function m(props: EventToken_orderProps): any {
           </View>
         </Pressable>
       </ScrollView>
+      <LibSlidingup ref={statusRef} onChangeShow={(s) => { if (!s) setCode(status) }} >
+        <View style={applyStyle({ backgroundColor: 'white', paddingHorizontal: 17, borderTopLeftRadius: 10, borderTopRightRadius: 10, maxHeight: LibStyle.height * 0.9 })}>
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 15 })}>
+            <Pressable onPress={() => { statusRef.current?.hide() }} style={applyStyle({ marginRight: 10 })} >
+              <LibIcon name='close' />
+            </Pressable>
+            <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "Transaction_Status")} style={applyStyle({ fontWeight: 'bold', fontSize: 14, color: "#4E4E4E" })} />
+          </View>
+          <ScrollView>
+            <Pressable onPress={() => { setCode('0,1,2,3,4,5,6,7,10') }} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+              <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "All_Transaction_Status")} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+              <LibIcon.Ionicons name={code == '0,1,2,3,4,5,6,7,10' ? 'radio-button-on' : 'radio-button-off'} color={code == '0,1,2,3,4,5,6,7,10' ? LibStyle.colorPrimary : '#4E4E4E'} />
+            </Pressable>
+            {
+              allStatus?.filter((item: any) => item.publish == 1).map((it: any, i: number) => {
+                return (
+                  <Pressable key={i} onPress={() => setCode(it.code)} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+                    <LibTextstyle textStyle='footnote' text={it.text} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+                    <LibIcon.Ionicons name={it.code == code ? 'radio-button-on' : 'radio-button-off'} color={it.code == code ? LibStyle.colorPrimary : '#4E4E4E'} />
+                  </Pressable>
+                )
+              })
+            }
+          </ScrollView>
+          <EventButton label={esp.lang("event/order", "apply")} style={applyStyle({ fontSize: 14, marginVertical: 15 })} backgroundColor={LibStyle.colorPrimary} onPress={() => { setStatus(code); statusRef.current?.hide() }} />
+        </View>
+      </LibSlidingup>
     </View>
   )
 }

package/package.json

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