esoftplay-event 0.0.0-a

package/event/counter_cashier.tsx

@@ -0,0 +1,180 @@
+// 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 { EventCounter_eoProperty } from 'esoftplay/cache/event/counter_eo/import';
+import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
+import { EventCounter_info } from 'esoftplay/cache/event/counter_info/import';
+import { EventCounter_menu } from 'esoftplay/cache/event/counter_menu/import';
+import { EventCounter_section } from 'esoftplay/cache/event/counter_section/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 { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/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 { UserPopup } from 'esoftplay/cache/user/popup/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Pressable, RefreshControl, ScrollView, Text, View } from 'react-native';
+
+
+export interface EventCounter_cashierArgs {
+
+}
+export interface EventCounter_cashierProps {
+
+}
+export default function m(props: EventCounter_cashierProps): any {
+  const { is_seller } = LibNavigation.getArgsAll(props)
+  const dialogAdd = useRef<ComponentSlidingup>(null)
+  const dialogUser = useRef<ComponentSlidingup>(null)
+
+  const [email, setEmail] = useSafeState<string>('')
+
+  const [result, setResult] = useSafeState<any>()
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl('event_seller_home?event_id=' + is_seller?.id, null, (res, msg) => {
+      setResult(res)
+      setRefreshing(false)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/counter_cashier", "load_failed"), error?.message)
+      LibNavigation.back()
+      setRefreshing(false)
+    }, 1)
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+  }
+
+  function addLM() {
+    let post = {
+      event_id: is_seller?.id,
+      email: email.trim()
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_cashier", "add_title"), esp.lang("event/counter_cashier", "add_msg"), esp.lang("event/counter_cashier", "add_confirm"), () => {
+      new LibCurl('event_seller_edit', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_cashier", "add_success"), msg)
+        loadData()
+        dialogUser.current?.hide()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_cashier", "add_failed"), error?.message)
+        dialogUser.current?.hide()
+      }, 1)
+    }, esp.lang("event/counter_cashier", "add_cancel"), () => { })
+
+  }
+
+
+  if (!result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  function renderMoneyRequest(item: any, i: number) {
+    return (
+      <View style={styleId_ZEwY6z}>
+        <EventCounter_history_item item={item} is_ticket={false} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 3 })} />
+      </View>
+    )
+  }
+
+  function renderTicketRequest(item: any, i: number) {
+    return (
+      <View style={styleId_ZEwY6z}>
+        <EventCounter_history_item item={item} is_ticket={true} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 3 })} />
+      </View>
+    )
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/counter_cashier", "header_title")} subtitle={is_seller?.name} bgColor={"#6A0740"} titleColor="#fff" notif />
+      {/* status_user 1 EO, 2 LM, 3 Seller */}
+      <EventCounter_menu colorTheme={"#6A0740"} event_id={is_seller?.id} status_user={3} />
+      <ScrollView style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+        <Pressable onPress={() => LibNavigation.navigate('event/counter_cashier_report')} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', padding: 10, paddingHorizontal: 15, margin: 15, marginBottom: -10, borderRadius: 15, backgroundColor: '#fff', ...LibStyle.elevation(3) }}>
+          <Text allowFontScaling={false}>{esp.lang("event/counter_cashier", "sell_report")}</Text>
+          <LibIcon name='chevron-right' />
+        </Pressable>
+
+        {/* active balance */}
+        <EventCounter_info colorTheme={"#6A0740"} amount={result?.money} ticket={result?.ticket} event_id={is_seller?.id} status_user={3} />
+
+        {/* request */}
+        {
+          result?.money_request?.length > 0 &&
+          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_seller?.id, status_user: 3 }) }} title={esp.lang("event/counter_cashier", "money")} />
+        }
+        {
+          result?.money_request?.length > 0 && result?.money_request?.map(renderMoneyRequest)
+        }
+
+        {
+          result?.ticket_request?.length > 0 &&
+          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_seller?.id, status_user: 3 }) }} title={esp.lang("event/counter_cashier", "ticket")} />
+        }
+        {
+          result?.ticket_request?.length > 0 && result?.ticket_request?.map(renderTicketRequest)
+        }
+
+      </ScrollView>
+
+      <ComponentSlidingup ref={dialogAdd}>
+        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
+          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
+          <View style={{ margin: 15 }}>
+            <LibInput_rectangle
+              autoCapitalize="none"
+              onChangeText={setEmail}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 15, }}
+              placeholder={esp.lang("event/counter_cashier", "email")}
+              keyboardType="email-address"
+              onSubmitEditing={() => {
+                if (EventCounter_eoProperty.checkEmail(email.trim())) {
+                  dialogAdd.current?.hide()
+                  dialogUser.current?.show()
+                }
+              }}
+            />
+            <ComponentButton label={esp.lang("event/counter_cashier", "next")} style={{ borderRadius: 15, marginTop: 20 }} backgroundColor={email == "" ? LibStyle.colorGrey : "#6A0740"} onPress={() => {
+              if (EventCounter_eoProperty.checkEmail(email.trim())) {
+                dialogAdd.current?.hide()
+                dialogUser.current?.show()
+              }
+            }} />
+          </View>
+        </View>
+      </ComponentSlidingup>
+
+      <ComponentSlidingup ref={dialogUser}>
+        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
+          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
+          <UserPopup email={email.trim()} redirect={() => {
+            addLM()
+          }} cancel={() => {
+            dialogUser.current?.hide()
+          }} />
+        </View>
+      </ComponentSlidingup>
+
+    </View >
+  )
+}
+const styleId_ZEwY6z: any = { margin: 15, marginTop: 0, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }

