esoftplay-event 0.0.0-a

package/event/turnstile_event_item.tsx

@@ -0,0 +1,41 @@
+// withHooks
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export interface EventTurnstile_event_itemArgs {
+
+}
+export interface EventTurnstile_event_itemProps {
+  image: string,
+  title: string,
+  start_date: string,
+  end_date: string,
+  onPress: () => void
+}
+
+export default function m(props: EventTurnstile_event_itemProps): any {
+  let itemWidth = (LibStyle.width - 20)
+  const styleId_bwKGY: any = { margin: 10, backgroundColor: '#fff', width: itemWidth, borderRadius: 10, overflow: 'hidden', ...LibStyle.elevation(2) }
+  const styleId_Z16usbs: any = { borderRadius: 10, width: itemWidth, height: itemWidth / 3 }
+
+  return (
+    <TouchableOpacity onPress={props.onPress} style={styleId_bwKGY} >
+      <LibPicture source={{ uri: props.image }} style={styleId_Z16usbs} resizeMode='cover' />
+      <Text allowFontScaling={false} style={styleId_Z9MfLY}>{props.title}</Text>
+      <View style={styleId_2oI6AB}>
+        <LibIcon name='calendar-today' color="#9b9b9b" size={15} />
+        <Text allowFontScaling={false} style={styleId_TCgQl}>{LibUtils.getDateRange(props.start_date, props.end_date, " - ")}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styleId_Z9MfLY: any = { fontFamily: "ArialBold", fontSize: 12, color: "#000", margin: 10 }
+const styleId_2oI6AB: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center', margin: 10, marginTop: -5 }
+const styleId_TCgQl: any = { marginLeft: 5, fontFamily: "Arial", fontSize: 10, color: "#9b9b9b" }

package/event/turnstile_event_list.tsx

@@ -0,0 +1,69 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { EventTurnstile_event_item } from 'esoftplay/cache/event/turnstile_event_item/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+
+
+export interface EventTurnstile_event_listArgs {
+
+}
+export interface EventTurnstile_event_listProps {
+
+}
+export default function m(props: EventTurnstile_event_listProps): any {
+  const [result, setResult] = useSafeState<any>(undefined)
+  const [error, setError] = useSafeState<any>()
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  useEffect(() => {
+    loadDataEvent()
+  }, [])
+
+  function loadDataEvent() {
+    new LibCurl("gate_turnstile_event", null, (res, msg) => {
+      setResult(res)
+    }, (err) => {
+      setError(err)
+    }, 1)
+  }
+
+  function renderItem(item: any) {
+    return (
+      <EventTurnstile_event_item onPress={() => {
+        LibNavigation.sendBackResult(item)
+      }} image={item.event_image} title={item.event_name} start_date={item.event_start_date} end_date={item.event_end_date} />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/turnstile_event_list", "header_title")} />
+      {
+        !result && !error ? <LibLoading /> :
+          <LibList
+            data={result}
+            onRefresh={loadDataEvent}
+            ListEmptyComponent={
+              <ComponentMessage message={error?.message} />
+            }
+            renderItem={renderItem}
+
+          />
+      }
+
+    </View >
+  )
+}

package/event/turnstile_event_ticket.tsx

@@ -0,0 +1,95 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTurnstile_event_ticketArgs {
+
+}
+export interface EventTurnstile_event_ticketProps {
+
+}
+export default function m(props: EventTurnstile_event_ticketProps): any {
+  const { event_id } = LibNavigation.getArgsAll(props)
+  const [result, setResult, getResult] = useSafeState<any>(undefined)
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  useEffect(() => {
+    loadDataGate()
+  }, [])
+
+  function loadDataGate() {
+    new LibCurl("gate_turnstile_event_ticket?event_id=" + event_id, null, (res, msg) => {
+      res?.push({
+        id: 0,
+        type: esp.lang("event/turnstile_event_ticket", "id")
+      })
+      const a = res.length > 0 && res.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 1
+        })
+      })
+
+      setResult(a)
+    }, (err) => {
+      // setError(err)
+    }, 1)
+  }
+
+  function renderItem(item: any, i: number) {
+    let _selectTypeTicket = item.checked == 1
+    return (
+      <TouchableOpacity activeOpacity={item.id == 0 ? 1 : 0} onPress={() => {
+        if (item.id != 0) {
+          setResult(LibObject.set(getResult(), item.checked == 0 ? 1 : 0)(i, "checked"))
+        }
+
+      }} style={applyStyle({ borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey })} >
+        <View style={applyStyle({ margin: 15, width: LibStyle.width, flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' })} >
+          <LibIcon name={_selectTypeTicket ? "checkbox-marked" : "checkbox-blank-outline"} style={{ /* opacity: textOpacity */ }} size={18} color={item.id == 0 ? "#c9c9c9" : _selectTypeTicket ? "#3ea4dc" : "#434343"} />
+          <Text allowFontScaling={false} style={applyStyle({ marginLeft: 10, fontFamily: "Arial", fontSize: 13, /* opacity: textOpacity */fontWeight: "bold", fontStyle: "normal", letterSpacing: 0/* , color: LibStyle.colorBlue */ })} >{item.type}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  function sendDataBack() {
+    let _ids = result.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+    let data = {
+      ids: _ids,
+      title: esp.lang("event/turnstile_event_ticket", "ticket_type", _ids.length)
+    }
+    LibNavigation.sendBackResult(data)
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#fff" }}>
+      <ComponentHeader title={esp.lang("event/turnstile_event_ticket", "header_title")} />
+      <LibList
+        data={result}
+        onRefresh={loadDataGate}
+        renderItem={renderItem}
+      />
+
+      <ComponentButton label={esp.lang("event/turnstile_event_ticket", "label_next")} onPress={() => {
+        sendDataBack()
+      }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
+    </View>
+  )
+}

package/event/turnstile_settings.tsx

@@ -0,0 +1,327 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTurnstile_settingsArgs {
+
+}
+export interface EventTurnstile_settingsProps {
+
+}
+
+export interface Turnstile_settingsItem2 extends EventTurnstile_settingsProps {
+  title: string
+  value: string
+  iconLeft: string
+  isTouchable: boolean
+  isDisable?: boolean
+  onPress: () => void,
+}
+
+function Item(props: Turnstile_settingsItem2) {
+  return (
+    <Pressable onPress={props.onPress} style={{ backgroundColor: props.isDisable ? "#f1f2f3" : "transparent", flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, paddingTop: 7, paddingHorizontal: 10, paddingRight: 5 }}>
+      <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+        <LibIcon name={props.iconLeft} style={{ opacity: props.isDisable ? 0.2 : 1 }} />
+        <View style={{ marginLeft: 8, flex: 2, flexDirection: 'row', opacity: props.isDisable ? 0.2 : 1 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12 }}>{props.title}</Text>
+          <Text allowFontScaling={false} style={{ color: LibStyle.colorRed }}>*</Text>
+        </View>
+      </View>
+      <View style={{ marginLeft: 10, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+        <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='middle' style={{ opacity: props.isDisable ? 0.5 : 1, flex: 1, textAlign: 'right', marginRight: 5, fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorTextPrimary }}>{props.value}</Text>
+        {
+          props.isTouchable &&
+          <LibIcon name='chevron-right' color={LibStyle.colorTextPrimary} style={{ opacity: props.isDisable ? 0.4 : 1 }} />
+        }
+        {/* <LibIcon name='logo' color={LibStyle.colorTextPrimary} /> */}
+      </View>
+    </Pressable>
+  )
+}
+
+export const config = esp.config();
+
+export default function m(props: EventTurnstile_settingsProps): any {
+  const { serial_number } = LibNavigation.getArgsAll<any>(props)
+  const [userScan, setUserScan] = useSafeState<boolean>(false)
+  const [forExhibitor, setForExhibitor] = useSafeState<boolean>(false)
+  const [result, setResult] = useSafeState<any>(undefined)
+  const [selectedEvent, setSelectedEvent] = useSafeState<any>()
+  const [selectedGate, setSelectedGate] = useSafeState<any>()
+  const [selectedTypeGate, setSelectedTypeGate] = useSafeState<any>()
+  const [selectedTypeTicket, setSelectedTypeTicket] = useSafeState<any>()
+
+  const dialogTypeGate = useRef<ComponentSlidingup>(null)
+
+
+  const typeGate = [
+    {
+      id: 1,
+      title: esp.lang("event/turnstile_settings", "entrance"),
+      icon: 'login'
+    },
+    {
+      id: 0,
+      title: esp.lang("event/turnstile_settings", "exit"),
+      icon: 'logout'
+    }
+  ]
+
+
+  useEffect(() => {
+    checkStatus()
+  }, [])
+
+
+  function checkStatus() {
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile?serial_number=" + serial_number, null, (res, msg) => {
+      setResult(res)
+      LibProgress.hide()
+      // default value
+      let defaultValue = res?.turnstile_data_backup
+      let dataEvent = {
+        event_id: defaultValue.event_id,
+        event_name: defaultValue.event_name
+      }
+      setSelectedEvent(dataEvent)
+
+      let dataGate = {
+        gate_id: defaultValue.gate_id,
+        gate_name: defaultValue.gate_name
+      }
+      setSelectedGate(dataGate)
+
+      let dataTypeGate = {
+        id: defaultValue.gate_type,
+        title: defaultValue.gate_type == 1 ? esp.lang("event/turnstile_settings", "entrance") : esp.lang("event/turnstile_settings", "exit")
+      }
+      setSelectedTypeGate(dataTypeGate)
+
+      let dataTypeTicket = {
+        ids: defaultValue.ticket_types,
+        title: defaultValue.ticket_types.length + esp.lang("event/turnstile_settings", "type_ticket")
+      }
+      setSelectedTypeTicket(dataTypeTicket)
+
+    }, (error) => {
+      LibProgress.hide()
+      registerTurnstile()
+    }, 1)
+  }
+
+  function registerTurnstile() {
+    let post = {
+      serial_number: serial_number
+    }
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile", post, (res, msg) => {
+      LibProgress.hide()
+    }, (error) => {
+      LibProgress.hide()
+    }, 1)
+  }
+
+  function loadDataGate(event_id: any) {
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile_event_ticket?event_id=" + event_id, null, (res, msg) => {
+      const a = res.length > 0 && res.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 1
+        })
+      })
+
+      let _ids = a.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+      let data = {
+        ids: _ids,
+        title: _ids.length + esp.lang("event/turnstile_settings", "type_ticket")
+      }
+      setSelectedTypeTicket(data)
+      LibProgress.hide()
+    }, (err) => {
+      LibProgress.hide()
+      LibDialog.warning(esp.lang("event/turnstile_settings", "err"), err?.message)
+    }, 1)
+  }
+
+  function checkInput() {
+    if (!selectedEvent) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+      return false
+    }
+    if (!selectedGate) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_gate_event"))
+      return false
+    }
+    if (!selectedTypeGate) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_entrance_or_exit"))
+      return false
+    }
+    if (!selectedTypeTicket) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_type_ticket"))
+      return false
+    }
+
+    return true
+  }
+
+  function settingTurnstile() {
+    LibDialog.warningConfirm(esp.lang("event/turnstile_settings", "warning"), esp.lang("event/turnstile_settings", "submit_this"), esp.lang("event/turnstile_settings", "yes"), () => {
+      let post = {
+        event_id: selectedEvent?.event_id,
+        gate_id: selectedGate?.gate_id,
+        gate_type: selectedTypeGate?.id,
+        ticket_types: forExhibitor ? "" : selectedTypeTicket?.ids.join('|'),
+        user_scan: userScan ? 1 : 0,
+        serial_number: serial_number,
+        type: forExhibitor ? 2 : 1 //"type":"1=scan tiket, 2 = scan idcard, 3 = scan tiket dan idcard "
+      }
+
+      LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+      new LibCurl("gate_turnstile_setting", post, (res, msg) => {
+        LibProgress.hide()
+        LibNavigation.back()
+        LibNavigation.navigate('event/turnstile_settings_otp', { data: res, serial_number: serial_number })
+      }, (err) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/turnstile_settings", "err1"), err?.message)
+      }, 1)
+
+    }, esp.lang("event/turnstile_settings", "no"), () => {
+
+    })
+  }
+
+  function renderTypeGate(item: any, i: number) {
+    const styleId_Z2dCK0A: any = { backgroundColor: item.id == 1 ? LibStyle.colorGreen : LibStyle.colorRed, padding: 10, borderRadius: 5, ...LibStyle.elevation(2), justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
+    return (
+      <TouchableOpacity onPress={() => {
+        setSelectedTypeGate(item)
+        dialogTypeGate.current!.hide()
+      }} key={i} style={styleId_Z2dCK0A}>
+        <LibIcon name={item.icon} color='#fff' />
+        <Text allowFontScaling={false} style={styleId_QwGnx}>{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      <ScrollView>
+        <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10, ...LibStyle.elevation(2) }}>
+          <Item isTouchable onPress={() => {
+            LibNavigation.navigateForResult('event/turnstile_event_list', { api_key: result?.api_key }).then((item: any) => {
+              setSelectedEvent(item)
+              setSelectedGate(undefined)
+              setSelectedTypeGate(undefined)
+              setSelectedTypeTicket(undefined)
+
+              // set Type ticket
+              loadDataGate(item.event_id)
+            })
+          }} iconLeft='calendar-today' title={esp.lang("event/turnstile_settings", "select_event")} value={selectedEvent?.event_name} />
+          <Item isTouchable iconLeft='door-open' title={esp.lang("event/turnstile_settings", "select_gate")} value={selectedGate?.gate_name} onPress={() => {
+            if (!selectedEvent) {
+              LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+            } else {
+              LibNavigation.navigateForResult('event/turnstile_event_gate', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
+                setSelectedGate(item)
+              })
+            }
+          }} />
+
+
+          <Item isTouchable iconLeft='login' title={esp.lang("event/turnstile_settings", "select_type_gate")} value={selectedTypeGate?.title} onPress={() => {
+            dialogTypeGate.current!.show()
+          }} />
+
+          {/* untuk turnstile khusus exhibitor */}
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon name={"id-card"} />
+              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "id_card")}</Text>
+            </View>
+            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+              <MarketToggle value={forExhibitor} onChangeValue={() => {
+                setForExhibitor(forExhibitor == true ? false : true)
+                if (forExhibitor) {
+                  setForExhibitor(false)
+                } else {
+                  let dataTypeTicket = {
+                    ids: '',
+                    title: ''
+                  }
+                  setSelectedTypeTicket(dataTypeTicket)
+
+                  setForExhibitor(true)
+                }
+
+              }} type='success' />
+            </View>
+          </View>
+
+          <Item isDisable={forExhibitor} isTouchable iconLeft='ticket-confirmation' title={esp.lang("event/turnstile_settings", "select_type_ticket")} value={selectedTypeTicket?.title} onPress={() => {
+            if (forExhibitor == false) {
+              if (!selectedEvent) {
+                LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+              } else {
+                LibNavigation.navigateForResult('event/turnstile_event_ticket', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
+                  setSelectedTypeTicket(item)
+                })
+              }
+            }
+          }} />
+
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon name={"magnify-scan"} />
+              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "Enable_User_Scan")}</Text>
+            </View>
+            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+              <MarketToggle value={userScan} onChangeValue={() => { setUserScan(userScan == true ? false : true) }} type='success' />
+            </View>
+          </View>
+        </View>
+
+      </ScrollView>
+
+      <ComponentButton label={esp.lang("event/turnstile_settings", "submit")} onPress={() => {
+        if (checkInput()) {
+          settingTurnstile()
+        }
+      }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
+
+
+      <ComponentSlidingup ref={dialogTypeGate}>
+        <View style={{ backgroundColor: '#f6f6f6', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingBottom: 25, paddingHorizontal: 19, }}>
+          <Text allowFontScaling={false} style={{ marginTop: 15, marginBottom: 23, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/turnstile_settings", "please_select_type_gate")}</Text>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+            {
+              typeGate?.map(renderTypeGate)
+            }
+          </View>
+
+        </View>
+      </ComponentSlidingup>
+    </View >
+  )
+}
+const styleId_QwGnx: any = { marginTop: 8, fontFamily: 'SFProText', fontSize: 12, color: '#fff' }

