esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/event/coupon_claim_detail.tsx

@@ -0,0 +1,176 @@
+// withHooks
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import { useEffect, useRef } from 'react';
+
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claim_detailArgs {
+  code: string
+  staff_id?: any
+}
+export interface EventCoupon_claim_detailProps {
+
+}
+export default function m(props: EventCoupon_claim_detailProps): any {
+  const code = LibNavigation.getArgs(props, "code")
+  const staff_id = LibNavigation.getArgs(props, "staff_id")
+  const [data, setData] = useSafeState<any>()
+  const [error, setError] = useSafeState<string>('')
+  const [qty, setQty, getQty] = useLazyState<number>(1)
+  const inputRef = useRef<LibInput>(null)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_redeem", { code, staff_id }, (result, message) => {
+      setQty(1)
+      setData(result)
+    }, (error) => {
+      setError(error?.message)
+    }, 1)
+  }
+
+  function doRedeem() {
+    const post = { id: data?.id, staff_id, qty: getQty() }
+
+    const curl = esp.mod("lib/curl")
+    esp.mod("lib/progress").show(esp.lang("event/coupon_claim_detail", "please_wait"))
+    new curl("event_coupon_redeem_submit", post, (result, message) => {
+      esp.modProp("event/coupon_claim").subscribe.trigger()
+      esp.mod("lib/progress").hide()
+      esp.modProp("lib/toast").show(message)
+      esp.mod("lib/navigation").back()
+    }, (error) => {
+      esp.mod("lib/progress").hide()
+      esp.mod("lib/dialog").warning(esp.lang("event/coupon_claim_detail", "warning"), error?.message)
+    }, 1)
+  }
+
+  function addQTY() {
+    if (getQty() < Number(data?.qty)) {
+      setQty(x => x + 1)()
+      inputRef.current?.setText(String(getQty()))
+    }
+  }
+
+  function subQTY() {
+    if (getQty() != 1) {
+      setQty(x => x - 1)()
+      inputRef.current?.setText(String(getQty()))
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#e6e6e6" }}>
+      <EventHeader title={esp.lang("event/coupon_claim_detail", "header")} />
+      {
+        (!data && error == "") ? <LibLoading /> : error != "" ?
+          <>
+            <EventMessage message={error} />
+            <EventButton label={esp.lang("event/coupon_claim_detail", "rescan")} style={{ marginHorizontal: 20 }} onPress={() => {
+              esp.mod("lib/navigation").navigateForResult("component/scanner", null, 238).then((value) => {
+                esp.mod("lib/navigation").replace("event/coupon_claim_detail", { code: value, staff_id: staff_id })
+              })
+            }} />
+          </>
+          :
+          <>
+            <LibScroll>
+
+              <View>
+                <View style={{ backgroundColor: "white", margin: 20, borderRadius: 20 }}>
+                  <Text allowFontScaling={false} numberOfLines={2} style={{ marginTop: 10, fontFamily: "ArialBold", fontSize: 18, fontWeight: "bold", letterSpacing: 3.5, color: "#aeacb2", textAlign: 'center' }}>{data?.code}</Text>
+                  <View style={{ padding: 15, paddingBottom: 20, marginTop: 20 }}>
+                    {
+                      data?.event_name && data?.event_name != "" &&
+                      <>
+                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "event_name")}</Text>
+                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{data?.event_name}</Text>
+                      </>
+                    }
+                    {
+                      data?.title && data?.title != "" &&
+                      <>
+                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "coupon_name")}</Text>
+                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{data?.title}</Text>
+                      </>
+                    }
+                    {
+                      data?.amount && data?.amount != "" && data?.amount != 0 &&
+                      <>
+                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "amount")}</Text>
+                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{LibUtils.money(data?.amount)}</Text>
+                      </>
+                    }
+                    {
+                      data?.qty && data?.qty != "" &&
+                      <>
+                        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{"Qty Kupon"}</Text>
+                        <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{LibUtils.number(data?.qty)}</Text>
+                      </>
+                    }
+
+                    {
+                      data?.qty && data?.qty > 1 &&
+                      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", marginTop: 20 }}>
+                        <TouchableOpacity onPress={subQTY} style={{ borderRadius: 10, width: 40, height: 40, alignItems: "center", justifyContent: "center", backgroundColor: "#f1f1f1" }}>
+                          <LibIcon name='minus' size={24} color={LibStyle.colorRed} />
+                        </TouchableOpacity>
+                        <View style={{ marginHorizontal: 5, width: 60, height: 40, borderRadius: 10, backgroundColor: "#f1f1f1" }}>
+                          <LibInput
+                            ref={inputRef}
+                            base
+                            defaultValue={String(qty)}
+                            onChangeText={(x) => {
+                              if (Number(x) > Number(data?.qty)) {
+                                setQty(data?.qty)()
+                                inputRef.current?.setText(String(data?.qty))
+                              }
+                            }}
+                            keyboardType='numeric'
+                            style={{ flex: 1, fontFamily: "ArialBold", fontSize: 28, textAlign: "center", paddingHorizontal: 10 }}
+                          />
+                        </View>
+                        <TouchableOpacity onPress={addQTY} style={{ borderRadius: 10, width: 40, height: 40, alignItems: "center", justifyContent: "center", backgroundColor: "#f1f1f1" }}>
+                          <LibIcon name='plus' size={24} color={LibStyle.colorGreen} />
+                        </TouchableOpacity>
+                      </View>
+                    }
+
+
+                  </View>
+                </View>
+                <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", left: 8, top: 60 }} />
+                <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", right: 8, top: 60 }} />
+                <View style={{ borderTopWidth: 1, borderColor: "#908d94", borderStyle: "dashed", height: 0, position: "absolute", top: 75, left: 37, right: 37 }} />
+              </View>
+
+              <View />
+            </LibScroll>
+            <EventButton label={esp.lang("event/coupon_claim_detail", "redeem")} onPress={() => {
+              esp.mod("lib/dialog").warningConfirm(esp.lang("event/coupon_claim_detail", "redeem_confirm"), esp.lang("event/coupon_claim_detail", "redeem_message"), esp.lang("event/coupon_claim_detail", "redeem_ok"), () => {
+                doRedeem()
+              }, esp.lang("event/coupon_claim_detail", "redeem_cancel"), () => { })
+            }} style={{ margin: 15 }} />
+          </>
+      }
+    </View >
+  )
+}