package/event/counter_cashier_report.tsx

@@ -0,0 +1,114 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+
+export interface EventCounter_cashier_reportArgs {
+
+}
+export interface EventCounter_cashier_reportProps {
+
+}
+
+export default function m(props: EventCounter_cashier_reportProps): any {
+  const is_seller = UserClass?.state?.()?.get()?.is_seller?.[0]
+  let dialogOtherTicket = useRef<ComponentSlidingup>(null)
+
+  const [codes, setCodes] = useSafeState<any>()
+  const [totalTrx, setTotalTrx] = useSafeState<any>()
+
+  function renderItem(item: any, i: number) {
+    return (
+      <Pressable onPress={() => { }} style={applyStyle({ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomColor: "#EEF1F8", borderBottomWidth: 1 })}>
+        <View style={applyStyle({ flex: 3 })}>
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={applyStyle({ flex: 1, fontSize: 16, color: LibStyle.colorBlue })}>#{item?.booking_code}</Text>
+            {
+              item?.hasOwnProperty("price_name") && item?.price_name != "" &&
+              <Text allowFontScaling={false} style={{ flex: 1, textAlign: 'right', fontSize: 13 }}>{item?.price_name} {item?.ondate != "0000-00-00" && "- " + LibUtils.moment(item?.ondate).localeFormat("D MMM YYYY")}</Text>
+            }
+
+          </View>
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, lineHeight: 18 })}>Code : {item?.code[0]} {item?.code?.length > 1 ? ",   " : ""}</Text>
+            {
+              item?.code?.length > 1 &&
+              <Pressable onPress={() => {
+                setCodes(item?.code)
+                LibUtils.debounce(() => {
+                  dialogOtherTicket?.current?.show()
+                }, 100)
+              }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", textDecorationLine: 'underline', fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("event/counter_cashier_report", "other", Number(item?.code?.length - 1).toString())}</Text>
+              </Pressable>
+            }
+          </View>
+
+          <View style={{ marginTop: 5, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ flex: 1, }}>{item.qty} Tiket</Text>
+            <Text allowFontScaling={false} style={{ flex: 1, textAlign: 'right', }}>{LibUtils?.money(item?.total)}</Text>
+          </View>
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <LibIcon name='cash' color='green' size={30} />
+            <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{item?.payment_title}</Text>
+          </View>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY hh:mm:ss")}</Text>
+
+        </View>
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/counter_cashier_report", "header_title")} subtitle={is_seller?.name} bgColor={"#6A0740"} titleColor="#fff" notif />
+
+      <LibInfinite
+        url={'event_seller_ticket_sell_history?event_id=' + is_seller?.id}
+        // isDebug={1}
+        ListHeaderComponent={
+          <View style={{ padding: 7, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ fontSize: 18 }}>{esp.lang("event/counter_cashier_report", "total_trx")}</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{totalTrx > 99 ? "99+" : String(totalTrx)}</Text>
+              </View>
+            </View>
+          </View>
+        }
+        onResult={(res) => {
+          setTotalTrx(res?.total)
+        }}
+        renderItem={renderItem}
+      />
+      <ComponentSlidingup ref={dialogOtherTicket}>
+        <View style={{ backgroundColor: 'white', maxHeight: LibStyle.height - (LibStyle.height / 3), borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 20 }}>
+          <ScrollView>
+            <Text allowFontScaling={false} style={{ marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/counter_cashier_report", "list_code")}</Text>
+            {
+              codes?.map((item: any, i: number) => {
+                return (
+                  <View key={i} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', backgroundColor: LibStyle.colorBgGrey, padding: 10, marginBottom: 10, borderRadius: 5, flex: 1 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 17, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#000', paddingLeft: 3, paddingRight: 3 }}>{item}</Text>
+                  </View>
+                )
+              })
+            }
+          </ScrollView>
+        </View>
+      </ComponentSlidingup>
+    </View>
+  )
+}

package/event/counter_cashier_sell.tsx