package/event/turnstile_settings_otp.tsx

@@ -0,0 +1,58 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventTurnstile_settings_otpArgs {
+
+}
+export interface EventTurnstile_settings_otpProps {
+
+}
+export default function m(props: EventTurnstile_settings_otpProps): any {
+  const { data, serial_number } = LibNavigation.getArgsAll(props)
+
+  useEffect(() => {
+    loadData()
+    LibAutoreload.set(() => {
+      loadData()
+    }, 6000)
+    return () => LibAutoreload.clear()
+  }, [])
+
+  function loadData() {
+    let post = {
+      serial_number: serial_number
+    }
+    new LibCurl('gate_turnstile_setted', post, (res, msg) => {
+      LibAutoreload.clear()
+      LibNavigation.back()
+      LibNavigation.navigate('event/turnstile_settings_status', { msg: msg })
+    }, (error) => {
+    }, 1)
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/turnstile_settings_otp", "header")} />
+
+      <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10 }}>
+        <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, alignSelf: 'center', margin: 10, marginBottom: 0 }}>{esp.lang("event/turnstile_settings", "verification_code")}</Text>
+        <Text allowFontScaling={false} style={{ fontFamily: 'DecoNumbers', fontSize: 60, fontWeight: 'bold', alignSelf: 'center', margin: 10, marginTop: 0 }}>{data?.otp_code}</Text>
+        <View style={{ borderTopWidth: 1, borderTopColor: LibStyle.colorBgGrey, padding: 10 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorRed }}>{esp.lang("event/turnstile_settings_otp", "insert_code")}</Text>
+          <MarketCountdown expired={moment(data?.otp_expire_time).serverFormat('YYYY-MM-DD HH:mm:ss')} style={{ fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" }} />
+        </View>
+      </View>
+    </View>
+  )
+}

