esoftplay-event 0.0.0-a → 0.0.0-c

package/event/tms_out_temporary.tsx

@@ -0,0 +1,226 @@
+// withHooks
+import { EventScan_item } from 'esoftplay/cache/event/scan_item/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/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 { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface EventTms_out_temporaryArgs {
+
+}
+export interface EventTms_out_temporaryProps {
+
+}
+export default function m(props: EventTms_out_temporaryProps): any {
+  const user_qr = LibNavigation.getArgs(props, 'qr_code')
+  const { scan_type, event_id, selectGate, typeScanner }: any = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>(undefined)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    var post = {
+      event_id: event_id,
+      // event_id: "264",
+      user_qr: encodeURIComponent(user_qr),
+      gate_id: selectGate.id
+      // user_qr: encodeURIComponent("BBO-H6851"),
+    }
+    new LibCurl('event_tms_out_temporary', post, (res) => {
+      let a = res?.list?.length > 0 && res.list.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 0
+        })
+      })
+      let b = res?.staff?.length > 0 && res.staff.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 0
+        })
+      })
+
+      let c = {
+        ...res,
+        list: res?.list?.length == 0 ? [] : a,
+        staff: res?.staff?.length == 0 ? [] : b
+      }
+      esp.log({ res, c });
+      setResult(c)
+
+    }, (error) => {
+      LibDialog.warningConfirm(esp.lang("event/tms_out_temporary", "fault"), error?.message, esp.lang("event/tms_out_temporary", "back"), () => LibNavigation.back(), "", () => { })
+    }, 1)
+  }
+
+  function quitTemporary(): void {
+    let list = [...result?.list, ...result.staff]
+    let a = list.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+
+    if (a.length == 0) {
+      LibToastProperty.show(esp.lang("event/tms_out_temporary", "select_ticket"))
+      return
+    }
+    var post = {
+      event_id: event_id,
+      ids: JSON.stringify(a),
+      gate_id: selectGate.id
+    }
+
+    LibProgress.show(esp.lang("event/tms_out_temporary", "wait"))
+    new LibCurl('event_tms_out_temporary_confirm', post, (result, msg) => {
+      LibProgress.hide()
+      LibDialog.confirm(esp.lang("event/tms_out_temporary", "info"), msg, esp.lang("event/tms_out_temporary", "ok"), () => {
+        LibNavigation.replace('component/scanner', {
+          fromPage: 'event/tms_home',
+          isTemporaryExit: true,
+          event_id: event_id,
+          selectGate: selectGate,
+          typeScanner: typeScanner,
+          scan_type: scan_type
+        })
+      }, "", () => { })
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/tms_out_temporary", "oops"), error?.message)
+      LibProgress.hide()
+    }, 1)
+  }
+
+  if (!result) return <LibLoading />
+
+  let lastStatusScanned = ''
+  function renderTicketTemporary(item: any, i: number) {
+    const showStatusScanned = lastStatusScanned != item?.status_label
+    lastStatusScanned = item?.status_label
+    return (
+      <View key={i}>
+        {
+          showStatusScanned &&
+          <View style={{ backgroundColor: item?.status == 1 ? '#fff' : "#c5c5c5", padding: 10, borderBottomWidth: 2, borderBottomColor: LibStyle.colorBgGrey }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: item?.status == 1 ? item?.status_background : "#fff" }}>{(item?.status_label).toUpperCase()}</Text>
+          </View>
+        }
+        <EventScan_item
+          key={i}
+          item={item}
+          colorFont={"#fff"}
+          style={{ backgroundColor: item?.status == 1 ? "#fff" : "#c5c5c5" }}
+          event_image={result?.event_image}
+          event_name={result?.event_name}
+          event_ondate={result?.event_ondate}
+          colorText={item?.status == 1 ? "#000" : LibStyle.colorBgGrey}
+          label={
+            item.status == 0 ?
+              esp.lang("event/tms_out_temporary", "used") :
+              item.checked == 0 ?
+                esp.lang("event/tms_out_temporary", "use") :
+                esp.lang("event/tms_out_temporary", "cancel")
+          }
+          onPress={() => {
+            if (item?.status == 1 && item?.is_limit == 0) {
+              let a = LibObject.set(result, item.checked == 1 ? 0 : 1)('list', i, 'checked')
+              setResult(a)
+            }
+          }}
+          colorBackground={(item.status == 0 || item.is_limit == 1) ? LibStyle.colorLightGrey : (item.checked == 0) ? LibStyle.colorGreen : LibStyle.colorRed}
+        />
+      </View>
+    )
+  }
+
+  let lastStatusStaff = ''
+  function renderStaff(item: any, i: number) {
+    const showStatusScanned = lastStatusStaff != item?.status_label
+    lastStatusStaff = item?.status_label
+
+    return (
+      <View key={i}>
+        {
+          showStatusScanned &&
+          <View style={{ backgroundColor: item?.status == 1 ? '#fff' : "#c5c5c5", padding: 10, borderBottomWidth: 2, borderBottomColor: LibStyle.colorBgGrey }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: item?.status == 1 ? item?.status_background : "#fff" }}>{(item?.status_label).toUpperCase()}</Text>
+          </View>
+        }
+        <View style={{ padding: 10, overflow: 'hidden', flex: 1, flexDirection: 'row', backgroundColor: '#fff', borderBottomColor: LibStyle.colorGrey, borderBottomWidth: 1.5 }}>
+          <LibPicture style={applyStyle({ borderRadius: 5, width: LibStyle.width / 4.5, height: LibStyle.width / 4.5, backgroundColor: LibStyle.colorBgGrey })} source={{ uri: item?.image }} />
+          <View style={{ marginLeft: 10, flex: 1 }}>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 18, fontWeight: 'bold' })}>{item.name}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 14 })}>{item.department_name}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 16 })}>{item.exhibitor_name}</Text>
+            {
+              item.status == 1 &&
+              <EventButton style={applyStyle({ marginTop: 10, alignSelf: 'flex-end', width: LibStyle.width / 3, backgroundColor: (item.status == 0 || item.is_limit == 1) ? LibStyle.colorLightGrey : (item.checked == 0) ? LibStyle.colorGreen : LibStyle.colorRed })} label={
+                item.status == 0 ?
+                  esp.lang("event/tms_out_temporary", "used") :
+                  item.hasOwnProperty("checked") && item.checked == 0 ?
+                    esp.lang("event/tms_out_temporary", "use") :
+                    esp.lang("event/tms_out_temporary", "cancel")
+              } fontColor={"#fff"} onPress={() => {
+                let a = LibObject.set(result, item.checked == 1 ? 0 : 1)('staff', i, 'checked')
+                setResult(a)
+              }} />
+            }
+          </View>
+          <View pointerEvents='none' style={{ position: 'absolute', justifyContent: 'center', transform: [{ rotate: '45deg' }], margin: 1, ...LibStyle.elevation(2), height: 20, width: 170, backgroundColor: LibStyle.colorPrimary, right: -50, top: 25 }} >
+            <Text style={{ color: 'white', alignSelf: 'center', fontWeight: 'bold' }} >ID CARD</Text>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  const sortedData = result?.list?.length > 0 && result?.list.sort((a: any, b: any) => {
+    if (a.is_limit == 0 && b.is_limit != 0) {
+      return -1; // a di atas b
+    } else if (a.is_limit != 0 && b.is_limit == 0) {
+      return 1; // b di atas a
+    } else {
+      return 0; // urutan relatif tidak berubah
+    }
+  });
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title={esp.lang("event/tms_out_temporary", "temp_out")} />
+
+      <ScrollView>
+        <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            result?.staff?.length > 0 && result?.staff?.map(renderStaff)
+          }
+        </View>
+        <View style={{ margin: 15, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            sortedData?.length > 0 && sortedData?.map(renderTicketTemporary)
+          }
+        </View>
+      </ScrollView>
+      <View style={{ padding: 10, backgroundColor: '#fff' }}>
+        <EventButton
+          label={esp.lang("event/tms_out_temporary", "btn_exit")}
+          backgroundColor={LibStyle.colorRed}
+          onPress={() => {
+            quitTemporary()
+          }}
+        // style={{ marginTop: 20 }}
+        />
+      </View>
+    </View>
+  )
+}