package/modules/event/coupon_claim_history.tsx

@@ -0,0 +1,279 @@
+// withHooks
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { useRef } from 'react';
+
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { EventSection_menu } from 'esoftplay/cache/event/section_menu/import';
+import { EventSheet } from 'esoftplay/cache/event/sheet/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claim_historyArgs {
+
+}
+export interface EventCoupon_claim_historyProps {
+  hideHeader?: boolean, config: any, event_id: string
+}
+export default function m(props: EventCoupon_claim_historyProps): any {
+  const { event_id, config } = esp.mod("lib/navigation").getArgsAll(props)
+  let lastDate = useRef('')
+
+  const usedConfig = props?.config || config
+  const usedEventId = props?.event_id || event_id
+
+  const baseURL = "event_coupon_tenant_redeemed_staff?event_id=" + usedEventId + "&tenant_id=" + usedConfig?.tenant_id
+
+  const date_start = moment().localeFormat("YYYY-MM-DD")
+  const date_end = moment().localeFormat("YYYY-MM-DD")
+  const [selectedDate, setSelectedDate] = useSafeState<any>({ date_start, date_end })
+  const [state, setState] = useSafeState<any>()
+  const [query, setQuery] = useSafeState<string>("")
+  const [staff, setStaff] = useLazyState<any>(usedConfig?.is_parent == 1 ? undefined : { staff_id: usedConfig?.staff_id })
+  const [typeIndex, setTypeIndex] = useLazyState<any>(usedConfig?.is_parent == 1 ? 0 : 1)
+  const headerShow = props?.hideHeader ? !props?.hideHeader : true
+  const slidingRef = useRef<LibSlidingup>(null)
+  const slidingDataRef = useRef<LibSlidingup>(null)
+  const inputRef = useRef<LibInput>(null)
+
+  const type = [esp.lang("event/coupon_claim_history", "all_data"), esp.lang("event/coupon_claim_history", "only_me")]
+
+  function buildUrl(url: string): string {
+    if (selectedDate?.date_start != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'date_start=' + selectedDate?.date_start
+    }
+    if (selectedDate?.date_end != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'date_end=' + selectedDate?.date_end
+    }
+    if (staff?.staff_id) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'staff_id=' + staff?.staff_id
+    }
+    return url
+  }
+
+  function buildSearchUrl(url: string): string {
+    if (query != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'keyword=' + query
+    }
+    return url
+  }
+
+  function doSearch() {
+    if (inputRef.current?.getText?.() && inputRef.current?.getText?.() != "") {
+      const email = inputRef.current?.getText?.()
+      setQuery(email)
+    }
+  }
+
+  const HeaderItem = (props: any) => {
+    return (
+      <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row', backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimary, 0.2), ...props?.containerStyle }} >
+        <View style={{ flex: 1 }} >
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "date")} style={{ color: "#888" }} />
+          <LibTextstyle textStyle={"callout"} text={props?.date} />
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "total_claim")} style={{ color: "#888", marginTop: 10 }} />
+          <LibTextstyle textStyle={"callout"} text={props?.qty} />
+        </View>
+        <View style={{ flex: 1, alignItems: "flex-end" }} >
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "total")} style={{ color: "#888" }} />
+          <LibTextstyle textStyle={"callout"} text={props?.amount} style={{ fontWeight: "bold" }} />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {
+        headerShow &&
+        <EventHeader title={esp.lang("event/coupon_claim_history", "header")} />
+      }
+      <View>
+        <Pressable onPress={() => {
+          LibNavigation.navigateForResult('feed/talent_date', { minDate: moment().add(-5, 'years').localeFormat('YYYY-MM-DD'), maxDate: moment().add(1, 'years').localeFormat('YYYY-MM-DD') }).then((item) => {
+            setSelectedDate(item)
+          })
+        }} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "date_start")}</Text>
+            <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDate?.date_start).localeFormat("DD MMM YYYY")}</Text>
+          </View>
+          <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "date_end")}</Text>
+            <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDate?.date_end).localeFormat("DD MMM YYYY")}</Text>
+          </View>
+        </Pressable>
+        {
+          usedConfig?.is_parent == 1 &&
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Pressable onPress={() => {
+              slidingRef?.current?.show()
+            }} style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', flexDirection: "row", alignItems: "center" }}>
+              <View style={{ flex: 1 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "scan_staff")}</Text>
+                <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='middle' style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{staff?.email || esp.lang("event/coupon_claim_history", "staff")}</Text>
+              </View>
+              <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+            </Pressable>
+            <Pressable onPress={() => {
+              slidingDataRef.current?.show()
+            }} style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', flexDirection: "row", alignItems: "center" }}>
+              <View style={{ flex: 1 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "show_data")}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{type[typeIndex]}</Text>
+              </View>
+              <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+            </Pressable>
+          </View>
+        }
+      </View>
+      <LibInfinite
+        isDebug={1}
+        key={buildUrl(baseURL)}
+        url={buildUrl(baseURL)}
+        onRefresh={() => lastDate.current = ""}
+        errorView={(e: string) =>
+          <EventMessage message={e} />
+        }
+        onResponseEdit={(res) => {
+          let out = res.report
+          setState(out)
+          if (res?.report?.list.length > 0) {
+            out = esp.mod("lib/object").update(res?.report, (list) => list.map((item: any) => {
+              const used_at = moment(item.used_at).format("DD MMMM YYYY")
+              const showDate = lastDate.current != used_at
+              lastDate.current = used_at
+              return { ...item, showDate: showDate }
+            }))('list')
+          }
+          return out
+        }}
+        renderItem={(item: any, idx: number) => {
+          return (
+            <View key={idx}>
+              <UseCondition if={idx === 0} >
+                <HeaderItem
+                  date={state?.date_end == state?.date_start ? moment(state?.date_start).localeFormat("dddd, DD MMMM YYYY") : LibUtils.getDateRange(state?.date_start, state?.date_end, " - ")}
+                  qty={LibUtils.number(state?.qty)}
+                  amount={LibUtils.money(state?.amount)} />
+              </UseCondition>
+              <UseCondition if={item?.showDate} >
+                <EventSection_menu title={moment(item?.used_at).format("dddd, DD MMMM YYYY")} />
+              </UseCondition>
+              <View style={{ backgroundColor: "#f4f4f4", height: 2 }} />
+              <TouchableOpacity
+                onPress={() => { }}
+                style={{ flexDirection: "row", paddingHorizontal: 17, paddingTop: 10, paddingBottom: 8 }} >
+                <View style={{ flex: 1 }} >
+                  <View style={{ flexDirection: "row", alignItems: "center" }} >
+                    <LibIcon.Ionicons name="ticket" size={12} color="#888" />
+                    <LibTextstyle textStyle="caption1" text={item?.title + " (" + item?.event_name + ")"} style={{ color: "#888", marginLeft: 5 }} />
+                  </View>
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+                    <LibTextstyle textStyle="caption1" text={item?.code} style={{ color: LibStyle.colorBlue }} />
+                  </View>
+                  <LibTextstyle textStyle="caption1" text={"QTY " + item?.qty} style={{ color: "#888" }} />
+                  <LibTextstyle textStyle="caption1" text={LibUtils.moment(item?.used_at).serverFormat("DD MMMM YYYY H:mm:ss")} style={{ color: "#888" }} />
+                </View>
+                <View>
+                  <LibTextstyle textStyle="caption1" text={item?.email_tenant} style={{ color: "#888", textAlign: "right" }} />
+                  <LibTextstyle textStyle="footnote" text={LibUtils.money(item?.amount_total)} style={{ textAlign: "right" }} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          )
+        }}
+      />
+
+      <EventSheet
+        _ref={slidingDataRef}
+        title={esp.lang("event/coupon_claim_history", "show_data")}
+        options={[
+          ...type.map((x, i) => ({
+            text: x, onPress: () => {
+              setTypeIndex(i)()
+              setStaff(() => i == 1 ? { staff_id: usedConfig?.staff_id } : undefined)
+            }
+          }))
+        ]}
+      />
+
+      <LibSlidingup ref={slidingRef}>
+        <View style={{ minHeight: LibStyle.height * 0.3, maxHeight: LibStyle.height * 0.6, backgroundColor: "white", paddingTop: 10 }}>
+          <View style={{ marginHorizontal: 15, marginTop: 10, flexDirection: 'row', alignItems: 'center' }}>
+            <LibInput
+              ref={inputRef}
+              base
+              defaultValue={query}
+              placeholder={esp.lang("event/coupon_claim_history", "search_email")}
+              onChangeText={(t) => { }}
+              onSubmitEditing={() => doSearch()}
+              style={{ flex: 1, borderColor: '#E6E6E6', color: '#B8B8B8', borderWidth: 1, padding: 4, paddingLeft: 40, borderRadius: 10, backgroundColor: 'white', height: 40 }}
+            />
+            <View style={{ position: "absolute", top: 9, bottom: 0, left: 9 }}>
+              <LibIcon name="magnify" color="#E6E6E6" />
+            </View>
+            {
+              query != "" &&
+              <Pressable onPress={() => {
+                setQuery("")
+                inputRef.current?.setText("")
+              }} style={{ position: "absolute", top: 9, bottom: 0, right: 9 }}>
+                <LibIcon name="close" color={LibStyle.colorRed} />
+              </Pressable>
+            }
+          </View>
+
+          <LibInfinite
+            key={buildSearchUrl("event_coupon_tenant_list_history?tenant_id=" + usedConfig?.tenant_id)}
+            url={buildSearchUrl("event_coupon_tenant_list_history?tenant_id=" + usedConfig?.tenant_id)}
+            errorView={(e: string) => <EventMessage message={e} />}
+            isDebug={1}
+            ListHeaderComponent={
+              <>
+                {
+                  !query &&
+                  <Pressable onPress={() => {
+                    setStaff(undefined)
+                    slidingRef.current?.hide()
+                  }} style={[{ backgroundColor: "white", marginHorizontal: 15, marginBottom: 5, marginTop: 10, padding: 10, borderRadius: 10, flexDirection: "row", alignItems: "center" }, LibStyle.elevation(3)]}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }}>{esp.lang("event/coupon_claim_history", "all_staff")}</Text>
+                  </Pressable>
+                }
+              </>
+            }
+            renderItem={(item, index) => (
+              <Pressable onPress={() => {
+                setStaff(item)()
+                slidingRef.current?.hide()
+              }} key={index} style={[{ backgroundColor: "white", marginHorizontal: 15, marginBottom: 5, marginTop: 10, padding: 10, borderRadius: 10 }, LibStyle.elevation(3)]}>
+                {
+                  item?.name && item?.name != "" &&
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, marginBottom: 3 }}>{esp.mod("lib/utils").ucwords(item?.name)}</Text>
+                }
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }}>{String(item?.email).toLowerCase()}</Text>
+              </Pressable>
+            )}
+          />
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}

