esoftplay-event 0.0.0-a

package/config.json

@@ -0,0 +1,11 @@
+{
+  "fonts": {
+    "mono": "mono.ttf",
+    "Arial": "Arial.ttf",
+    "ArialBold": "ArialBold.ttf",
+    "SFProText": "SFProText.ttf",
+    "MonoSpace": "MonoSpace.ttf",
+    "DecoNumbers": "DecoNumbers.ttf",
+    "digital": "digital.ttf"
+  }
+}

package/event/additional.tsx

@@ -0,0 +1,188 @@
+// withHooks
+import { useEffect } from 'react';
+
+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 { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventAdditionalArgs {
+
+}
+export interface EventAdditionalProps {
+
+}
+
+export default function m(props: EventAdditionalProps): any {
+
+  const { event_id, qty, ondate, price_id, type_ticket }: any = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState()
+  const [dataAddPost, setDataAddPost] = useSafeState<any[]>([])
+  const user = UserClass.state().get()
+
+
+  useEffect(() => {
+    loadData()
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function loadData() {
+    let url = 'event_booking_addition_form?event_id=' + event_id + "&price_id=" + price_id
+    new LibCurl(url, null, (res, msg) => {
+      const a = res?.additions?.length > 0 && res?.additions?.map?.((item: any, i: number) => {
+        return ({
+          ...item,
+          value: [],
+        })
+      })
+      const b = {
+        ...res,
+        additions: a
+      }
+      setResult(b)
+
+      let is_each = res?.each == 0 ? 1 : qty
+      setDataAddPost(new Array(is_each).fill({}))
+
+    }, (err) => {
+      LibToastProperty.show(err.message)
+      LibNavigation.back()
+    })
+  }
+
+  function renderItem(item: any, i: number) {
+    let isEmptyObj = Object.keys(item).length > 0
+    return (
+      <View key={i} >
+        <View style={{ margin: 15, padding: 10, marginBottom: 5, marginTop: 10, backgroundColor: '#fff', borderRadius: 5 }}>
+          <TouchableOpacity onPress={() => {
+            LibNavigation.navigateForResult('event/additional_input', { data: result, itemAddition: item }, 190).then((value) => {
+              setDataAddPost(LibObject.set(dataAddPost, value)(i))
+            })
+          }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ color: LibStyle.colorPrimary, fontWeight: 'bold' }}>{esp.lang("event/additional", "complete_info", String(Number(i + 1)))}</Text>
+            <LibIcon name='pencil-outline' size={20} color={LibStyle.colorPrimary} />
+          </TouchableOpacity>
+        </View>
+        {
+          isEmptyObj &&
+          <View style={{ margin: 18, padding: 10, marginBottom: 5, marginTop: -3, backgroundColor: '#fff', borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }}>
+            {
+              item.additions?.map((it: any, ii: number) => {
+                return (
+                  <View key={ii} style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 5, marginBottom: 10, backgroundColor: LibStyle.colorBgGrey }}>
+                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 14, color: "#009688", fontWeight: 'bold', letterSpacing: 0.5, marginBottom: 5 }}>{it.question}</Text>
+                    {
+                      it.display_value?.map((x: any, z: number) => {
+                        return (
+                          <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000', marginRight: 6 }}>{x}</Text>
+                        )
+                      })
+                    }
+                    {
+                      it.value?.length == 0 &&
+                      <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000', marginRight: 6 }}>-</Text>
+                    }
+                    {
+                      it.subvalue &&
+                      <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, color: '#000' }}>{it.subvalue}</Text>
+                    }
+                  </View>
+                )
+              })
+            }
+          </View>
+        }
+      </View>
+    )
+  }
+
+  function isObjectEmpty(obj: any) {
+    return Object.keys(obj).length === 0;
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/additional", "header_title")} subtitle={ondate && ondate != "0000-00-00" ? type_ticket + " " + LibUtils.moment(ondate).format("DD MMM YYYY") : type_ticket} />
+      <ScrollView>
+        <View style={{ margin: 15, marginBottom: 5, marginTop: 10, padding: 10, borderWidth: 1, borderColor: '#fff', borderRadius: 5, backgroundColor: '#fff', ...LibStyle.elevation(2) }}>
+          <LibTextstyle textStyle='m_overline' text={esp.lang("event/additional", "buyer_info")} style={{ color: "#aaa", fontSize: 12, marginBottom: 5 }} />
+          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, letterSpacing: 1 }}>{user?.name}</Text>
+          <Text allowFontScaling={false} style={{ fontSize: 14, letterSpacing: 1 }}>{user?.email}</Text>
+          <Text allowFontScaling={false} style={{ fontSize: 12, letterSpacing: 1 }}>{user?.phone}</Text>
+        </View>
+
+        {
+          result?.title != "" &&
+          <LibTextstyle textStyle='m_overline' text={result?.title} style={{ lineHeight: 20, color: '#000', fontSize: 14, margin: 15, fontWeight: 'bold', marginBottom: 0 }} />
+        }
+
+        {
+          dataAddPost?.map(renderItem)
+        }
+
+      </ScrollView>
+      <View style={{ padding: 10 }}>
+        <ComponentButton
+          label={esp.lang("event/additional", "btn_next")}
+          backgroundColor={LibStyle.colorPrimary}
+          onPress={() => {
+            let isRequire = result?.additions?.length > 0 && result?.additions?.filter((item: any) => item.is_required == 1)
+            let obj2: any[] = []
+            dataAddPost.map((item: any) => {
+              let obj1: any[] = []
+              item.additions?.map((it: any) => {
+                let a = [
+                  it.id,
+                  it.value,
+                ]
+                if (it.hasOwnProperty("subvalue")) {
+                  a.push(it.subvalue)
+                }
+                if (it.type == 1 || it.type == 2 || it.type == 3) {
+                  a.push(it.value[0])
+                  a[1] = []
+                }
+                obj1.push(a)
+              })
+              obj2.push(obj1)
+            })
+
+            if (isRequire.length > 0) {
+              const emptyObject = dataAddPost.some(item => isObjectEmpty(item));
+
+              if (emptyObject) {
+                LibToastProperty.show(esp.lang("event/additional", "toast_empty"))
+              } else {
+
+                let addition = JSON.stringify(obj2)
+                LibNavigation.sendBackResult(addition, LibNavigation.getResultKey(props))
+              }
+            } else {
+              let addition = JSON.stringify(obj2)
+              LibNavigation.sendBackResult(addition == "[[]]" ? "" : addition, LibNavigation.getResultKey(props))
+            }
+          }}
+        />
+      </View>
+    </View>
+  )
+}