package/event/toggle.tsx

@@ -0,0 +1,30 @@
+// withHooks
+
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+
+export interface EventToggleArgs {
+  
+}
+export interface EventToggleProps {
+  value: boolean,
+  type: "success" | "danger"
+  disabled?: boolean,
+  onChangeValue: () => void
+}
+export default function m(props: EventToggleProps): any {
+  const { value, type, onChangeValue } = props
+  const color = type == 'success' ? "#4CD964" : "#E6212A"
+
+  return (
+    <TouchableOpacity
+      testID='toggle'
+      disabled={props.disabled}
+      onPress={onChangeValue}
+      style={{ opacity: props.disabled ? 0.5 : 1, height: 30, width: 50, borderWidth: 2, borderColor: value ? color : "#f1f2f3", borderRadius: 15, backgroundColor: value ? color : "white", justifyContent: "center", paddingHorizontal: 0.5, alignItems: value ? "flex-end" : "flex-start" }} >
+      <View style={{ height: 26, width: 26, borderRadius: 13, backgroundColor: "white", ...LibStyle.elevation(2) }} />
+    </TouchableOpacity>
+  )
+}

package/event/transaction.ts

@@ -0,0 +1,34 @@
+// useLibs
+
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+
+
+
+export interface EventTransactionArgs {
+
+}
+export interface EventTransactionProps {
+
+}
+export interface EventTransactionReturn {
+  getTrxId: () => string
+}
+
+const stateTrxId = useGlobalState<number>(undefined, { persistKey: 'event/transaction' })
+
+export function state(): useGlobalReturn<any> {
+  return stateTrxId
+}
+
+export function createTrxId() {
+  let user = UserClass.state().get()
+  let time = (new Date().getTime() / 1000).toFixed()
+  return time + "" + user?.id + "" + (Math.random() * 101).toFixed(0)
+}
+
+export default function m(): EventTransactionReturn {
+  return {
+    getTrxId: createTrxId
+  }
+}