package/modules/event/coupon_claim_reimburse.tsx

@@ -0,0 +1,110 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claim_reimburseArgs {
+
+}
+export interface EventCoupon_claim_reimburseProps {
+
+}
+export default function m(props: EventCoupon_claim_reimburseProps): any {
+  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
+  const [reimburse, setReimburse] = useLazyState<any>()
+
+  useEffect(() => {
+    loadReimburse()
+  }, [])
+
+  function loadReimburse() {
+    setReimburse(undefined)
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_tenant_reimburse?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result, message) => {
+      setReimburse(result)()
+    }, (error) => {
+
+    }, 1)
+  }
+
+  function submitReimburse() {
+    const doSubmit = () => {
+      const curl = esp.mod("lib/curl")
+      esp.mod("lib/progress").show(esp.lang("event/coupon_claim_reimburse", "please_wait"))
+      new curl("event_coupon_tenant_reimburse_submit", { tenant_id, event_id }, (result, message) => {
+        loadReimburse()
+        esp.modProp("lib/toast").show(message)
+        esp.mod("lib/progress").hide()
+        esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: result?.url })
+      }, (error) => {
+        esp.mod("lib/progress").hide()
+        esp.mod("lib/dialog").warning(esp.lang("event/coupon_claim", "warning_reimburse"), error?.message)
+      }, 1)
+    }
+
+    esp.mod('lib/dialog').warningConfirm(esp.lang("event/coupon_claim", "reimburse_title"),
+      esp.lang("event/coupon_claim", "reimburse_msg"),
+      esp.lang("event/coupon_claim", "reimburse_ok"), () => {
+        doSubmit()
+      },
+      esp.lang("event/coupon_claim", "reimburse_cancel"), () => { })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EventHeader title={esp.lang("event/coupon_claim_reimburse", "reimburse")} subtitle={esp.lang("event/coupon_claim_reimburse", "reimburse_subtitle")} />
+      <LibScroll onRefresh={loadReimburse}>
+        <View style={{ margin: 5, marginBottom: 5, marginTop: 10, borderRadius: 10, padding: 10 }}>
+          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "total")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(reimburse?.qty)}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
+            </View>
+            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "amount")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(reimburse?.amount)}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
+            </View>
+          </View>
+        </View>
+        <TouchableOpacity onPress={() => {
+          esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history", { event_id, tenant_id })
+        }} style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", flexDirection: "row", alignItems: "center", marginHorizontal: 15 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse", "history_cashout")}</Text>
+          <LibIcon name='chevron-right' />
+        </TouchableOpacity>
+
+        <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#fff3cd", borderWidth: 1, borderColor: "#FDE68A", marginHorizontal: 15, marginTop: 15 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, color: "#000", textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info1")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info2")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", }}>{esp.lang("event/coupon_claim_reimburse", "info3")}</Text>
+        </View>
+
+      </LibScroll>
+      <EventButton
+        label={esp.lang("event/coupon_claim_reimburse", "doReimburse")}
+        backgroundColor={reimburse?.qty == 0 ? "#f1f1f1" : undefined}
+        onPress={() => {
+          if (reimburse?.qty > 0) {
+            submitReimburse()
+          } else {
+            esp.modProp("lib/toast").show(esp.lang("event/coupon_claim", "coupon_scan_empty"))
+          }
+        }}
+        style={{ margin: 15 }}
+      />
+    </View>
+  )
+}

