esoftplay-event 0.0.1 → 0.0.2-a

package/event/test.tsx

@@ -1,155 +1,240 @@
-// // withHooks
-// import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
-// import { LibCurl } from 'esoftplay/cache/lib/curl/import';
-// import { LibIcon } from 'esoftplay/cache/lib/icon/import';
-// import useSafeState from 'esoftplay/state';
-// import React, { useCallback, useEffect, useState } from 'react';
-// import { Dimensions, Pressable, ScrollView, View } from 'react-native';
-// import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-
-
-// export interface EventSeat_map_matrixArgs {
-
-// }
-// export interface EventSeat_map_matrixProps {
-
-// }
-// export default function m(props: any): any {
-//   const deviceWidth = Dimensions.get('window').width;
-//   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
-//   const [scale, setScale] = useState(1);
-//   const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
-//   const [data, setData] = useSafeState<[number, number, string, number][]>([])
-//   const initialBoxSize = 30;
-//   const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
-
-//   // Scale boxSize so that contentWidth fits deviceWidth
-//   const scaleToFit = deviceWidth / contentWidth;
-//   const boxSize = initialBoxSize * scaleToFit;
-
-//   // Recalculate xs, ys, width, height with scaled boxSize
-//   const xsScaled = data.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
-//   const ysScaled = data.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
-
-//   const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
-//   const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
-
-//   const fontSize: any = {
-//     1: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
-//     2: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
-//     3: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.25),
-//     4: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
-//     5: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
-//     6: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.15),
-//   }
-//   const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
-//     if (event.nativeEvent.state !== 5) return;
-//     // Adjust tap coordinates for scale
-//     const x = event.nativeEvent.x / scale;
-//     const y = event.nativeEvent.y / scale;
-//     for (let i = 0; i < data.length; i++) {
-//       const [sx, sy, seatName] = data[i];
-//       const xSize = (boxSize / 2) + (sx * boxSize);
-//       const ySize = (boxSize / 2) + (sy * boxSize);
-//       if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
-//         setSelectedIdx(i);
-//         return;
-//       }
-//     }
-//     setSelectedIdx(null);
-//   }, [data, boxSize, scale]);
-
-
-//   useEffect(() => {
-//     new LibCurl("v3/event_seat", {
-//       event_id: 398,
-//       price_id: 1922,
-//       ondate: "0000-00-00"
-//     }, (res, msg) => {
-//       setBoundingBox(res.metadata.bounding_box)
-//       console.log(JSON.stringify(res, undefined, 2))
-//       setData(res.layout.split(';').map((item) => item.split(',')).map(([x, y, seatName, status]) => [Number(x), Number(y), seatName, Number(status)]))
-//     })
-//   }, [])
-
-//   return (
-//     <View key={scale} style={{ flex: 1 }} >
-//       <ScrollView horizontal style={{ flex: 1 }}>
-//         <ScrollView style={{ flex: 1 }}>
-//           <TapGestureHandler onHandlerStateChange={handleTap}>
-//             <View>
-//               <Canvas
-//                 style={{
-//                   width: width * scale,
-//                   height: height * scale,
-//                   padding: 10,
-//                   backgroundColor: "#f1f2f3",
-//                 }}>
-//                 {
-//                   data.map(([x, y, name, status], i) => {
-//                     const color = selectedIdx == i ? "lime" : getColorByStatus(status)
-//                     const xSize = (boxSize / 2) + (x * boxSize)
-//                     const ySize = (boxSize / 2) + (y * boxSize)
-//                     return (
-//                       <Group key={i}>
-//                         <RoundedRect
-//                           x={xSize - 1}
-//                           r={(boxSize + 2) * 0.34}
-//                           y={ySize - 1}
-//                           width={boxSize + 2}
-//                           transform={[{ scale }]}
-//                           height={boxSize + 2}
-//                           color={"#999"} />
-//                         <RoundedRect
-//                           x={xSize}
-//                           r={boxSize * 0.32}
-//                           y={ySize}
-//                           width={boxSize}
-//                           transform={[{ scale }]}
-//                           height={boxSize}
-//                           color={color} />
-//                         {name && fontSize[name.length] && (
-//                           <Text
-//                             x={(xSize) + boxSize * (5 - name.length) * 0.1}
-//                             y={(ySize) + boxSize * 0.60}
-//                             color="#020202"
-//                             text={name}
-//                             transform={[{ scale }]}
-//                             font={fontSize[name.length]} />
-//                         )}
-//                       </Group>
-//                     )
-//                   })
-//                 }
-//               </Canvas>
-//             </View>
-//           </TapGestureHandler>
-//         </ScrollView>
-//       </ScrollView>
-//       <View style={{ flexDirection: "row" }} >
-//         <Pressable onPress={() => setScale((x) => x - 0.3)} >
-//           <LibIcon.AntDesign name='minuscircleo' />
-//         </Pressable>
-//         <Pressable onPress={() => setScale((x) => x + 0.3)} >
-//           <LibIcon.AntDesign name='pluscircleo' />
-//         </Pressable>
-//       </View>
-//     </View>
-//   )
-// }
-
-
-// function getColorByStatus(statuses: number) {
-//   const colors: any = {
-//     8: 'purple',
-//     0: "white",
-//     1: "#9FA1A4",
-//     2: "#6B71E6",
-//     3: "#2EBBE8",
-//     4: "#FFA601",
-//     5: "#fff",
-//     6: "#FF4866",
-//     7: "#6C432C"
-//   }
-//   return colors[statuses]
-// }
+// withHooks
+import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { UseMap } from 'esoftplay/cache/use/map/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Dimensions, Pressable, ScrollView, View } from 'react-native';
+import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+
+
+export interface EventSeat_map_matrixArgs {
+
+}
+export interface EventSeat_map_matrixProps {
+
+}
+export default function m(props: any): any {
+  const deviceWidth = Dimensions.get('window').width;
+  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [scale, setScale] = useState(1);
+  const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
+  const [data, setData, getData] = useSafeState<[number, number, string, number][]>([])
+  const initialBoxSize = 30;
+  const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
+  const [stage, setStage] = useLazyState('')
+
+  // Scale boxSize so that contentWidth fits deviceWidth
+  const scaleToFit = deviceWidth / contentWidth;
+  const boxSize = initialBoxSize * scaleToFit;
+
+  // Recalculate xs, ys, width, height with scaled boxSize
+  const xsScaled = data.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
+  const ysScaled = data.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
+
+  const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
+  const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
+
+  const size: any = {
+    1: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
+    2: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
+    3: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.25),
+    4: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.2),
+    5: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.2),
+    6: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.15),
+  }
+  const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
+    if (event.nativeEvent.state !== 5) return;
+    // Adjust tap coordinates for scale
+    const x = event.nativeEvent.x / scale;
+    const y = event.nativeEvent.y / scale;
+    for (let i = 0; i < data.length; i++) {
+      const [sx, sy, seatName, status] = data[i];
+      const xSize = (boxSize / 2) + (sx * boxSize);
+      const ySize = (boxSize / 2) + (sy * boxSize);
+
+      if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
+        if (status == 0) {
+          setSelectedIdx(i);
+        } /* else {
+          setSelectedIdx(null);
+        } */
+        return;
+      }
+
+    }
+  }, [data, boxSize, scale]);
+
+  useEffect(() => {
+    new LibCurl("v3/event_seat", {
+      event_id: 398,
+      price_id: 1922,
+      ondate: "0000-00-00"
+    }, (res, msg) => {
+      setBoundingBox(res.metadata.bounding_box)
+      setData(res.layout.split(';').map((item: any) => item.split(',')).map(([x, y, seatName, status]: any) => [Number(x), Number(y), seatName, Number(status)]))
+    })
+
+    loadDataSeatmapBooked()
+
+  }, [])
+
+  function updateIndexByRes(data: any, res: any) {
+    const resArr = res.split(",").map((item: any) => item.trim()); // biar aman dari spasi
+    return data.map((row: any) => {
+      if (resArr.includes(row[2])) {
+        return [row[0], row[1], row[2], 3];
+      }
+      return row;
+    });
+  }
+
+  function loadDataSeatmapBooked() {
+    new LibCurl("v3/event_seat_booked", {
+      event_id: 398,
+      price_id: 1922,
+      ondate: "0000-00-00"
+    }, (res, msg) => {
+      let updated = updateIndexByRes(getData(), res)
+      setData(updated)
+      // esp.log({ updated, res });
+    }, (err) => {
+      esp.log({ err });
+    })
+
+  }
+
+  return (
+    <View key={scale} style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }} >
+      <EventHeader title={esp.lang("event/seat_map", "header_title")} />
+      <View style={{ flex: 1 }}>
+        <View style={{ marginBottom: 5, }}>
+          <ScrollView style={{ padding: 10, paddingLeft: 0, }} horizontal>
+            <UseMap
+              data={getLegends()}
+              renderItem={(item) => (
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15, marginRight: 5 }} >
+                  <View style={{ height: 20, width: 20, borderRadius: 2, borderWidth: 0.5, backgroundColor: item[0], marginRight: 8 }} />
+                  <LibTextstyle textStyle='caption1' text={item[1]} />
+                </View>
+              )}
+            />
+          </ScrollView>
+        </View>
+        <View style={{ height: 40, marginLeft: 20, marginRight: 20, backgroundColor: LibStyle.colorPrimary, marginBottom: 10, borderRadius: 2, justifyContent: 'center', alignItems: 'center' }} >
+          <LibTextstyle textStyle='body' style={{ color: 'white', fontWeight: 'bold' }} >{stage || esp.lang("event/seat_map", "front")}</LibTextstyle>
+        </View>
+
+        <ScrollView horizontal >
+          <ScrollView >
+            <TapGestureHandler onHandlerStateChange={handleTap}>
+              <View>
+                <Canvas
+                  style={{
+                    width: width * scale,
+                    height: height * scale,
+                    padding: 10,
+                    backgroundColor: LibStyle.colorBgGrey,
+                    
+                  }}>
+                  {
+                    data.map(([x, y, name, status], i) => {
+                      const color = selectedIdx == i ? "#8EF67B" : getColorByStatus(status)
+                      const xSize = (boxSize / 2) + (x * boxSize)
+                      const ySize = (boxSize / 2) + (y * boxSize)
+                      return (
+                        <Group key={i}>
+                          <RoundedRect
+                            x={xSize - 1}
+                            r={(boxSize + 2) * 0.1}
+                            y={ySize - 1}
+                            width={boxSize + 2}
+                            transform={[{ scale }]}
+                            height={boxSize + 2}
+                            color={"#999"} />
+                          <RoundedRect
+                            x={xSize}
+                            r={boxSize * 0.1}
+                            y={ySize}
+                            width={boxSize}
+                            transform={[{ scale }]}
+                            height={boxSize}
+                            color={color} />
+                          {name && size[name.length] && (
+                            <Text
+                              x={(xSize) + boxSize * (5 - name.length) * 0.1}
+                              y={(ySize) + boxSize * 0.60}
+                              color={"#020202"}
+                              text={name}
+                              transform={[{ scale }]}
+                              font={size[name.length]} />
+                          )}
+                        </Group>
+                      )
+                    })
+                  }
+                </Canvas>
+              </View>
+            </TapGestureHandler>
+          </ScrollView>
+        </ScrollView>
+        <View style={{ flexDirection: 'row', marginHorizontal: 12, height: 40, borderColor: '#060606', borderWidth: 1, borderRadius: 5, alignItems: 'center' }} >
+          <Pressable onPress={() => setScale((x) => x - 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+            <LibIcon.SimpleLineIcons name='magnifier-remove' />
+          </Pressable>
+          <Pressable onPress={() => setScale((x) => x + 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+            <LibIcon.SimpleLineIcons name='magnifier-add' />
+          </Pressable>
+          <View style={{ height: 40, width: 1, backgroundColor: '#060606', marginRight: 12 }} />
+          {/* <Text style={{}} >{esp.lang("event/seat_map", "selected", String(data.filter((x) => x == -1).length), qty)}</Text> */}
+          <LibTextstyle textStyle='callout'>{"Kursi terpilih"}</LibTextstyle>
+        </View>
+        <EventButton
+          backgroundColor={LibStyle.colorPrimary}
+          testID={"save_btn"}
+          style={{ margin: 7 }}
+          label={esp.lang("event/seat_map", "save")}
+          onPress={() => { }}
+        />
+      </View>
+    </View>
+  )
+}
+
+function getLegends() {
+  const colors: any = [
+    ["#fff", esp.lang("event/seat_map", "available"), 0],
+    ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
+    ["#2EBBE8", esp.lang("event/seat_map", "reserved"), 3],
+    ["#6C432C", esp.lang("event/seat_map", "chosen_by"), 7],
+    ["#f1f2f3", esp.lang("event/seat_map", "way"), 5],
+    ["#9FA1A4", esp.lang("event/seat_map", "not_sold"), 1],
+    ["#6B71E6", esp.lang("event/seat_map", "seat_hold"), 2],
+    ["#FF4866", esp.lang("event/seat_map", "wall"), 6],
+    ["#FFA601", esp.lang("event/seat_map", "other_type"), 4],
+    ["purple", esp.lang("event/seat_map", "stage"), 8]
+  ]
+  return colors
+}
+
+function getColorByStatus(statuses: number) {
+  const colors: any = {
+    8: 'purple',
+    0: '#fff',
+    1: "#9FA1A4",
+    2: "#6B71E6",
+    3: "#2EBBE8",
+    4: "#FFA601",
+    5: "#fff",
+    6: "#FF4866",
+    7: "#6C432C"
+  }
+  return colors[statuses]
+}

package/event/ticket_list.tsx

@@ -20,12 +20,14 @@ 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 { 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 { 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';
@@ -54,6 +56,7 @@ export type Result = {
   "status": string,
   "quota_checkout": string,
   "show_price": string,
+  "countdown_booking": string,
   "config_queue": {
     "limit": number,
     "time": number,
@@ -134,7 +137,7 @@ export default function m(props: EventTicket_listProps): any {
 
   const [pendingData] = EventLoading_pageProperty.state().useState()
 
-  const { url, fee_platform, has_addition, has_addition_global, subscribed, show_fee_percentage }: any = useRef(LibNavigation.getArgsAll(props)).current
+  const { url, fee_platform, subscribed, show_fee_percentage }: any = useRef(LibNavigation.getArgsAll(props)).current
 
   const [deeplinkParams] = UseDeeplinkProperty.params.useState()
   const [timer] = EventCountdownProperty.countdownTime.useState()
@@ -180,7 +183,6 @@ export default function m(props: EventTicket_listProps): any {
 
   function loadData() {
     new LibCurl(url, null, (res, msg) => {
-
       const availablePriceType = LibObject.update(res, (arr: any[]) => arr.filter((x) => x.status != 0))('price_type')
       const unAvailablePriceType = LibObject.update(res, (arr: any[]) => arr.filter((x) => x.status == 0))('price_type')
 
@@ -234,6 +236,9 @@ export default function m(props: EventTicket_listProps): any {
     if (value.quota != 0 && qty > value.quota) {
       qty = value.quota
     }
+    if (qty < 1) {
+      qty = 1
+    }
     setQty(qty)
   }
 
@@ -258,7 +263,7 @@ export default function m(props: EventTicket_listProps): any {
   }
 
   function checkAddition(newDataPost: any) {
-    if ((has_addition == 1 || selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1)) {
+    if ((selectedTicket?.hasOwnProperty("has_addition") && selectedTicket?.has_addition == 1)) {
       LibNavigation.navigateForResult('event/additional', { type_ticket: selectedTicket?.type, ondate: selectedTicket?.list?.ondate, event_id: availableResult?.id, qty: getQty(), price_id: selectedTicket?.price_id }, 321).then((additions) => {
         if (additions != "") {
           newDataPost.addition = additions
@@ -303,14 +308,11 @@ export default function m(props: EventTicket_listProps): any {
       if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {
         checkAddition(dataPost)
       } else {
-        LibNavigation.navigateForResult('event/seat_map', {
+        LibNavigation.navigateForResult('event/seat_map_new', {
           url: 'event_seat',
           dataTicket: dataPost,
         }).then((value) => {
-          dataPost.row_id = value.row_id
-          dataPost.column_id = value.column_id
-          dataPost.seat_name = value.seat_name
-
+          dataPost.seat_label = value.seat_label
           checkAddition(dataPost)
         })
       }
@@ -346,6 +348,11 @@ export default function m(props: EventTicket_listProps): any {
     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 showCountDown = getAvailableResult()?.countdown_booking == "1" && itemT?.status == 1 && item?.status == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" && moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") >= moment().format("YYYY-MM-DD HH:mm:ss")
+    let dateShowed = item?.price_date == 1 ?
+      moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") > moment(itemT?.ondate).format("YYYY-MM-DD HH:mm:ss") ? moment(itemT?.ondate).add(1, "days").format("YYYY-MM-DD HH:mm:ss") : item?.date_end
+      : item?.date_end
+
     return (
       <TouchableOpacity key={iT} onPress={() => {
         let itemTicket = {
@@ -396,11 +403,22 @@ export default function m(props: EventTicket_listProps): any {
                       </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>
+                  {
+                    showCountDown ?
+                      <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('dddd, MMMM YYYY')}</Text>
+                      :
+                      <>
+                        <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>
+                      </>
+                  }
+                  {
+                    showCountDown &&
+                    <EventCountdown_event date={dateShowed} containerStyle={{ marginVertical: -5 }} />
+                  }
                 </View>
               </View>
               :
@@ -419,7 +437,7 @@ export default function m(props: EventTicket_listProps): any {
                   {/* <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text> */}
                   {
                     item.info != "" &&
-                    <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }} >{item.info}</Text>
+                    <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
                   }
                 </View>
               </View>
@@ -578,6 +596,7 @@ export default function m(props: EventTicket_listProps): any {
                 </TouchableOpacity>
               }
               <View style={{ flex: 1 }}>
+
                 {
                   availableResult?.price_type?.map?.((item: any, i: number) => {
                     let textOpacity = item?.status == 1 ? 1 : 0.3
@@ -590,8 +609,17 @@ export default function m(props: EventTicket_listProps): any {
                     return (
                       <Pressable onPress={() => {
 
-                      }} 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 }}>
+                      }} 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" &&
+                            <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>
+                            </View>
+                          }
+
                           <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                             <View>
                               <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}
@@ -600,16 +628,16 @@ export default function m(props: EventTicket_listProps): any {
                                   <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
                                 }
                               </EventHtmltext>
+                              {
+                                availableResult?.countdown_booking == "1" && displayedData?.length == 1 && item?.status == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" && moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") >= moment().format("YYYY-MM-DD HH:mm:ss") &&
+                                <EventCountdown_event date={item?.date_end} containerStyle={{ marginVertical: -5 }} />
+                              }
                               {
                                 deeplinkParams?.type == 'event-voucher' && deeplinkParams?.price_id == item.price_id ?
                                   <Text allowFontScaling={false} style={{ color: "coral", fontSize: 12, fontWeight: 'bold' }}>{esp.lang("event/ticket_list", "applied_code", deeplinkParams?.code)}</Text>
                                   : null
                               }
                             </View>
-                            {/* {
-                      item.use_quota == true &&
-                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: LibStyle.colorRed, fontSize: 12 }}>{parseInt(item.quota) == item.quota_used ? esp.lang("event/ticket_list", "empty") : (esp.lang("event/ticket_list", "qty_left",LibUtils.number(parseInt(item.quota) - item.quota_used)))}</Text>
-                    } */}
                             {
                               item?.status != 1 &&
                               <View style={applyStyle({ flexDirection: 'row' })}>