package/event/turnstile_event_gate.tsx

@@ -1,5 +1,5 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/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 { LibList } from 'esoftplay/cache/lib/list/import';
@@ -60,7 +60,7 @@ export default function m(props: EventTurnstile_event_gateProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: "#fff" }}>
-      <ComponentHeader title={esp.lang("event/turnstile_event_gate", "header_title")} />
+      <EventHeader title={esp.lang("event/turnstile_event_gate", "header_title")} />
       <LibList
         data={result}
         onRefresh={loadDataGate}

package/event/turnstile_event_list.tsx

@@ -1,6 +1,6 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
-import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/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';
@@ -50,14 +50,14 @@ export default function m(props: EventTurnstile_event_listProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-      <ComponentHeader title={esp.lang("event/turnstile_event_list", "header_title")} />
+      <EventHeader title={esp.lang("event/turnstile_event_list", "header_title")} />
       {
         !result && !error ? <LibLoading /> :
           <LibList
             data={result}
             onRefresh={loadDataEvent}
             ListEmptyComponent={
-              <ComponentMessage message={error?.message} />
+              <EventMessage message={error?.message} />
             }
             renderItem={renderItem}
 

package/event/turnstile_event_ticket.tsx

@@ -1,7 +1,7 @@
 // withHooks
 import { applyStyle } from 'esoftplay';
-import { ComponentButton } from 'esoftplay/cache/component/button/import';
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+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 { LibList } from 'esoftplay/cache/lib/list/import';
@@ -80,14 +80,14 @@ export default function m(props: EventTurnstile_event_ticketProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: "#fff" }}>
-      <ComponentHeader title={esp.lang("event/turnstile_event_ticket", "header_title")} />
+      <EventHeader 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={() => {
+      <EventButton 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

@@ -1,15 +1,15 @@
 // 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 { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventToggle } from 'esoftplay/cache/event/toggle/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 { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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';
 
@@ -67,7 +67,7 @@ export default function m(props: EventTurnstile_settingsProps): any {
   const [selectedTypeGate, setSelectedTypeGate] = useSafeState<any>()
   const [selectedTypeTicket, setSelectedTypeTicket] = useSafeState<any>()
 
-  const dialogTypeGate = useRef<ComponentSlidingup>(null)
+  const dialogTypeGate = useRef<LibSlidingup>(null)
 
 
   const typeGate = [
@@ -224,7 +224,7 @@ export default function m(props: EventTurnstile_settingsProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-      <ComponentHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      <EventHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
       <ScrollView>
         <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10, ...LibStyle.elevation(2) }}>
           <Item isTouchable onPress={() => {
@@ -260,7 +260,7 @@ export default function m(props: EventTurnstile_settingsProps): any {
               <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={() => {
+              <EventToggle value={forExhibitor} onChangeValue={() => {
                 setForExhibitor(forExhibitor == true ? false : true)
                 if (forExhibitor) {
                   setForExhibitor(false)
@@ -296,21 +296,21 @@ export default function m(props: EventTurnstile_settingsProps): any {
               <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' />
+              <EventToggle value={userScan} onChangeValue={() => { setUserScan(userScan == true ? false : true) }} type='success' />
             </View>
           </View>
         </View>
 
       </ScrollView>
 
-      <ComponentButton label={esp.lang("event/turnstile_settings", "submit")} onPress={() => {
+      <EventButton label={esp.lang("event/turnstile_settings", "submit")} onPress={() => {
         if (checkInput()) {
           settingTurnstile()
         }
       }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
 
 
-      <ComponentSlidingup ref={dialogTypeGate}>
+      <LibSlidingup 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' }}>
@@ -320,7 +320,7 @@ export default function m(props: EventTurnstile_settingsProps): any {
           </View>
 
         </View>
-      </ComponentSlidingup>
+      </LibSlidingup>
     </View >
   )
 }

package/event/turnstile_settings_otp.tsx

@@ -1,10 +1,10 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { EventHeader } from 'esoftplay/cache/event/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';
 
@@ -43,14 +43,14 @@ export default function m(props: EventTurnstile_settings_otpProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-      <ComponentHeader title={esp.lang("event/turnstile_settings_otp", "header")} />
+      <EventHeader 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" }} />
+          <EventCountdown_base 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

@@ -1,5 +1,5 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import esp from 'esoftplay/esp';
@@ -22,7 +22,7 @@ export default function m(props: EventTurnstile_settings_statusProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-      <ComponentHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      <EventHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
       {
         msg &&
         <>

package/event/voucher.tsx

@@ -1,18 +1,17 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
-import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
-import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
 import { LibInput } from 'esoftplay/cache/lib/input/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 { EventLabel_input } from 'esoftplay/cache/event/label_input/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
 import esp from 'esoftplay/esp';
 import useSafeState from 'esoftplay/state';
 import React, { useEffect } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 
 export interface EventVoucherArgs {
@@ -86,10 +85,10 @@ export default function m(props: EventVoucherProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#fff' }}>
-      <ComponentHeader title={esp.lang("event/voucher", "header")} />
+      <EventHeader title={esp.lang("event/voucher", "header")} />
       <ScrollView>
         <View style={{ margin: 15, marginTop: 0 }}>
-          <ComponentLabel_input label={esp.lang("event/voucher", "voucher_or_referral_code")} mandatory />
+          <EventLabel_input label={esp.lang("event/voucher", "voucher_or_referral_code")} mandatory />
         </View>
         <View testID='input_voucher'>
           <LibInput
@@ -112,7 +111,7 @@ export default function m(props: EventVoucherProps): any {
           showText &&
           <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorPrimary }} >{esp.lang("bigbang/payment", "text_alert")}</Text>
         }
-        <ComponentTouchable testID='use_voucher' onPress={() => {
+        <TouchableOpacity testID='use_voucher' onPress={() => {
           if (!showText) {
             if (from == 'pos/pricing_payment') /* untuk register pos, bawa props bundling_id: bundling yg dipilih saat register */ {
               checkVoucherPos()
@@ -124,12 +123,12 @@ export default function m(props: EventVoucherProps): any {
           <View style={{ alignSelf: 'flex-end', marginRight: 15, marginBottom: 10, marginLeft: 10, width: 68, height: 35, borderRadius: 3, backgroundColor: showText ? '#8e8e8e' : LibStyle.colorGreen, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
             <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }}>{esp.lang("bigbang/payment", "button_use")}</Text>
           </View>
-        </ComponentTouchable>
+        </TouchableOpacity>
 
       </ScrollView>
       {
         result &&
-        <ComponentTouchable testID='claim_now' onPress={() => {
+        <TouchableOpacity testID='claim_now' onPress={() => {
           if (result) {
             let data = {
               ...result,
@@ -141,7 +140,7 @@ export default function m(props: EventVoucherProps): any {
           <View style={{ marginHorizontal: 15, marginVertical: 10, height: 35, borderRadius: 17.5, backgroundColor: result ? "#00b894" : LibStyle.colorGrey, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} >
             <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }} >{esp.lang("bigbang/payment", "claim")}</Text>
           </View>
-        </ComponentTouchable>
+        </TouchableOpacity>
       }
 
     </View>

package/event/voucher_multi.tsx

@@ -1,6 +1,5 @@
 // withHooks
-import { ComponentHeader } from 'esoftplay/cache/component/header/import';
-import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventHeader } from 'esoftplay/cache/event/header/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';
@@ -97,7 +96,7 @@ export default function m(props: EventVoucher_multiProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-      <ComponentHeader title={esp.lang("event/voucher", "header")} />
+      <EventHeader title={esp.lang("event/voucher", "header")} />
       <LibKeyboard_avoid style={{ flex: 1, marginBottom: 15 }}>
         <ScrollView>
           {
@@ -141,13 +140,13 @@ export default function m(props: EventVoucher_multiProps): any {
           }
         </ScrollView>
       </LibKeyboard_avoid>
-      <ComponentTouchable testID='claim_now' onPress={() => {
+      <TouchableOpacity testID='claim_now' onPress={() => {
         LibNavigation.sendBackResult(getData())
       }}>
         <View style={{ marginHorizontal: 15, marginVertical: 10, height: 35, borderRadius: 17.5, backgroundColor: "#00b894", alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} >
           <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }} >{esp.lang("bigbang/payment", "claim")}</Text>
         </View>
-      </ComponentTouchable>
+      </TouchableOpacity>
 
       <LibSlidingup ref={dialogInput} >
         <View style={[{ maxHeight: LibStyle.height * 0.7, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#fff' }]}>