esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/event/tms_in_list.tsx

@@ -0,0 +1,264 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { EventTms_list_item } from 'esoftplay/cache/event/tms_list_item/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventEntrancre_listArgs {
+
+}
+export interface EventEntrancre_listProps {
+
+}
+export default function m(props: EventEntrancre_listProps): any {
+  const {
+    price_type,
+    url_ticket_detail,
+    url_ticket_update,
+    tickets,
+    gate_type,
+    qr_code,
+    event_id,
+    selectGate,
+    typeScanner,
+    event_title,
+    scan_type,
+    configPriority, }: any = LibNavigation.getArgsAll(props)
+
+  const [ticket, setTicket] = useSafeState<any>()
+  const [list, setList] = useSafeState<any>()
+  const [useAll, setUseAll] = useSafeState<boolean>(false)
+  const dialogQty = useRef<LibSlidingup>(null)
+
+  let args = {
+    price_type: price_type,
+    gate_type: gate_type,
+    qr_code: qr_code,
+    event_id: event_id,
+    event_title: event_title,
+    selectGate: selectGate,
+    typeScanner: typeScanner,
+    url_ticket_detail: url_ticket_detail,
+    url_ticket_update: url_ticket_update,
+    qty: 1,
+    configPriority: configPriority,
+    scan_type: scan_type
+  }
+
+  useEffect(() => {
+    if (tickets?.length == 1) {
+      let item = tickets?.[0]
+      let a = new Array(Number(item?.qty_left)).fill({
+        ...item,
+        selected: 0
+      })
+
+      let b = a?.map((item: any, i: number) => {
+        return { ...item, selected: i == 0 ? 1 : 0 }
+      })
+
+      setUseAll(false)
+      setList(b)
+      setTicket(item)
+      LibUtils.debounce(() => {
+        if (item.hasOwnProperty("exhibitor_name")) {
+          LibNavigation.replace('event/tms_idcard', {
+            selectedTicket: item,
+            ...args
+          })
+        } else {
+          dialogQty.current!.show()
+        }
+      }, 100)
+    }
+  }, [])
+
+
+  useEffect(() => {
+    setUseAll(list?.some((x: any) => x.selected == 0) ? false : true)
+  }, [list])
+
+  function useTicket() {
+    // LibNavigation.back()
+    let arg = {
+      ...args,
+      qty: list?.filter((it: any) => it.selected).length
+    }
+
+    if (tickets?.length == 1) {
+      LibNavigation.replace('event/tms_in_success', {
+        selectedTicket: ticket,
+        ...arg
+      })
+    } else {
+      if (configPriority) { // ini untuk memunculkan priority
+        if (configPriority?.filter?.((item: any) => item.id == ticket.price_id).length > 0) {
+          LibNavigation.replace('event/tms_in_success', {
+            selectedTicket: ticket,
+            ...arg
+          })
+        } else {
+          LibNavigation.replace('event/tms_in_warning', {
+            selectedTicket: ticket,
+            is_from_list: 1, // digunakan untuk membedakan navigasi kalau scan QR Member
+            ...arg
+          })
+        }
+      } else {
+        LibNavigation.replace('event/tms_in_success', {
+          selectedTicket: ticket,
+          ...arg
+        })
+      }
+    }
+
+  }
+
+  function renderItem(item: any, i?: number) {
+    return (
+      <EventTms_list_item
+        key={i}
+        item={item}
+        onPress={() => {
+          if (item.text == "") {
+            if (item.qty_left == 0) {
+              LibNavigation.back()
+              LibNavigation.navigate('event/tms_in_failed', {
+                text: esp.lang("event/tms_in_list", "ticket_habis"),
+                ticketItem: item,
+                ...args
+              })
+            } else {
+              let a = new Array(Number(item?.qty_left)).fill({
+                ...item,
+                selected: 0
+              })
+
+              let b = a?.map((item: any, i: number) => {
+                return { ...item, selected: i == 0 ? 1 : 0 }
+              })
+
+              setUseAll(false)
+              setList(b)
+              setTicket(item)
+              LibUtils.debounce(() => {
+                if (item.hasOwnProperty("exhibitor_name")) {
+                  LibNavigation.replace('event/tms_idcard', {
+                    selectedTicket: item,
+                    ...args
+                  })
+                } else {
+                  dialogQty.current!.show()
+                }
+              }, 100)
+            }
+          } else {
+            LibNavigation.back()
+            LibNavigation.navigate('event/tms_in_failed', {
+              text: item.text,
+              ...args
+            })
+          }
+        }}
+      />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={esp.lang("event/tms_in_list", "header_title")} subtitle='TMS' />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingTop: 15, paddingBottom: 0 }}>
+        <ScrollView style={{ flex: 1 }}>
+          {
+            tickets?.map(renderItem)
+          }
+        </ScrollView>
+      </View>
+
+      {/* dialog qty */}
+      <LibSlidingup ref={dialogQty}>
+        <View style={{ borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 20, paddingBottom: 0, backgroundColor: '#fff', maxHeight: LibStyle.height - (LibStyle.height / 3) }}>
+          <Text allowFontScaling={false} style={applyStyle({ letterSpacing: 1, fontSize: 30, marginTop: 0, fontWeight: 'bold', textAlign: "center", textAlignVertical: 'center', color: '#000', margin: 15 })} >{esp.lang("event/tms_in_list", "total_ticket", list?.length)}</Text>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 20 }} >
+            <TouchableOpacity
+              onPress={() => {
+                const index = findLastIndex(list, (x: any) => x.selected == 1)
+                if (index > 0) {
+                  setList(LibObject.set(list, 0)(index, 'selected'))
+                }
+              }}
+              style={{ height: 70, width: 70, borderRadius: 10, backgroundColor: '#c1c2c3', alignItems: 'center', justifyContent: 'center' }} >
+              <LibIcon name='minus' size={50} />
+            </TouchableOpacity>
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+              <Text style={{ fontSize: 50 }} >{list?.filter?.((x: any) => x.selected == 1).length}</Text>
+            </View>
+            <TouchableOpacity
+              onPress={() => {
+                const index = list?.findIndex?.((x: any) => x.selected == 0)
+                if (index > -1)
+                  setList(LibObject.set(list, 1)(index, 'selected'))
+              }}
+              style={{ height: 70, width: 70, borderRadius: 10, backgroundColor: '#c1c2c3', alignItems: 'center', justifyContent: 'center' }} >
+              <LibIcon name='plus' size={50} />
+            </TouchableOpacity>
+          </View>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10, marginBottom: 20, alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={'tail'} style={{ flex: 1, fontWeight: 'bold', fontSize: 14, letterSpacing: 1 }}>{esp.lang("event/tms_in_list", "total_ticket_use", list?.filter((it: any) => it.selected).length)}</Text>
+            <TouchableOpacity onPress={() => {
+              let a = list?.map((item: any, i: number) => {
+                return { ...item, selected: useAll ? 0 : 1 }
+              })
+              setList(a)
+            }} style={applyStyle({ paddingHorizontal: 10, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 35, borderRadius: 16, backgroundColor: useAll ? LibStyle.colorRed : LibStyle.colorGreen, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center' })} >
+              <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff', marginRight: 15 })} >{useAll ? esp.lang("event/tms_in_list", "cancel_use") : esp.lang("event/tms_in_list", "use_all")}</Text>
+              <LibIcon.Ionicons size={18} color="#fff" name={useAll ? "close" : "checkmark-done"} />
+            </TouchableOpacity>
+          </View>
+
+          <EventButton
+            label={esp.lang("event/tms_in_list", "btn_entrance")}
+            style={{ borderRadius: 10, marginHorizontal: 5, marginBottom: 10 }}
+            backgroundColor={list?.filter((it: any) => it.selected).length == 0 ? LibStyle.colorBgGrey : LibStyle.colorGreen}
+            onPress={() => {
+              if (list?.filter((it: any) => it.selected).length == 0) {
+                LibToastProperty.show(esp.lang("event/tms_in_list", "ticket_not_select"))
+              } else {
+                useTicket()
+              }
+            }}
+          />
+        </View>
+
+      </LibSlidingup >
+
+
+    </View >
+  )
+}
+
+function findLastIndex(arr: any[], condition: (value: any, index: number, obj: any[]) => unknown) {
+  const reversedArray = arr.slice().reverse();
+  const indexInReversedArray = reversedArray.findIndex(condition);
+
+  if (indexInReversedArray === -1) {
+    return -1; // No matching element found
+  }
+
+  const lastIndex = arr.length - 1 - indexInReversedArray;
+  return lastIndex;
+}

package/modules/event/tms_in_log.tsx

@@ -0,0 +1,130 @@
+// withHooks
+import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+import { EventTms_in_successProperty } from 'esoftplay/cache/event/tms_in_success/import';
+import { EventTms_logProperty } from 'esoftplay/cache/event/tms_log/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+import React, { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+export interface EventTms_in_logArgs {
+
+}
+export interface EventTms_in_logProps {
+  onPress: (type: string, title: string) => void
+}
+
+export interface EntranceLogItem {
+  text: string
+  subtitle: string
+  value: string
+  onPress: () => void
+  valuecolor?: string
+}
+
+function Item(props: EntranceLogItem) {
+  return (
+    <Pressable
+      onPress={() => {
+        props.onPress()
+      }} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginHorizontal: 15, paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: LibStyle.colorLightGrey }}>
+      <View>
+        <LibTextstyle text={props.text} textStyle="subhead" />
+        <Text style={{ letterSpacing: 0.5, marginTop: 3, fontSize: 12, color: LibStyle.colorBrown }}>{props.subtitle}</Text>
+      </View>
+      <LibTextstyle text={LibUtils.number(props.value)} style={{ color: props.valuecolor ? props.valuecolor : "#000" }} textStyle="title2" />
+    </Pressable>
+  )
+}
+
+export default function m(props: EventTms_in_logProps): any {
+  const log = EventTms_homeProperty.counterState().useSelector(s => s)
+  const backup = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
+  const [loading, setLoading] = useSafeState<boolean>(true)
+  const timeout = useTimeout()
+
+  function syncData() {
+    EventTms_homeProperty.subscribeSync().trigger(EventTms_in_successProperty.syncUsedTiket().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  function forceSyncData() {
+    EventTms_homeProperty.subscribeSyncReset().trigger(EventTms_in_successProperty.syncUsedTiket().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  useEffect(() => {
+    syncData()
+  }, [])
+
+  if (loading) {
+    return <LibLoading />
+  }
+
+  const sumValue = EventTms_logProperty.sumValuesPerCategory(log)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff', margin: 17, marginTop: 0, paddingBottom: 10, marginBottom: 0, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, ...LibStyle.elevation(2) }}>
+      <Item text='Scan' subtitle={esp.lang("event/tms_in_log", "ticket_scanned")} value={sumValue?.entrance_scan} onPress={() => {
+        if (sumValue?.entrance_scan) {
+          props.onPress("entrance_scan", esp.lang("event/tms_in_log", "scan_gate"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/tms_in_log", "qty_ticket_scan")} subtitle={esp.lang("event/tms_in_log", "qty_ticket_scanned")} value={sumValue?.entrance_ticket} onPress={() => {
+        if (sumValue?.entrance_ticket) {
+          props.onPress("entrance_ticket", esp.lang("event/tms_in_log", "qty_ticket_scan"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/tms_in_log", "open_gate")} subtitle={esp.lang("event/tms_in_log", "ticket_scanned_id")} value={sumValue?.entrance_opengate} onPress={() => {
+        if (sumValue?.entrance_opengate) {
+          props.onPress("entrance_opengate", esp.lang("event/tms_in_log", "open_gate"))
+        }
+      }} />
+      <Item text={esp.lang("event/tms_in_log", "opengate_idcard")} subtitle={esp.lang("event/tms_in_log", "idcard_scanned_in")} value={sumValue?.entrance_opengate_idcard} onPress={() => {
+        if (sumValue?.entrance_opengate_idcard) {
+          props.onPress("entrance_opengate_idcard", esp.lang("event/tms_in_log", "opengate_idcard"))
+        }
+      }} />
+      <Item text={esp.lang("event/tms_in_log", "data_send")} subtitle={esp.lang("event/tms_in_log", "data_send_to_server")} value={sumValue?.entrance_send} onPress={() => {
+        if (sumValue?.entrance_send) {
+          props.onPress("entrance_send", esp.lang("event/tms_in_log", "data_send"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/tms_in_log", "data_not_send")} subtitle={esp.lang("event/tms_in_log", "data_not_send_to_server")} value={backup.length} valuecolor={LibStyle.colorRed} onPress={() => {
+
+      }} />
+
+      <View style={{ marginHorizontal: 15 }} >
+        <UseCondition
+          if={backup.length == 0}
+          fallback={
+            <Pressable onPress={() => {
+
+              setLoading(true)
+              forceSyncData()
+            }}>
+              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/tms_in_log", "please_wait")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/tms_in_log", "press_here")}</Text> {esp.lang("event/tms_in_log", "press_here2")}</Text>
+            </Pressable>
+          } >
+          <LibTextstyle textStyle='callout'
+            style={{ textAlign: 'center', marginTop: 10 }}
+            text={esp.lang("event/tms_in_log", "all_data_send")} />
+        </UseCondition>
+      </View>
+    </View >
+  )
+}
+

package/modules/event/tms_in_success.tsx

@@ -0,0 +1,153 @@
+// withHooks
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { useRef } from 'react';
+
+import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect } from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+
+
+export interface EventTms_in_successArgs {
+
+}
+export interface EventTms_in_successProps {
+
+}
+
+export const syncUsedTiketState = useGlobalState<any[]>([], { persistKey: 'event_entrance_success_tiket_sync', loadOnInit: true, inFastStorage: true })
+export function syncUsedTiket(): useGlobalReturn<any[]> {
+  return syncUsedTiketState
+}
+
+export default function m(props: EventTms_in_successProps): any {
+  const { scan_type, url_ticket_update, url_ticket_detail, price_type, selectedTicket, gate_type, qr_code, event_id, selectGate, typeScanner, event_title, qty, configPriority } = LibNavigation.getArgsAll<any>(props)
+  // const { set } = EventFirebase_socket()
+  const [isPaused, setIsPaused] = useSafeState<boolean>(false)
+  const progress = useRef(new Animated.Value(0)).current;
+  const animation = useRef<Animated.CompositeAnimation | null>(null);
+  const [pausedValue, setPausedValue] = useSafeState(0);
+
+  function animateProgressBar() {
+    const duration = 1000; // Ubah durasi animasi sesuai kebutuhan Anda
+
+    if (!isPaused) {
+      animation.current = Animated.timing(progress, {
+        toValue: 1,
+        duration: duration - duration * pausedValue,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      });
+
+      animation.current.start(({ finished }) => {
+        if (finished) {
+          setIsPaused(false);
+          setPausedValue(0);
+
+          // script next nya disini
+          LibNavigation.replace('component/scanner', {
+            selectGate: selectGate,
+            fromPage: 'event/tms_home',
+            event_id: event_id,
+            event_title: event_title,
+            typeScanner: typeScanner,
+            gate_type: gate_type,
+            price_type: price_type,
+            url_ticket_detail: url_ticket_detail,
+            url_ticket_update: url_ticket_update,
+            configPriority: configPriority,
+            scan_type: scan_type
+          })
+        }
+      });
+    } else {
+      if (animation.current) {
+        animation.current.stop(); // Hentikan animasi
+        animation.current = null;
+      }
+      setPausedValue(progress._value);
+    }
+
+    setIsPaused(!isPaused);
+  }
+
+  let _qty = qty ? qty : 1
+
+  useEffect(() => {
+    entrance()
+    animateProgressBar()
+  }, [])
+
+
+  function entrance() {
+    useTicket()
+  }
+
+  function useTicket() {
+    let url = url_ticket_update
+
+    let post = {
+      "target-url": `https://api.${esp.config().domain}/gate_checkin`,
+      price_id: selectedTicket?.price_id,
+      qr: encodeURIComponent(qr_code),
+      trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
+      event_id: event_id,
+      gate_id: selectGate?.id,
+      is_tms: 1,
+      qty: _qty,
+      tms_id: UserClass.state().get()?.id,
+      scanned: LibUtils.moment().format('YYYY-MM-DD HH:mm:ss'),
+    }
+    EventTms_homeProperty.addCounterEntranceOpenGate(1, selectedTicket?.price_id)
+    syncUsedTiketState.set(LibObject.push(syncUsedTiketState.get(), [url, post])())
+    EventTms_homeProperty.subscribeSync().trigger(syncUsedTiketState.get())
+  }
+
+  const widthInterpolate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View style={{ flex: 1 }}>
+      <LibStatusbar style='light' />
+      <Pressable
+        onPressIn={animateProgressBar}
+        onPressOut={animateProgressBar}
+        style={{ backgroundColor: '#000', height: LibStyle.height }}>
+        <LibPicture source={{ uri: selectedTicket && selectedTicket?.user_image != "" ? decodeURIComponent(selectedTicket?.user_image) : 'https://www.w3schools.com/howto/img_avatar.png' }} style={{ width: LibStyle.width, height: LibStyle.height - (LibStyle.height / 4) }} resizeMode={"cover"} />
+
+        <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT + 5, alignSelf: 'center', height: 5, width: LibStyle.width - 20, backgroundColor: 'rgba(255,255,255,0.3)', borderRadius: 10, position: 'absolute', top: 5, }}>
+          <Animated.View style={{ width: widthInterpolate, height: 5, backgroundColor: LibStyle.colorPrimary, borderRadius: 10, }} />
+        </View>
+
+        <LinearGradient
+          // Background Linear Gradient
+          style={{
+            height: LibStyle.height - (LibStyle.height / 3),
+            width: LibStyle.width,
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+          colors={['rgba(255,255,255,0)', 'rgba(0,0,0,0.55)', 'rgba(0,0,0,1)', 'rgba(0,0,0,1)']}>
+          <View style={{ flex: 1, padding: 15, justifyContent: 'flex-end', paddingBottom: 100, alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', flexWrap: 'wrap', fontSize: 35, letterSpacing: 2, fontWeight: '900', color: '#fff' }}>{selectedTicket?.title?.split("+").join(' ')}</Text>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, marginTop: 20, color: '#fff' }}>{gate_type == "1" ? esp.lang("event/tms_in_success", "in") : esp.lang("event/tms_in_success", "out")}</Text>
+          </View>
+
+        </LinearGradient>
+      </Pressable>
+    </View>
+  )
+}

package/modules/event/tms_in_warning.tsx

@@ -0,0 +1,91 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_in_warningArgs {
+
+}
+export interface EventTms_in_warningProps {
+
+}
+export default function m(props: EventTms_in_warningProps): any {
+  const {
+    url_ticket_update,
+    url_ticket_detail,
+    price_type,
+    selectedTicket,
+    gate_type,
+    qr_code,
+    event_id,
+    selectGate,
+    typeScanner,
+    event_title,
+    qty,
+    configPriority,
+    scan_type,
+    is_from_list } = LibNavigation.getArgsAll<any>(props)
+
+
+  let args = {
+    price_type: price_type,
+    gate_type: gate_type,
+    qr_code: qr_code,
+    event_id: event_id,
+    event_title: event_title,
+    selectGate: selectGate,
+    typeScanner: typeScanner,
+    url_ticket_detail: url_ticket_detail,
+    url_ticket_update: url_ticket_update,
+    qty: qty,
+    configPriority: configPriority,
+    scan_type: scan_type
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: selectedTicket?.color }}>
+      <View style={{ padding: 15, flex: 4, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+        <Text allowFontScaling={false} style={{ color: EventOrder_itemProperty.textColor(selectedTicket?.color), letterSpacing: 1, fontSize: 20, textAlign: 'center', fontWeight: 'normal' }}>{esp.lang("event/tms_in_warning", "your_ticket")}</Text>
+        <Text allowFontScaling={false} numberOfLines={5} ellipsizeMode="tail" style={{ marginVertical: 15, letterSpacing: 2, color: EventOrder_itemProperty.textColor(selectedTicket?.color), fontSize: 32, textAlign: 'center', fontWeight: 'bold' }}>{selectedTicket?.title}</Text>
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 20, color: EventOrder_itemProperty.textColor(selectedTicket?.color), letterSpacing: 1, fontSize: 20, textAlign: 'center', fontWeight: 'normal' }}>{esp.lang("event/tms_in_warning", "confirm")}</Text>
+      </View>
+      <View style={{ flex: 1, padding: 15, justifyContent: 'flex-end' }}>
+        <TouchableOpacity onPress={() => {
+          if (is_from_list == 1) {
+            LibNavigation.replace('event/tms_in_success', {
+              selectedTicket: selectedTicket,
+              ...args
+            })
+          } else {
+            if (selectedTicket?.qty > 1) {
+              let tikets = [selectedTicket]
+              LibNavigation.replace('event/tms_in_list', {
+                tickets: tikets,
+                ...args
+              })
+            } else {
+              LibNavigation.replace('event/tms_in_success', {
+                selectedTicket: selectedTicket,
+                ...args
+              })
+            }
+          }
+        }} style={applyStyle({ marginBottom: 20, width: LibStyle.width - 30, height: 40, borderRadius: 16, backgroundColor: EventOrder_itemProperty.textColor(selectedTicket?.color), flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: selectedTicket?.color, marginRight: 15 })} >{esp.lang("event/tms_in_warning", "process")}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => {
+          LibNavigation.back()
+        }} style={applyStyle({ width: LibStyle.width - 30, borderWidth: 1, borderColor: EventOrder_itemProperty.textColor(selectedTicket?.color), height: 40, borderRadius: 16, backgroundColor: selectedTicket?.color, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: EventOrder_itemProperty.textColor(selectedTicket?.color), marginRight: 15 })} >{esp.lang("event/tms_in_warning", "cancel")}</Text>
+        </TouchableOpacity>
+      </View>
+
+    </View>
+  )
+}