@@ -0,0 +1,135 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentQr_bg } from 'esoftplay/cache/component/qr_bg/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibWorkloop } from 'esoftplay/cache/lib/workloop/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import LottieView from "lottie-react-native";
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+export interface EventCounter_cashier_sellArgs {
+
+}
+export interface EventCounter_cashier_sellProps {
+
+}
+
+const state = useGlobalState<any>({}, { persistKey: 'event_counter_cashier_sell_scan' })
+
+export function syncToServer(trx_id?: string, qrTicket?: string, cb?: (state: number) => void) {
+  if (qrTicket && trx_id) {
+    state.set(LibObject.set(state.get(), trx_id)(qrTicket))
+  }
+  const event_id = UserClass?.state?.()?.get()?.is_seller?.[0]?.id
+  if (event_id) {
+    Object.keys(state.get() || {}).forEach((key, index) => {
+      if (state.get()[key]) {
+        const trx_id = state.get()[key]
+        const post = {
+          event_id,
+          trx_id: trx_id,
+          qrs: key
+        }
+        new LibCurl('event_seller_ticket_sell', post, (res, msg) => {
+          if (res.length > 0) {
+            let dt = state.get();
+            res.forEach(({ qr, status }: any) => {
+              if (qr == qrTicket && cb) {
+                cb(status)
+              }
+              if (status != 0)
+                delete dt[qr]
+            })
+            state.set(dt || {})
+            if (Object.keys(state.get() || {}).length > 0)
+              LibWorkloop.execNextTix(syncToServer)
+          }
+        }, (err) => {
+          if (Object.keys(state.get() || {}).length > 0)
+            LibWorkloop.execNextTix(syncToServer)
+        }, 1)
+      }
+    })
+  }
+}
+
+
+const statusText = (status: number | string): any => {
+  const statusTex: any = {
+    "0": esp.lang("event/counter_cashier_sell", "status_0"),
+    "1": esp.lang("event/counter_cashier_sell", "status_1"),
+    "2": esp.lang("event/counter_cashier_sell", "status_2")
+  }
+  return statusTex[status] || "Loading..."
+}
+
+
+export default function m(props: EventCounter_cashier_sellProps): any {
+
+  const { qr } = LibNavigation.getArgsAll<any>(props);
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+  const is_seller = UserClass?.state?.()?.get()?.is_seller?.[0]
+  const [status, setStatus] = useSafeState(-1)
+
+  const animation = useRef<LottieView>(null)
+
+  useEffect(() => {
+    if (status > -1) {
+      animation.current?.play()
+    } else {
+      syncToServer(trxId, qr, setStatus)
+    }
+  }, [status])
+
+  return (
+    <View style={{ backgroundColor: 'white', flex: 1 }} >
+      <ComponentHeader title={esp.lang("event/counter_cashier_sell", "header")} subtitle={is_seller?.name} bgColor={"#6A0740"} titleColor="#fff" notif />
+      <ScrollView>
+        <View style={{ alignItems: 'center', paddingTop: 50, flex: 1 }} >
+          <LottieView
+            ref={animation}
+            loop={false}
+            style={{ width: 200, height: 200, }}
+            source={esp.assets(status == 1 ? 'success.json' : status == 2 ? 'reject.json' : 'pending.json')} />
+          <LibTextstyle style={{ textAlign: 'center', margin: 16 }} textStyle='m_button' text={statusText(status)} />
+          <ComponentQr_bg>
+            <QRCode ecl="H"
+              size={200}
+              value={qr}
+            />
+          </ComponentQr_bg>
+          <LibTextstyle textStyle='title2' text={qr} style={{ marginTop: 10, marginBottom: 20, fontWeight: 'bold' }} />
+        </View>
+      </ScrollView>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginBottom: 20 }} >
+        <TouchableOpacity onPress={() => { LibNavigation.back() }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 2, borderColor: LibStyle.colorRed, height: 40, borderRadius: 16, backgroundColor: LibStyle.colorRed, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+          <LibIcon size={18} color={'white'} name="close" style={applyStyle({ fontWeight: 'bold', transform: [{ rotate: '180deg' }] })} />
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white', marginLeft: 10 })} >{esp.lang("event/counter_cashier_sell", "done")}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => {
+          LibNavigation.replace('component/scanner', {
+            event_id: is_seller?.id,
+            fromPage: 'event/counter_eo',
+            status_user: 3
+          })
+        }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 2, borderColor: LibStyle.colorGreen, height: 40, borderRadius: 16, backgroundColor: LibStyle.colorGreen, flexDirection: 'row-reverse', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+          <LibIcon size={18} color={'white'} name="qrcode" style={applyStyle({ fontWeight: 'bold', transform: [{ rotate: '180deg' }] })} />
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 10 })} >{esp.lang("event/counter_cashier_sell", "scan_again")}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}