package/event/additional_input.tsx

@@ -0,0 +1,316 @@
+// withHooks
+import { useEffect, useRef } from 'react';
+
+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 { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventAdditional_inputArgs {
+
+}
+export interface EventAdditional_inputProps {
+
+}
+
+// export type ItemAddition = {
+//   "each": string,
+//   "title": string,
+//   "additions": Array<{
+//     "id": string,
+//     "question": string,
+//     "type": string,
+//     "is_option": string,
+//     "is_content": string,
+//     "is_required": string,
+//     "options": Array<{
+//       "id": string,
+//       "content": string,
+//     }>,
+//     "value": Array<string>,
+//     "display_value": Array<string>,
+//     "subvalue"?: string,
+//   }>,
+// }
+
+const additionalState = useGlobalState<any>(undefined, { persistKey: 'event/additional_input' })
+
+export function state(): useGlobalReturn<any> {
+  return additionalState
+}
+
+export default function m(props: EventAdditional_inputProps): any {
+  const { data, itemAddition } = LibNavigation.getArgsAll(props)
+  const dialogDatePicker = useRef<ComponentSlidingup>(null)
+  const dialogDropdown = useRef<ComponentSlidingup>(null)
+  const [dropdownData, setDropdownData] = useSafeState()
+
+  const [newData, setNewData] = useSafeState()
+  const [, setIdx, getIdx] = useLazyState<number>()
+
+  useEffect(() => {
+    if (Object.keys(itemAddition).length > 0) {
+      setNewData(itemAddition)
+    } else {
+      setNewData(data)
+    }
+
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function save() {
+    let stillEmpty1 = newData?.additions?.filter((item: any) => item.is_required == 1).filter((it: any) => (it.value?.length == 0 && !it.subvalue)).length > 0
+    if (stillEmpty1) {
+      LibToastProperty.show(esp.lang("event/additional_input", "complete_info"))
+      return
+    } else {
+      LibNavigation.sendBackResult(newData, 190)
+    }
+  }
+
+  function renderCatNew(item: any, i: number) {
+    let values = newData?.additions?.[i]?.value
+    let display_values = newData?.additions?.[i]?.display_value
+
+    let show = true /* Object.keys(itemAddition).length > 0 ? true : false */
+
+    return (
+      <View key={i} style={{ backgroundColor: '#fff', borderRadius: 5, margin: 15, marginBottom: 5, marginTop: 10 }}>
+        <LibCollaps key={i} show={show} header={(show) =>
+          <View style={{ padding: 7, borderBottomColor: '#c9c9c9', borderBottomWidth: 0.5, justifyContent: 'space-between', flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <View style={{ flex: 6, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000", }}>{item.question}</Text>
+              {
+                item.is_required == 1 &&
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#d0021b" }}> *</Text>
+              }
+            </View>
+            <LibIcon name={show ? 'chevron-up' : 'chevron-down'} color="#4a4a4a" />
+          </View>}>
+          {/* type: 1: text field, 2: textarea, 3: date picker, 4: choice, 5: multichoice, 6: dropdown */}
+          <View style={{ marginHorizontal: 10 }}>
+            {
+              item.type == 1 && // text field
+              <LibInput_rectangle
+                placeholder={item.question}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9' }}
+                defaultValue={newData?.additions?.[i]?.value?.[0]}
+                inputStyle={{ marginLeft: 0 }}
+                onChangeText={(text) => {
+                  let t = text?.length == 0 ? [] : [text]
+                  let updateValue = LibObject.set(newData, t)('additions', i, 'value')
+                  let updateDisplayValue = LibObject.set(updateValue, t)('additions', i, 'display_value')
+                  setNewData(updateDisplayValue)
+                }} />
+            }
+
+            {
+              item.type == 2 && // textarea
+              <LibInput_rectangle
+                multiline={true}
+                placeholder={item.question}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9', height: 100, justifyContent: 'flex-start' }}
+                defaultValue={newData?.additions?.[i]?.value?.[0]}
+                inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, marginLeft: 0, height: 100 }}
+                onChangeText={(text) => {
+                  let t = text?.length == 0 ? [] : [text]
+                  let updateValue = LibObject.set(newData, t)('additions', i, 'value')
+                  let updateDisplayValue = LibObject.set(updateValue, t)('additions', i, 'display_value')
+                  setNewData(updateDisplayValue)
+                }} />
+            }
+
+            {
+              item.type == 3 && // datepicker
+              <TouchableOpacity onPress={() => {
+                setIdx(i)()
+                dialogDatePicker.current?.show()
+              }} style={{ height: 40, borderRadius: 5, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#c5c5c5", flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 9 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, color: values?.length > 0 ? "#000" : "#e5e5e5", marginRight: 15, }}>{values?.length > 0 ? display_values[0] : item.question}</Text>
+                {
+                  values?.length == 0 &&
+                  <LibIcon name='chevron-down' />
+                }
+              </TouchableOpacity>
+            }
+
+            {
+              item.type == 4 && // choice
+              <View style={{ marginTop: 8 }}>
+                {
+                  item?.options?.length > 0 && item?.options?.map((it: any, ii: number) => {
+                    let values = newData?.additions?.[i]?.value?.[0] == it.id
+                    return (
+                      <Pressable
+                        key={ii}
+                        hitSlop={{ top: 10, right: 10 }}
+                        onPress={() => {
+                          let updateValue = LibObject.set(newData, [it.id])('additions', i, 'value')
+                          let updateDisplayValue = LibObject.set(updateValue, [it.content])('additions', i, 'display_value')
+                          let deleteSubvalue = LibObject.set(updateDisplayValue, "")('additions', i, 'subvalue')
+                          setNewData(deleteSubvalue)
+
+                        }}
+                        style={{ flexDirection: 'row', marginBottom: 5, alignContent: 'center', alignItems: 'center' }}>
+                        <LibIcon name={values ? 'circle' : 'circle-outline'} size={20} color={values ? LibStyle.colorPrimary : '#9b9b9b'} />
+                        <Text allowFontScaling={false} style={{ marginLeft: 7, marginRight: 15, color: values ? "#000" : "#9b9b9b" }}>{it.content}</Text>
+                      </Pressable>
+                    )
+                  })
+                }
+              </View>
+            }
+
+            {
+              item.type == 5 && // multichoice
+              <View style={{ marginTop: 8 }}>
+                {
+                  item?.options?.length > 0 && item?.options?.map((it: any, ii: number) => {
+                    return (
+                      <Pressable
+                        key={ii}
+                        hitSlop={{ top: 10, right: 10 }}
+                        onPress={() => {
+                          const out = values.includes(it.id) ? values.filter((id: any) => it.id != id) : [...values, it.id]
+                          const out_content = item?.options?.filter((item: any) => out.includes(item.id)).map((x: any) => x.content)
+
+                          let updateValue = LibObject.set(newData, out)('additions', i, 'value')
+                          let updateDisplayValue = LibObject.set(updateValue, out_content)('additions', i, 'display_value')
+                          setNewData(updateDisplayValue)
+                        }}
+                        style={{ padding: 3, marginBottom: 8, paddingHorizontal: 15, marginRight: 4, borderWidth: 1, borderRadius: 3, borderColor: values?.includes?.(it.id) ? "#fff" : "#9b9b9b", backgroundColor: values?.includes?.(it.id) ? LibStyle.colorPrimary : "#fff", justifyContent: 'center' }} >
+                        <LibTextstyle textStyle='body' text={it.content} style={{ color: values?.includes?.(it.id) ? (esp.isDebug("") ? "#fff" : "#000") : "#9b9b9b" }} />
+                      </Pressable>
+                    )
+                  })
+                }
+              </View>
+            }
+
+            {
+              item.type == 6 && // dropdown
+              <TouchableOpacity onPress={() => {
+                dialogDropdown.current?.show()
+                setDropdownData(item)
+                setIdx(i)
+              }} style={{ height: 40, borderRadius: 5, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#c5c5c5", flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 9 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, color: values?.length > 0 ? "#000" : "#e5e5e5", marginRight: 15, }}>{values?.length > 0 ? display_values[0] : item.question}</Text>
+                {
+                  values?.length == 0 &&
+                  <LibIcon name='chevron-down' />
+                }
+              </TouchableOpacity>
+            }
+
+            {
+              item.is_content == 1 &&
+              <LibInput_rectangle
+                placeholder={esp.lang("event/additional_input", "other")}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9' }}
+                defaultValue={newData?.additions?.[i]?.subvalue}
+                // value={newData?.additions?.[i]?.subvalue}
+                inputStyle={{ marginLeft: 0 }}
+
+                onChangeText={(text) => {
+                  let fillSubValue = LibObject.set(newData, text)('additions', i, 'subvalue')
+                  if (item.type == 4) {
+                    let emptyValue = LibObject.set(fillSubValue, [])('additions', i, 'value')
+                    let emptyDisplayValue = LibObject.set(emptyValue, [])('additions', i, 'display_value')
+                    setNewData(emptyDisplayValue)
+                  } else {
+                    setNewData(fillSubValue)
+                  }
+                }} />
+            }
+
+          </View>
+        </LibCollaps>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/additional_input", "header_title")} />
+      <LibKeyboard_avoid>
+        <ScrollView>
+          {data?.additions?.length > 0 && data?.additions?.map(renderCatNew)}
+
+        </ScrollView>
+        <View style={{ padding: 10 }} >
+          <ComponentButton
+            label={esp.lang("event/additional_input", "btn_save")}
+            backgroundColor={LibStyle.colorPrimary}
+            onPress={save}
+          />
+        </View>
+
+        <ComponentSlidingup ref={dialogDatePicker}>
+          <View style={{ backgroundColor: 'white', paddingBottom: 25, height: 230 }}>
+            <LibDatepicker
+              minDate={LibUtils.moment().add(-90, 'years').localeFormat('YYYY-MM-DD')}
+              maxDate={LibUtils.moment().localeFormat('YYYY-MM-DD')}
+              onDateChange={(dt) => {
+                let updateValue = LibObject.set(newData, [dt])('additions', getIdx(), 'value')
+                let updateDisplayValue = LibObject.set(updateValue, [LibUtils.moment(dt).localeFormat("DD MMMM YYYY")])('additions', getIdx(), 'display_value')
+                setNewData(updateDisplayValue)
+                dialogDatePicker.current?.hide()
+              }}
+              selectedDate={newData?.additions?.[getIdx()]?.value?.[0] || LibUtils.moment().localeFormat('YYYY-MM-DD')}
+            />
+          </View>
+        </ComponentSlidingup>
+
+        <ComponentSlidingup ref={dialogDropdown} >
+          <View style={{ width: 40, height: 3, borderRadius: 5, backgroundColor: "#fff", alignSelf: 'center', marginBottom: 10 }} />
+          <View style={{ maxHeight: LibStyle.height - (LibStyle.height / 5), backgroundColor: 'white', borderTopLeftRadius: 15, paddingHorizontal: 25, borderTopRightRadius: 15, padding: 10 }} >
+            <Pressable style={{ marginTop: 10, alignSelf: 'flex-end' }} onPress={() => dialogDropdown.current?.hide()}>
+              <LibIcon name='close' color={"#c9c9c9"} />
+            </Pressable>
+            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, marginBottom: 15 }}>{dropdownData?.question}</Text>
+
+            <ScrollView>
+              {
+                dropdownData?.options?.map((item: any, i: number) => {
+                  return (
+                    <Pressable onPress={() => {
+                      let updateValue = LibObject.set(newData, [item.id])('additions', getIdx(), 'value')
+                      let updateDisplayValue = LibObject.set(updateValue, [item.content])('additions', getIdx(), 'display_value')
+                      setNewData(updateDisplayValue)
+
+                      dialogDropdown.current?.hide()
+                    }} key={i} style={{ borderBottomWidth: 1, borderColor: '#c5c5c5', padding: 10, flexDirection: 'row', alignItems: "center" }}>
+                      <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'InterMedium', fontSize: 16, color: '#2C2B2D' }}>{item?.content}</Text>
+                    </Pressable>
+                  )
+                })
+              }
+
+            </ScrollView>
+
+          </View>
+        </ComponentSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}

package/event/block_invitation.tsx

@@ -0,0 +1,48 @@
+// withHooks
+
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/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 esp from 'esoftplay/esp';
+import React from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventBlock_invitationArgs {
+
+}
+export interface EventBlock_invitationProps {
+
+}
+export default function m(props: EventBlock_invitationProps): any {
+  const { dataCheck } = LibNavigation.getArgsAll(props)
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <LibPicture source={esp.assets('failed.png')} style={{ flex: 1, height: LibStyle.height, width: LibStyle.width }} /* resizeMode={"stretch"} */ />
+      </View>
+      <View style={{ position: 'absolute', top: LibStyle.STATUSBAR_HEIGHT + 17, left: 0, right: 0, bottom: 0 }} >
+        <View style={{ flexDirection: 'row', padding: 15, marginBottom: 15 }}>
+          <TouchableOpacity hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }} onPress={() => LibNavigation.back()} >
+            <LibPicture style={{ height: 35, width: 35 }} source={esp.assets('icons/ic_header_back.png')} />
+          </TouchableOpacity>
+        </View>
+        <ScrollView >
+          <View style={{ marginBottom: 20, alignSelf: 'center', borderRadius: LibStyle.width / 3, padding: 10, backgroundColor: '#fff' }}>
+            <LibPicture
+              source={esp.assets('failed_icon.png')}
+              style={{ width: LibStyle.width / 3, height: LibStyle.width / 3 }}
+            />
+          </View>
+          <LibTextstyle textStyle='m_overline' text={esp.lang("event/block_invitation", "cannot_claim_code")} style={{ lineHeight: 20, color: '#fff', fontSize: 16, margin: 15, fontWeight: 'bold', marginBottom: 0, textAlign: 'center' }} />
+          <LibTextstyle textStyle='m_overline' text={esp.lang("event/block_invitation", "try_again_later") + LibUtils.moment(dataCheck?.lock_end).serverFormat("DD MMM YYYY HH:mm:ss")} style={{ lineHeight: 20, color: '#fff', fontSize: 16, margin: 15, fontWeight: 'bold', marginBottom: 0, textAlign: 'center' }} />
+
+        </ScrollView>
+
+      </View>
+
+    </View>
+  )
+}

package/event/countdown.tsx

@@ -0,0 +1,72 @@
+// withHooks
+
+import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import { UserRoutes } from 'esoftplay/cache/user/routes/import';
+import useGlobalState from 'esoftplay/global';
+import useGlobalSubscriber from 'esoftplay/subscribe';
+import React, { useEffect } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import useFirebaseSocket from '../lib/firebase_socket';
+
+export interface EventCountdownArgs {
+
+}
+
+export interface EventCountdownProps {
+
+}
+export const countdownTime = useGlobalState('0')
+
+export const releaseQueue = useGlobalSubscriber()
+
+export default function m(props: EventCountdownProps): any {
+  const [timer] = countdownTime.useState()
+  const routes = UserRoutes.state().useSelector((x) => x?.routes)
+  const { doneQueue, isInPricingQueueConfig } = useFirebaseSocket();
+
+  const animatedValue = useSharedValue(0)
+
+  releaseQueue.useSubscribe(() => {
+    const { pathQueue, event_id, key } = EventQueue_pricingProperty.state().get()
+    if (event_id && isInPricingQueueConfig(event_id)) {
+      doneQueue(pathQueue, event_id, key, () => { })
+      EventQueue_pricingProperty.state().reset()
+      countdownTime.reset()
+    }
+  })
+
+  useEffect(() => {
+    animatedValue.value = withRepeat(withTiming(animatedValue.value == 0 ? 1 : 0.3, { duration: 1500 }), -1, true)
+  }, [])
+
+  const animated = useAnimatedStyle(() => ({
+    opacity: animatedValue.value
+  }))
+
+  if (timer == '0')
+    return null
+  else if (routes?.[routes?.length - 1]?.name == 'event/ticket_list')
+    return null
+  else
+    return (
+      <Animated.View pointerEvents='none' style={[{ position: 'absolute', alignItems: 'center', justifyContent: 'center', top: LibStyle.STATUSBAR_HEIGHT + 61, padding: 1, backgroundColor: LibUtils.hexToRgba(LibStyle.colorGreen, 1), width: '100%' }, animated]} >
+        <MarketCountdown
+          onExpired={() => {
+            const routeNames = UserRoutes.state()?.get()?.routes?.map?.((x: any) => x.name)
+            if (routeNames.includes("artist/list"))
+              LibNavigation.navigate("artist/list")
+            else if (routeNames.includes("event/detail"))
+              LibNavigation.navigate("event/detail")
+            else
+              LibNavigation.backToRoot()
+            countdownTime.reset()
+          }}
+          expired={timer}
+          style={{ color: "#fff" }} />
+      </Animated.View>
+    )
+}