esoftplay-event 0.0.1 → 0.0.2

package/event/order_share_to_detail.tsx

@@ -76,13 +76,14 @@ export default function m(props: EventOrder_share_to_detailProps): any {
     set_qty(_qty == 1 ? 1 : _qty - 1)
   }
 
-  function shareTicket() {
+  function shareTicket(p: any) {
     LibDialog.warningConfirm(esp.lang("event/order_share_to_detail", "title_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "msg_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "btn_yes_confirm_share_ticket"), () => {
       let post = {
         receiver_email: userTo?.email,
         booking_id: result?.booking_id,
         qty_shared: _qty,
-        trx_id: trxId
+        trx_id: trxId,
+        pin: p
       }
 
       LibProgress.show(esp.lang("event/order_share_to_detail", "msg_wait"))
@@ -170,7 +171,11 @@ export default function m(props: EventOrder_share_to_detailProps): any {
                 receiver_email: userTo.email,
               })
             } else {
-              shareTicket()
+              LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                if (p) {
+                  shareTicket(p)
+                }
+              })
             }
           }} />
 

package/event/order_waiting.tsx

@@ -86,7 +86,7 @@ export default function m(props: EventOrder_waitingProps): any {
               item?.status == 0 ?
                 <View style={applyStyle({ marginHorizontal: 25, marginBottom: 10, flex: 1, borderTopColor: "#000", borderTopWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center' })}>
                   <View style={{ flex: 1 }}>
-                    <EventCountdown_base expired={LibUtils.moment(item?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss')} style={applyStyle({ fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
+                    <EventCountdown_base expired={LibUtils.moment(item?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', item?.timezone)} style={applyStyle({ fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
                   </View>
                   {
                     !!item?.booking_code &&

package/event/queue_pricing.tsx

@@ -7,7 +7,7 @@ import { LibUtils } from 'esoftplay/cache/lib/utils/import';
 import esp from 'esoftplay/esp';
 import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
 import useSafeState from 'esoftplay/state';
-import { useTimeout } from 'esoftplay/timeout';
+import { useDebounce, useTimeout } from 'esoftplay/timeout';
 import { useKeepAwake } from 'expo-keep-awake';
 import LottieView from 'lottie-react-native';
 import React, { useEffect, useRef } from 'react';
@@ -47,17 +47,30 @@ export default function m(props: EventQueueProps): any {
   event_id = String(event_id)
   const [number, setNumber, getNumber] = useSafeState(esp.lang("event/queue_pricing", "info"))
   const animation = useRef<LottieView>(null)
-  let refTimeout = useRef<any>()
+  let refTimeout = useRef<any>(null)
   const pathQueue = EVENT_PRICING_QUEUE
 
   const timeout = useTimeout()
+  const redebounce = useDebounce()
   useKeepAwake()
 
+  function checkIsHasNumber() {
+    redebounce(() => {
+      if (!(Number(number) > 0)) {
+        addQueue(String(pathQueue), String(event_id), () => {
+          getCurrentQueue(1)
+        });
+        checkIsHasNumber()
+      }
+    }, 7000)
+  }
+
   useEffect(() => {
     setQueueStatus(1)
     addQueue(String(pathQueue), String(event_id), () => {
       getCurrentQueue(1)
     });
+    checkIsHasNumber()
     timeout(() => {
       animation.current?.play()
     }, 300);
@@ -76,7 +89,7 @@ export default function m(props: EventQueueProps): any {
       clearTimeout(refTimeout.current)
       refTimeout.current = setTimeout(() => {
         LibNavigation.replace('event/queue_pricing', { event_id, autoPass })
-      }, 10000);
+      }, 12000);
     }
   }, [queueStatus])
 

package/event/refresh_button.tsx

@@ -1,17 +1,15 @@
 // withHooks
+// noPage
 
 import { LibIcon } from 'esoftplay/cache/lib/icon/import';
 import useSafeState from 'esoftplay/state';
 import React from 'react';
 import { Animated, TouchableOpacity } from 'react-native';
 
-
-export interface EventRefresh_buttonArgs {
-  
-}
 export interface EventRefresh_buttonProps {
   onPress: () => void,
   size?: number
+  containerStyle?: any
 }
 export default function m(props: EventRefresh_buttonProps): any {
   const [anim, setAnim] = useSafeState(new Animated.Value(0))
@@ -31,7 +29,7 @@ export default function m(props: EventRefresh_buttonProps): any {
   })
 
   return (
-    <TouchableOpacity onPress={() => { rotate(); props.onPress(); }} style={{ height: 30, width: 30, alignItems: 'center', justifyContent: 'center' }} >
+    <TouchableOpacity onPress={() => { rotate(); props.onPress(); }} style={{ height: 30, width: 30, alignItems: 'center', justifyContent: 'center', ...props.containerStyle }} >
       <Animated.View style={{ height: size + 8, width: size + 8, transform: [{ rotate: rotateAnim }], alignItems: 'center', justifyContent: 'center' }} >
         <LibIcon name="refresh" size={size} color="#999" />
       </Animated.View>

package/event/scan_item.tsx

@@ -49,11 +49,11 @@ export default function m(props: EventScan_itemProps): any {
         <View style={{}}>
           {
             props?.item?.hall_scanned && props?.item?.hall_scanned != "0000-00-00 00:00:00" &&
-            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#c9c9c9", marginBottom: 4, fontSize: 14, letterSpacing: 1.5 })}>{esp.lang("event/scan_item", "scan_on") + LibUtils.moment(props?.item?.hall_scanned).serverFormat("DD MMMM YYYY H:m:s")}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#c9c9c9", marginBottom: 4, fontSize: 14, letterSpacing: 1.5 })}>{esp.lang("event/scan_item", "scan_on") + LibUtils.moment(props?.item?.hall_scanned).serverFormat("DD MMMM YYYY H:m:s ", props?.item?.scanned_detail?.timezone) /* + props.item?.scanned_detail?.timezone_locale || "" */}</Text>
           }
           {
             !Array.isArray(props?.item?.scanned_detail) && props?.item?.scanned_detail?.scanned != "" && props?.item?.scanned_detail?.scanned != "0000-00-00 00:00:00" &&
-            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: LibStyle.colorRed, marginBottom: 4, fontSize: 14, letterSpacing: 1.5 })}>{esp.lang("event/scan_item", "scan_on") + LibUtils.moment(props?.item?.hall_scanned).serverFormat("DD MMMM YYYY H:m:s")}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: LibStyle.colorRed, marginBottom: 4, fontSize: 14, letterSpacing: 1.5 })}>{esp.lang("event/scan_item", "scan_on") + LibUtils.moment(props?.item?.scanned_detail?.scanned).serverFormat("DD MMMM YYYY H:m:s ", props?.item?.scanned_detail?.timezone) /* + props.item?.scanned_detail?.timezone_locale || "" */}</Text>
           }
           {
             props.item?.status == 1 &&

package/event/seat.tsx

@@ -130,7 +130,6 @@ export default function m(props: EventSeatProps): any {
     })
   }
 
-
   function loadDataSize() {
     let post = {
       event_id: dataTicket?.event_id,
@@ -222,14 +221,13 @@ export default function m(props: EventSeatProps): any {
     LibNavigation.sendBackResult(value)
   }
 
-  function shareTicket() {
+  function shareTicket(p: any) {
     if (dataTicket?.qty != counter) {
       LibToastProperty.show(esp.lang("event/seat", "select_seat1"))
       return
     }
 
-    let _rowId = result?.list?.filter((item: any) => item.check).map((it: any) => it.seat_row)
-    let _colId = result?.list?.filter((item: any) => item.check).map((it: any) => it.seat_column)
+    let seatName = result?.list?.filter((item: any) => item.check).map((it: any) => it.seat_name)
     let _bookingMemberId = result?.list?.filter((item: any) => item.check).map((it: any) => it.id)
 
     LibDialog.confirm(esp.lang("event/seat", "share_title"), esp.lang("event/seat", "share_msg"), esp.lang("event/seat", "share_confirm"), () => {
@@ -237,10 +235,10 @@ export default function m(props: EventSeatProps): any {
         receiver_email: receiver_email,
         booking_id: result?.booking_id,
         qty_shared: dataTicket?.qty,
-        row_id: _rowId.join('|'),
-        column_id: _colId.join('|'),
+        seat_name: seatName.join('|'),
         booking_member_id: _bookingMemberId.join('|'),
-        trx_id: trxId
+        trx_id: trxId,
+        pin: p
       }
 
       LibProgress.show(esp.lang("event/seat", "share_wait"))
@@ -262,7 +260,7 @@ export default function m(props: EventSeatProps): any {
     })
   }
 
-  function sendBackTicket() {
+  function sendBackTicket(p: any) {
     if (dataTicket?.qty != counter) {
       LibToastProperty.show(esp.lang("event/seat", "select_seat2"))
       return
@@ -274,7 +272,8 @@ export default function m(props: EventSeatProps): any {
       let _bookingMemberId = result?.tickets?.filter((item: any) => item.check).map((it: any) => it.id)
 
       let post = {
-        booking_member_id: _bookingMemberId.join('|')
+        booking_member_id: _bookingMemberId.join('|'),
+        pin: p
       }
       new LibCurl('event_booking_shared_return?booking_id=' + result?.booking_id + '&qty_shared=' + dataTicket?.qty, post, (res, msg) => {
         // LibNotify(res)
@@ -438,7 +437,11 @@ export default function m(props: EventSeatProps): any {
               </ScrollView>
               <View style={{ paddingVertical: 10, paddingHorizontal: 20 }} >
                 <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
-                  shareTicket()
+                  LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                    if (p) {
+                      shareTicket(p)
+                    }
+                  })
                 }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
               </View>
             </>
@@ -464,7 +467,12 @@ export default function m(props: EventSeatProps): any {
               </ScrollView>
               <View style={{ paddingVertical: 10, paddingHorizontal: 20 }} >
                 <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
-                  sendBackTicket()
+                  LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                    if (p) {
+                      sendBackTicket(p)
+                    }
+                  })
+
                 }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
               </View>
             </>

package/event/seat_map_new.tsx

@@ -0,0 +1,313 @@
+// 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 { EventMessage } from 'esoftplay/cache/event/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { UseMap } from 'esoftplay/cache/use/map/import';
+import esp from 'esoftplay/esp';
+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_newArgs {
+
+}
+export interface EventSeat_map_newProps {
+
+}
+export default function m(props: any): any {
+  const { dataTicket, url } = LibNavigation.getArgsAll<any>(props)
+  const qty = dataTicket?.qty
+
+  const deviceWidth = Dimensions.get('window').width;
+  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 [, setSelectedSeat, getSelectedSeat] = useSafeState<any>([])
+  const [errBookedSeat, setErrBookedSeat] = useSafeState()
+
+  // 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 = getData()?.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
+  const ysScaled = getData()?.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;
+
+
+  // Preload all possible fonts at top level (to avoid render hook errors)
+  const fontSizes = [boxSize * 0.35, boxSize * 0.30, boxSize * 0.27, boxSize * 0.25, boxSize * 0.20];
+  const fonts = fontSizes.map(size => useFont(esp.assets('fonts/MonoSpace.ttf'), size));
+
+  const getFontByLength = (length: number) => {
+    if (length <= 2) return fonts[0];
+    if (length == 3) return fonts[1];
+    if (length == 4) return fonts[2];
+    if (length == 5) return fonts[3];
+    return fonts[4];
+  };
+
+  const getFontSizeByLength = (length: number) => {
+    if (length <= 2) return fontSizes[0];
+    if (length == 3) return fontSizes[1];
+    if (length == 4) return fontSizes[2];
+    if (length == 5) return fontSizes[3];
+    return fontSizes[4];
+  };
+
+
+  // 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.27),
+  //   5: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.25),
+  //   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 < getData()?.length; i++) {
+      const [sx, sy, seatName, status] = getData()?.[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) {
+          setSelectedSeat((prev: any) => {
+            if (!prev?.includes(seatName)) {
+              if (prev?.length < qty) {
+                return [...prev, seatName];
+              }
+              LibToastProperty.show(esp.lang("event/seat_map", "max_seat", qty))
+              return prev;
+            }
+            return prev.filter((s: string) => s != seatName);
+          });
+        }
+        return;
+      }
+
+    }
+  }, [data, boxSize, scale]);
+
+  useEffect(() => {
+    loadDataSeatmapBooked()
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  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 loadDataSeatmap(seatBooked: any) {
+    new LibCurl("v3/event_seat", {
+      event_id: dataTicket?.event_id,
+      price_id: dataTicket?.selected_ticket?.price_id,
+      ondate: dataTicket?.ondate || dataTicket?.selected_ticket?.list?.ondate
+    }, (res, msg) => {
+      // esp.log(res);
+      setBoundingBox(res.metadata.bounding_box)
+      let x = res.layout.split(';').map((item: any) => item.split(',')).map(([x, y, seatName, status]: any) => [Number(x), Number(y), seatName, Number(status)])
+      let updated = updateIndexByRes(x, seatBooked)
+      setData(updated)
+    })
+  }
+
+  function loadDataSeatmapBooked() {
+    new LibCurl("v3/event_seat_booked", {
+      event_id: dataTicket?.event_id,
+      price_id: dataTicket?.selected_ticket?.price_id,
+      ondate: dataTicket?.ondate || dataTicket?.selected_ticket?.list?.ondate
+    }, (res, msg) => {
+      loadDataSeatmap(res)
+      setErrBookedSeat(undefined)
+    }, (err) => {
+      setErrBookedSeat(err?.message)
+    })
+  }
+
+  if (errBookedSeat) {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <EventHeader title={esp.lang("event/seat_map", "header_title")} />
+        <View style={{ flex: 1 }}>
+          <EventMessage
+            message={errBookedSeat}
+            children={
+              <EventButton
+                label='Coba lagi'
+                style={{ marginHorizontal: 15 }}
+                onPress={() => {
+                  loadDataSeatmapBooked()
+                }}
+              />
+            }
+          />
+        </View>
+      </View>
+    )
+  }
+
+  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>
+        <ScrollView horizontal >
+          <ScrollView >
+            <TapGestureHandler onHandlerStateChange={handleTap}>
+              <View>
+                <Canvas
+                  style={{
+                    width: width * scale,
+                    height: height * scale,
+                    padding: 10,
+                    backgroundColor: LibStyle.colorBgGrey,
+
+                  }}>
+                  {
+                    getData()?.map(([x, y, name, status], i) => {
+                      const isSelected = getSelectedSeat()?.includes(name)
+                      const color = isSelected ? "#8EF67B" : getColorByStatus(status)
+                      const xSize = (boxSize / 2) + (x * boxSize)
+                      const ySize = (boxSize / 2) + (y * boxSize)
+
+                      const fontSize = getFontSizeByLength(name?.length);
+                      const font = getFontByLength(name?.length);
+
+                      const textWidthApprox = fontSize * name?.length * 0.6;
+                      const textX = xSize + (boxSize - textWidthApprox) / 2;
+
+                      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 && font && (
+                            <Text
+                              x={textX}
+                              y={(ySize) + boxSize * 0.60}
+                              color={"#020202"}
+                              text={name}
+                              transform={[{ scale }]}
+                              font={font} />
+                          )}
+                        </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'>{esp.lang("event/seat_map", "selected", String(getSelectedSeat().length), qty)}</LibTextstyle>
+        </View>
+        <EventButton
+          backgroundColor={getSelectedSeat()?.length < qty ? "#999" : LibStyle.colorPrimary}
+          testID={"save_btn"}
+          style={{ margin: 7 }}
+          label={esp.lang("event/seat_map", "save")}
+          onPress={() => {
+            let value = {
+              seat_label: getSelectedSeat()
+            }
+            if (getSelectedSeat()?.length < qty) {
+              LibToastProperty.show(esp.lang("event/seat_map", "seat_more", (qty - (getSelectedSeat()?.length)).toString()))
+            } else {
+              LibNavigation.sendBackResult(value, LibNavigation.getResultKey(props))
+            }
+          }}
+        />
+      </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/secure_page.debug.tsx

@@ -0,0 +1,34 @@
+// // useLibs
+
+// import { UserClass } from 'esoftplay/cache/user/class/import';
+// import { useEffect } from 'react';
+// import { CaptureProtection } from 'react-native-capture-protection';
+
+
+// export interface EventSecure_pageProps {
+
+// }
+// export default function m(): any {
+//   const can_screencapture = UserClass.state().get('config', 'can_screencapture')
+//   // const focus = useIsFocused()
+
+//   useEffect(() => {
+//     let subs: any
+//     if (!__DEV__)
+//       if (can_screencapture != 1) {
+//         CaptureProtection.prevent();
+//         // subs = RNPrevent?.addListener?.(() => { })
+//       }
+//     return () => {
+//       if (!__DEV__)
+//         if (can_screencapture != 1) {
+//           setTimeout(() => {
+//             CaptureProtection.allow();
+//           }, 500);
+//           // subs?.remove?.()
+//         }
+//     }
+//   }, [])
+
+//   return null
+// }

package/event/secure_page.live.tsx

@@ -0,0 +1,35 @@
+// // useLibs
+
+// import { UserClass } from 'esoftplay/cache/user/class/import';
+// import { useEffect } from 'react';
+// import RNPrevent from "react-native-screenshot-prevent";
+
+// export interface EventSecure_pageProps {
+
+// }
+// export default function m(): any {
+//   const can_screencapture = UserClass.state().get('config', 'can_screencapture')
+//   // const focus = useIsFocused()
+
+//   useEffect(() => {
+//     let subs: any
+//     if (!__DEV__)
+//       if (can_screencapture != 1) {
+//         RNPrevent?.enabled?.(true)
+//         RNPrevent?.enableSecureView?.()
+//         // subs = RNPrevent?.addListener?.(() => { })
+//       }
+//     return () => {
+//       if (!__DEV__)
+//         if (can_screencapture != 1) {
+//           setTimeout(() => {
+//             RNPrevent?.disableSecureView?.()
+//             RNPrevent?.enabled?.(false)
+//           }, 500)
+//           // subs?.remove?.()
+//         }
+//     }
+//   }, [])
+
+//   return null
+// }

package/event/secure_page.tsx

@@ -2,7 +2,8 @@
 
 import { UserClass } from 'esoftplay/cache/user/class/import';
 import { useEffect } from 'react';
-import RNPrevent from "react-native-screenshot-prevent";
+import { CaptureProtection } from 'react-native-capture-protection';
+
 
 export interface EventSecure_pageProps {
 
@@ -15,15 +16,15 @@ export default function m(): any {
     let subs: any
     if (!__DEV__)
       if (can_screencapture != 1) {
-        RNPrevent?.enabled?.(true)
-        RNPrevent?.enableSecureView?.()
+        CaptureProtection.prevent();
         // subs = RNPrevent?.addListener?.(() => { })
       }
     return () => {
       if (!__DEV__)
         if (can_screencapture != 1) {
-          RNPrevent?.disableSecureView?.()
-          RNPrevent?.enabled?.(false)
+          setTimeout(() => {
+            CaptureProtection.allow();
+          }, 500);
           // subs?.remove?.()
         }
     }