esoftplay-event 0.0.0-a

package/event/counter_user_list_item.tsx

@@ -0,0 +1,143 @@
+// withHooks
+// noPage
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_user_list_itemArgs {
+
+}
+export interface EventCounter_user_list_itemProps {
+  email: string,
+  user_id: string,
+  image: string,
+  name: string,
+  showType?: boolean,
+  type?: any,
+  showIcon?: boolean,
+  onSelect?: () => void,
+  showDelete?: boolean,
+  onDelete?: () => void,
+  selectedUserId?: any,
+  showChange?: boolean,
+  onChange?: () => void,
+  style?: any,
+  sellers?: any,
+  showSellers?: boolean,
+  showDeleteSellers?: boolean,
+  onDeleteSellers?: (email?: string) => void,
+  is_digital?: any
+}
+export default function m(props: EventCounter_user_list_itemProps): any {
+
+  function renderSellers(item: any, i: number) {
+    return (
+      <View key={i} style={styleId_ZuJdEN}>
+        <View style={styleId_Z1IS0fI}>
+          <View style={styleId_1C9dY0}>
+            <LibPicture source={{ uri: item.image }} style={styleId_1XoYWW} resizeMode="cover" />
+          </View>
+          <View style={styleId_Zkxxg6}>
+            <View style={styleId_Z1IS0fI}>
+              <View style={{ marginTop: 4, padding: 5, borderRadius: 5, backgroundColor: '#6A0740' }}>
+                <Text allowFontScaling={false} style={styleId_Z1tkqXS}>{item.is_digital == "1" ? esp.lang("event/counter_user_list_item", "ticket_online") : esp.lang("event/counter_user_list_item", "ticket_fisik")}</Text>
+              </View>
+            </View>
+            <Text allowFontScaling={false} style={styleId_1KmPaS}>{item.name}</Text>
+            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{item.email}</Text>
+
+          </View>
+        </View>
+        {
+          props.showDeleteSellers &&
+          <TouchableOpacity onPress={() => { props.onDeleteSellers && props.onDeleteSellers(item.email) }} style={styleId_ZkUJq} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
+            <LibIcon name={"trash-can-outline"} size={18} color={LibStyle.colorRed} />
+          </TouchableOpacity>
+        }
+      </View>
+    )
+  }
+
+  const styleId_ZVzM0y: any = { justifyContent: 'center', alignContent: 'center', alignItems: 'center', backgroundColor: props.type == 1 ? "#009AE4" : props.type == 2 ? "#00AA43" : "#6A0740", marginTop: 5, padding: 2, borderRadius: 3 }
+
+  return (
+    <View>
+      <Pressable onPress={() => { props.onSelect && props.onSelect() }} style={[{ margin: 15, marginBottom: 10, marginTop: 0, backgroundColor: '#fff', padding: 10, borderRadius: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }, props.style]}>
+        <View style={styleId_2vi46p}>
+          <View style={styleId_1C9dY0}>
+            <LibPicture source={{ uri: props.image }} style={styleId_1XoYWW} resizeMode="cover" />
+          </View>
+
+          <View style={styleId_Zkxxg6}>
+
+            {
+              props.showType &&
+              <View style={styleId_Z1IS0fI}>
+                <View style={styleId_ZVzM0y}>
+                  <Text allowFontScaling={false} style={styleId_Z7sv3V}>{props.type == 1 ? esp.lang("event/counter_user_list_item", "text_eo") : props.type == 2 ? esp.lang("event/counter_user_list_item", "text_lm") : esp.lang("event/counter_user_list_item", "text_cashier")}</Text>
+                </View>
+              </View>
+            }
+            {
+              props.is_digital &&
+              <View style={styleId_Z1IS0fI}>
+                <View style={{ marginTop: 4, padding: 5, borderRadius: 5, backgroundColor: '#6A0740' }}>
+                    <Text allowFontScaling={false} style={styleId_Z1tkqXS}>{props.is_digital == "1" ? esp.lang("event/counter_user_list_item", "ticket_online") : esp.lang("event/counter_user_list_item", "ticket_fisik")}</Text>
+                </View>
+              </View>
+            }
+            <Text allowFontScaling={false} style={styleId_Z2nlhWI}>{props.name}</Text>
+            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{props.email}</Text>
+          </View>
+        </View>
+        {
+          props.showIcon &&
+          <TouchableOpacity onPress={() => { props.onSelect && props.onSelect() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
+            <LibIcon name={props.selectedUserId == props.user_id ? "radiobox-marked" : "radiobox-blank"} color={props.selectedUserId == props.user_id ? "#009AE4" : "#000"} />
+          </TouchableOpacity>
+        }
+        {
+          props.showDelete &&
+          <TouchableOpacity onPress={() => { props.onDelete && props.onDelete() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} >
+            <LibIcon name={"trash-can-outline"} color={LibStyle.colorRed} />
+          </TouchableOpacity>
+        }
+        {
+          props.showChange &&
+          <TouchableOpacity onPress={() => { props.onChange && props.onChange() }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} style={styleId_Z56B3G} >
+            <Text allowFontScaling={false} style={{ color: LibStyle.colorGreen }} >{esp.lang("event/counter_user_list_item", "edit")}</Text>
+          </TouchableOpacity>
+        }
+      </Pressable>
+      {
+        props.showSellers && props.sellers && props.sellers?.length > 0 &&
+        <View style={styleId_Z2iLXe1}>
+          <Text allowFontScaling={false} style={styleId_ZeUrgO}>{esp.lang("event/counter_user_list_item", "cashier_list")}</Text>
+          {
+            props.sellers?.map?.(renderSellers)
+          }
+        </View>
+      }
+    </View>
+  )
+}
+const styleId_ZuJdEN: any = { flexDirection: 'row', justifyContent: 'space-between', padding: 10, borderBottomColor: "#EEF1F8", borderBottomWidth: 1, alignContent: 'center', alignItems: 'center' }
+const styleId_Z1IS0fI: any = { flexDirection: 'row' }
+const styleId_1C9dY0: any = { height: 50, width: 50, borderRadius: 10, backgroundColor: '#fff', ...LibStyle.elevation(10) }
+const styleId_1XoYWW: any = { height: 50, width: 50, borderRadius: 10, }
+const styleId_Zkxxg6: any = { marginLeft: 10 }
+const styleId_Z1tkqXS: any = { fontWeight: 'normal', fontSize: 10, color: '#fff' }
+const styleId_1KmPaS: any = { fontSize: 14, flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
+const styleId_Z15uvuH: any = { flexWrap: 'wrap', fontWeight: 'normal', fontSize: 10 }
+const styleId_ZkUJq: any = { padding: 7, borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
+const styleId_2vi46p: any = { flex: 2, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
+const styleId_Z7sv3V: any = { textAlign: 'center', fontFamily: "Arial", fontSize: 8, fontWeight: "normal", fontStyle: "normal", letterSpacing: 1, color: "#fff" }
+const styleId_Z2nlhWI: any = { flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
+const styleId_Z56B3G: any = { marginRight: 10, padding: 2, paddingHorizontal: 10, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorGreen }
+const styleId_Z2iLXe1: any = { margin: 20, marginTop: -8, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, backgroundColor: '#fff' }
+const styleId_ZeUrgO: any = { marginTop: 5, alignSelf: 'center', flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }

package/event/coupon.tsx

@@ -0,0 +1,124 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import React from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCouponArgs {
+
+}
+export interface EventCouponProps {
+
+}
+
+export function getCouponDetail(url: string) {
+  const curl = esp.mod("lib/curl")
+  esp.mod("lib/progress").show("Mohon tunggu..")
+  new curl(url, null, (result) => {
+    const item = result?.list
+    esp.mod("lib/progress").hide()
+    if (item?.length > 0) {
+      esp.mod("lib/navigation").navigate("event/coupon_detail", { ...item[0] })
+    }
+  }, (err) => {
+    esp.mod("lib/progress").hide()
+    esp.modProp("lib/toast").show(err?.message)
+  }, 1)
+}
+
+export default function m(props: EventCouponProps): any {
+  const [tab, setTab] = useSafeState(0)
+  const tabs = [
+    { id: 1, title: esp.lang("event/coupon", "unused") },
+    { id: 2, title: esp.lang("event/coupon", "used") },
+    { id: 3, title: esp.lang("event/coupon", "expired") }
+  ]
+
+  function buildUrl(url: string) {
+    url += url.includes('?') ? '&' : '?'
+    url += 'status=' + tab
+    return url
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/coupon", "header")} />
+      <View style={{ height: 43, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#f2f2f2' }} >
+        {
+          tabs.map((item: any, i: number) => (
+            <Pressable key={i} onPress={() => {
+              setTab(i)
+            }}>
+              <View style={{ height: 43, width: LibStyle.width / tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
+                <Text style={{
+                  width: LibStyle.width / tabs.length, fontSize: tab == i ? 13 : 12,
+                  fontWeight: tab == i ? "bold" : "normal",
+                  fontStyle: "normal", letterSpacing: 0, textAlign: "center",
+                  color: tab == i ? LibStyle.colorPrimary : "#c5c5c5"
+                }}>{item.title}</Text>
+                <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: item.total > 0 ? 1 : 0 }} />
+                <View style={{ width: (LibStyle.width / tabs.length) - 20, height: 3, backgroundColor: tab == i ? LibStyle.colorPrimary : "#fff", position: 'absolute', bottom: 0 }} />
+              </View>
+            </Pressable>
+          ))
+        }
+      </View>
+      <LibInfinite
+        key={buildUrl("event_coupon")}
+        url={buildUrl("event_coupon")}
+        isDebug={1}
+        errorView={(e: string) =>
+          <ComponentMessage message={e} />
+        }
+        renderItem={(item, index) => (
+          <View style={{ flex: 1 }} key={index}>
+            <TouchableOpacity onPress={() => {
+              if (item?.status == 0) {
+                esp.mod("lib/navigation").navigate("event/coupon_detail", { ...item })
+              }
+            }} style={[{ marginBottom: 4, margin: 15, borderRadius: 10, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+              <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderTopLeftRadius: 10, borderTopRightRadius: 10 }} />
+              <View style={{ position: 'absolute', top: (((LibStyle.width - 60) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
+                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
+                <View style={{ flex: 1 }} />
+                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
+              </View>
+
+              <View style={{ paddingHorizontal: 15, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#e6e6e6", borderStyle: "dashed" }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginBottom: 3 }}>{item?.event_name}</Text>
+                <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{item?.title}</Text>
+                  {item?.amount && item?.amount != "" && item?.amount != 0 &&
+                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{LibUtils.money(item?.amount)}</Text>
+                  }
+                </View>
+              </View>
+
+            </TouchableOpacity>
+            {
+              (item?.status == 1 || item?.status == 2) &&
+              <View style={{ position: "absolute", left: 0, right: 0, top: 15, bottom: 4, backgroundColor: 'rgba(0, 0, 0, 0.15)', borderRadius: 10, alignItems: "center", justifyContent: "center", marginHorizontal: 15 }}>
+                <View style={{ paddingHorizontal: 20, paddingVertical: 10, borderWidth: 3, borderColor: LibStyle.colorRed, transform: [{ rotate: '-20deg' }] }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: item?.status == 1 ? 24 : 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{item?.status == 1 ? esp.lang("event/coupon", "voucher_used") : esp.lang("event/coupon", "voucher_expired")}</Text>
+                </View>
+                <View style={{ position: 'absolute', top: (((LibStyle.width - 60) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
+                  <View style={{ flex: 1 }} />
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
+                </View>
+              </View>
+            }
+          </View>
+        )}
+      />
+    </View>
+  )
+}

package/event/coupon_claim.tsx

@@ -0,0 +1,198 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { EventCoupon_claim_history } from 'esoftplay/cache/event/coupon_claim_history/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 useGlobalSubscriber from 'esoftplay/subscribe';
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claimArgs {
+
+}
+export interface EventCoupon_claimProps {
+
+}
+
+export const subscribe = useGlobalSubscriber()
+
+export default function m(props: EventCoupon_claimProps): any {
+  const { event_id, event_name } = esp.mod("lib/navigation").getArgsAll(props)
+  const [tenant, setTenant] = useLazyState<any>()
+  const [errorTenant, setErrorTenant] = useLazyState<string>("")
+  const [redeemed, setRedeemed] = useLazyState<any>()
+  const [errorRedeemed, setErrorRedeemed] = useSafeState<string>("")
+  const [key, setKey] = useSafeState<number>(1)
+
+  useEffect(() => {
+    loadAll()
+  }, [])
+
+  subscribe.useSubscribe(() => {
+    loadAll()
+    setKey(k => k + 1)
+  })
+
+  const loadAll = () => {
+    loadDataTenant()
+  }
+
+  function loadDataTenant() {
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_tenant?event_id=" + event_id, null, (result, message) => {
+      esp.log(result);
+      setTenant(result)()
+      if (result?.is_parent == 1) {
+        loadRedeemedCoupon(result?.tenant_id)
+      }
+    }, (err) => {
+      setErrorTenant(err?.message)
+    }, 1)
+  }
+
+  function loadRedeemedCoupon(tenant_id: string) {
+    setRedeemed(undefined)
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_tenant_redeemed?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result, message) => {
+      setRedeemed(result)()
+    }, (error) => {
+      setErrorRedeemed(error?.message)
+    }, 1)
+  }
+
+  function RenderMenu(props: any) {
+    return (
+      <TouchableOpacity onPress={props.onPress} style={applyStyle({ flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+        <View style={applyStyle({ backgroundColor: 'rgba( 255, 255, 255, 0.40 )', padding: 15, borderRadius: 10 })}>
+          <LibIcon name={props?.icon} style={applyStyle({ opacity: 1 })} color="#fff" />
+        </View>
+        <Text allowFontScaling={false} style={applyStyle({ height: 30, textAlign: 'center', fontFamily: 'SFProText', margin: 10, marginTop: 5, color: '#fff', marginBottom: 0, fontSize: 10 })}>{props?.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={tenant?.is_parent == 1 ? esp.lang("event/coupon_claim", "manage_coupon") : esp.lang("event/coupon_claim", "header_title")} subtitle={tenant?.is_parent == 1 ? esp.lang("event/coupon_claim", "manage_coupon_sub", event_name) : esp.lang("event/coupon_claim", "header_sub")} bgColor={"#95a5a6"} titleColor="#fff" notif />
+      {
+        (!tenant && errorTenant == "") ?
+          <LibSkeleton>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <LibSkeleton.BoxFlex size={80} />
+              <LibSkeleton.BoxFlex size={80} />
+              <LibSkeleton.BoxFlex size={80} />
+              <LibSkeleton.BoxFlex size={80} />
+            </View>
+            <LibSkeleton.BoxFull size={(LibStyle.width - 60) * 0.43} />
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <LibSkeleton.BoxFlex size={80} />
+              <LibSkeleton.BoxFlex size={80} />
+            </View>
+          </LibSkeleton>
+          :
+          errorTenant != "" ? <ComponentMessage message={errorTenant} />
+            :
+            <>
+              <View style={applyStyle({ paddingBottom: 30, padding: 15, backgroundColor: "#95a5a6", flexDirection: 'row', justifyContent: 'space-between' })}>
+                {
+                  tenant?.is_parent == 1 &&
+                  <>
+                    <RenderMenu title={esp.lang("event/coupon_claim", "withdraw")} icon="currency-usd" onPress={() => {
+                      esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse", { event_id, tenant_id: tenant?.tenant_id })
+                    }} />
+                    <RenderMenu title={"Pegawai"} icon="account" onPress={() => {
+                      esp.mod("lib/navigation").navigate("event/coupon_claim_staff", { event_id, tenant_id: tenant?.tenant_id })
+                    }} />
+                  </>
+                }
+                <RenderMenu title={esp.lang("event/coupon_claim", "claim_report")} icon="history" onPress={() => {
+                  esp.mod("lib/navigation").navigate("event/coupon_claim_history", { event_id, config: tenant })
+                }} />
+                <RenderMenu title={esp.lang("event/coupon_claim", "scan_voucher")} icon="qrcode-scan" onPress={() => {
+                  esp.mod("lib/navigation").navigateForResult("component/scanner", null, 989348).then((value) => {
+                    esp.mod("lib/navigation").navigate("event/coupon_claim_detail", { code: value, staff_id: tenant?.staff_id })
+                  })
+                }} />
+              </View>
+
+              <LibScroll style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} onRefresh={loadAll} >
+
+                {
+                  tenant?.is_parent == 1 &&
+                  <>
+                    {
+                      tenant?.images && tenant?.images.length > 0 &&
+                      <LibCarrousel
+                        delay={3000}
+                        style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width, marginTop: 17 }}
+                        autoplay
+                        bullets
+                        bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                        chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                        bulletsContainerStyle={{ marginBottom: -10 }}>
+                        {
+                          tenant?.images?.map((item: any, index: number) => (
+                            <View key={index} style={[{ borderRadius: 15, backgroundColor: '#fff', marginHorizontal: 15 }, LibStyle.elevation(2)]}>
+                              <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderRadius: 5 }} />
+                              <View style={{ position: 'absolute', top: (((LibStyle.width - 30) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
+                                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "#EEF1F8", marginLeft: -9.5 }} />
+                                <View style={{ flex: 1 }} />
+                                <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "#EEF1F8", marginRight: -9.5 }} />
+                              </View>
+                            </View>
+
+                          ))
+                        }
+                      </LibCarrousel>
+                    }
+                    {
+                      (!redeemed && errorRedeemed == "") ?
+                        <View style={{ marginHorizontal: 15, marginVertical: 10, height: 70, flex: 1 }}>
+                          <LibSkeleton>
+                            <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+                              <View style={{ width: (LibStyle.width - 45) * 0.5, height: 60, borderRadius: 15, backgroundColor: "white" }} />
+                              <View style={{ width: (LibStyle.width - 45) * 0.5, height: 60, borderRadius: 15, backgroundColor: "white" }} />
+                            </View>
+                          </LibSkeleton>
+                        </View>
+                        :
+                        <View style={{ margin: 5, marginBottom: 10, marginTop: 10, borderRadius: 15, padding: 10 }}>
+                          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+                            <TouchableOpacity onPress={() => { }} style={{ padding: 15, borderRadius: 15, backgroundColor: "white", width: (LibStyle.width - 45) * 0.5 }}>
+                              <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/coupon_claim", "total_coupon")}</Text>
+                              <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(redeemed?.qty)}</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity onPress={() => { }} style={{ padding: 15, borderRadius: 15, backgroundColor: "white", width: (LibStyle.width - 45) * 0.5 }}>
+                              <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/coupon_claim", "amount_coupon")}</Text>
+                              <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(redeemed?.amount)}</Text>
+                            </TouchableOpacity>
+                          </View>
+                        </View>
+                    }
+                  </>
+                }
+
+                {
+                  tenant && tenant?.is_parent && tenant?.is_parent == 0 &&
+                  <EventCoupon_claim_history hideHeader={true} config={tenant} event_id={event_id} key={key} />
+                }
+
+              </LibScroll>
+            </>
+
+      }
+    </View >
+  )
+}

package/event/coupon_claim_detail.tsx

@@ -0,0 +1,175 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+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 React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claim_detailArgs {
+  code: string
+}
+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" }}>
+      <ComponentHeader title={esp.lang("event/coupon_claim_detail", "header")} />
+      {
+        (!data && error == "") ? <LibLoading /> : error != "" ?
+          <>
+            <ComponentMessage message={error} />
+            <ComponentButton 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>
+            <ComponentButton 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 >
+  )
+}