package/event/turnstile_settings_status.tsx

@@ -0,0 +1,50 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import LottieView from "lottie-react-native";
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventTurnstile_settings_statusArgs {
+
+}
+export interface EventTurnstile_settings_statusProps {
+
+}
+export default function m(props: EventTurnstile_settings_statusProps): any {
+  const { msg } = LibNavigation.getArgsAll(props)
+
+  const animation = useRef<LottieView>(null)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      {
+        msg &&
+        <>
+          <View style={{ alignItems: 'center', margin: 15, marginBottom: 0, padding: 10, backgroundColor: '#fff', borderRadius: 10, borderColor: LibStyle.colorGrey, borderWidth: 1 }} >
+            <LottieView
+              ref={animation}
+              loop={true}
+              autoPlay
+              style={{
+                width: LibStyle.width - 100,
+                height: LibStyle.width - 100,
+              }}
+              source={esp.assets('success.json')}
+            // OR find more Lottie files @ https://lottiefiles.com/featured
+            // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
+            />
+          </View>
+          <View style={{ margin: 15, padding: 10, backgroundColor: '#fff', borderRadius: 10, borderColor: LibStyle.colorGrey, borderWidth: 1 }}>
+            <Text style={{ alignSelf: 'center', textAlign: 'center', fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 30, color: '#4a4a4a' }} >{msg}</Text>
+          </View>
+        </>
+      }
+    </View>
+  )
+}