package/modules/event/coupon_claim_reimburse_history.tsx

@@ -0,0 +1,71 @@
+// withHooks
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import esp from 'esoftplay/esp';
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventCoupon_claim_reimburse_historyArgs {
+
+}
+export interface EventCoupon_claim_reimburse_historyProps {
+
+}
+export default function m(props: EventCoupon_claim_reimburse_historyProps): any {
+  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
+  const [datas, setDatas] = useSafeState<any>()
+  const [error, setError] = useSafeState<string>("")
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl("event_coupon_tenant_reimburse_list?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result) => {
+      esp.log({ result });
+      setDatas(result)
+    }, (error) => {
+      setError(error?.message)
+    })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EventHeader title={esp.lang("event/coupon_claim_reimburse_history", "reimburse_history")} />
+      {
+        <LibList
+          onRefresh={loadData}
+          data={datas}
+          ListEmptyComponent={
+            (!datas && error == "") ? <LibLoading /> :
+              error != "" ? <EventMessage message={error} style={{ marginTop: 50 }} /> : null
+          }
+          renderItem={(item: any, index: number) => (
+            <Pressable key={index} onPress={() => {
+              esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: item?.url })
+            }} style={applyStyle({ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomColor: "#EEF1F8", borderBottomWidth: 1 })}>
+              <View style={applyStyle({ flex: 3 })}>
+                <Text allowFontScaling={false} style={applyStyle({ fontSize: 16, marginBottom: 5 })}>{item?.status_text}</Text>
+                <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY HH:mm:ss")}</Text>
+              </View>
+              <View>
+                <Text allowFontScaling={false} style={applyStyle({ marginBottom: 5, textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorGreen })}>{esp.lang("event/coupon_claim_reimburse_history", "qty", LibUtils.number(item?.qty))}</Text>
+                <Text allowFontScaling={false} style={applyStyle({ textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorRed })}>{LibUtils.money(item?.amount)}</Text>
+              </View>
+            </Pressable>
+          )}
+        />
+      }
+    </View>
+  )
+}