esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/ticket/reschedule2.tsx

@@ -0,0 +1,176 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/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 { LibList } from 'esoftplay/cache/lib/list/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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventOrder_reschedule2Args {
+
+}
+export interface EventOrder_reschedule2Props {
+
+}
+export default function m(props: EventOrder_reschedule2Props): any {
+  let { url } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+  const imgWidth = LibStyle.width - 30
+  const imgHeight = imgWidth / 1080 * 647
+
+  let defaultTabs = [
+    {
+      id: 1,
+      title: esp.lang("event/order_reschedule", "reschedule")
+    },
+    {
+      id: 2,
+      title: esp.lang("event/order_reschedule", "refund")
+    },
+  ]
+  const [activeTab, setActiveTab] = useSafeState<any>(1)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/order_reschedule2", "load_err"), error?.message)
+    }, 1)
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  if (!result?.booking_list?.length) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("event/order_reschedule", "reschedule_or_refund_ticket")} />
+        <ComponentMessage message={esp.lang("event/order_reschedule", "no_ticket_need_reschedule_or_refund")} />
+      </View>
+    )
+  }
+
+  function renderImageCarousel(item1: any, i: number) {
+    return (
+      <LibPicture key={i} source={{ uri: item1.image }} style={applyStyle({ borderTopLeftRadius: 0, borderTopRightRadius: 0, height: imgHeight, width: imgWidth, resizeMode: 'cover' })} />
+    )
+  }
+
+  const dateRange = LibUtils.getDateRange(result?.start_date, result?.end_date, " - ")
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/order_reschedule2", "header_title")} />
+
+      {
+        result?.global_refundable == 1 &&
+        <View style={{ margin: 15, marginBottom: 0, flexDirection: 'row' }}>
+          {
+            defaultTabs.map((item: any, i: number) => {
+              return (
+                <Pressable onPress={() => {
+                  setActiveTab(item.id)
+                }} key={i} style={{ flex: 1, borderWidth: item.id == activeTab ? 1 : 0, borderColor: LibStyle.colorBgGrey, padding: 10, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: item.id == activeTab ? "#fff" : LibStyle.colorBgGrey }}>
+                  <Text allowFontScaling={false} style={{ opacity: item.id == activeTab ? 1 : 0.5, alignSelf: 'center', textAlign: 'center', fontWeight: item.id == activeTab ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == activeTab ? "#000" : "#aab0b7" }} >{item.title}</Text>
+                </Pressable>
+              )
+            })
+          }
+        </View>
+      }
+      <View style={{ flex: 1, borderWidth: 1, borderColor: LibStyle.colorBgGrey, marginTop: result?.global_refundable == 1 ? 0 : 10, margin: 15, borderTopLeftRadius: 0, borderTopRightRadius: 0, borderRadius: 10, backgroundColor: '#fff' }}>
+        <LibList
+          data={result?.booking_list}
+          ListHeaderComponent={
+            <View>
+              <LibCarrousel
+                delay={4000}
+                style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, height: imgHeight, width: imgWidth }}
+                autoplay
+                bullets
+                bulletStyle={{ width: 7, height: 7, backgroundColor: "#7e7e7e", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "white", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                bulletsContainerStyle={{ marginBottom: -15 }} >
+                {
+                  result?.images.map(renderImageCarousel)
+                }
+              </LibCarrousel>
+              <View style={{ flexDirection: 'row', marginLeft: 0, margin: 14, marginTop: 4, justifyContent: 'space-between' }}>
+                <Text allowFontScaling={false} style={{ marginTop: 14, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.title}</Text>
+              </View>
+
+              <View style={{ marginLeft: 0, margin: 14, marginTop: 0, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="calendar-blank-outline" size={20} />
+                <Text allowFontScaling={false} style={{ marginLeft: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{dateRange}</Text>
+              </View>
+              <Text style={{ marginLeft: 0, margin: 14, fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }} >{esp.lang("event/order_reschedule", "schedule_ticket_new")}</Text>
+            </View>
+          }
+          style={{ margin: 10, borderTopLeftRadius: 0, borderTopRightRadius: 0, borderRadius: 10, backgroundColor: '#fff' }}
+          renderItem={(item: any, i: number) => {
+            return (
+              <View key={i} style={{ marginBottom: 10, borderWidth: 2, borderColor: LibStyle.colorBgGrey, borderRadius: 10, overflow: 'hidden' }}>
+                <View style={applyStyle({ backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'space-between', padding: 14 })}>
+                  <Text style={applyStyle({ fontSize: 14, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{(item.price_name) + " (" + item.qty + " " + esp.lang("event/order_reschedule", "ticket_text") + ") "}</Text>
+                  <Text style={applyStyle({ fontSize: 14, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{LibUtils.money(item.price)}</Text>
+                </View>
+
+                <Pressable onPress={() => {
+                  LibNavigation.navigateForResult('event/order_reschedule_list', { data: item }).then((value: any) => {
+                    let _replaceItem = LibObject.set(result, value)('booking_list', i, 'price_type', value.index)
+                    setResult(_replaceItem)
+
+                  })
+                }} style={{}}>
+                  {
+                    item?.price_type?.filter((x: any) => x.check == 1).length == 0 &&
+                    <View style={{ padding: 14, backgroundColor: '#FFE7E7' }}>
+                      <Text style={applyStyle({ color: '#FF5858', textDecorationLine: 'underline', fontSize: 14, fontStyle: "normal", letterSpacing: 0 })} >{esp.lang("event/order_reschedule2", "select")}</Text>
+                    </View>
+                  }
+                  {
+                    item?.price_type?.filter((x: any) => x.check == 1).map((it: any, i1: number) => {
+                      return (
+                        <View style={{ padding: 14, backgroundColor: '#E2FFE1', flexDirection: 'row', justifyContent: 'space-between' }} key={i1}>
+                          <View style={{ flexDirection: 'row' }}>
+                            <View style={applyStyle({ width: 42, height: 42, borderRadius: 5, borderStyle: "solid", borderWidth: 1, borderColor: '#2BAB26', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+                              <Text allowFontScaling={false} style={applyStyle({ opacity: 1, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: '#2BAB26' })}>{LibUtils.moment(item.ondate).format('DD')}</Text>
+                            </View>
+                          </View>
+                          <Text style={applyStyle({ color: '#2BAB26', fontSize: 14, fontStyle: "normal", letterSpacing: 0 })} >{esp.lang("event/order_reschedule2", "change_date")}</Text>
+                        </View>
+                      )
+                    })
+                  }
+                </Pressable>
+
+              </View>
+            )
+          }}
+        />
+
+      </View>
+
+
+    </View>
+  )
+}

package/modules/ticket/reschedule_list.tsx

@@ -0,0 +1,85 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface EventOrder_reschedule_listArgs {
+
+}
+export interface EventOrder_reschedule_listProps {
+
+}
+export default function m(props: EventOrder_reschedule_listProps): any {
+  let { data } = LibNavigation.getArgsAll(props)
+
+
+  const [selectedTicket, setSelectedTicket] = useSafeState<any>()
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function renderItem(item: any, i: number) {
+    let _selectTicket = item.date_id == selectedTicket?.date_id
+    let bgDatePassed = item.is_passed == 1 ? LibStyle.colorLightGrey : _selectTicket ? "#f6f6f6" : '#fff'
+    let opacityPassed = item.is_passed == 1 ? 0.5 : 1
+
+
+
+    return (
+      <Pressable onPress={() => {
+        let a = {
+          ...item,
+          check: 1,
+          index: i
+        }
+        setSelectedTicket(a)
+      }} key={i} style={applyStyle({ borderRadius: 10, margin: 10, marginBottom: 0, borderWidth: 1.5, borderColor: LibStyle.colorGrey, overflow: 'hidden', backgroundColor: bgDatePassed, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', alignContent: 'center', padding: 10 })}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={applyStyle({ marginLeft: 10, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: bgDatePassed, borderStyle: "solid", borderWidth: opacityPassed, borderColor: _selectTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+            <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('DD')}</Text>
+          </View>
+          <View style={{ flexDirection: 'column' }}>
+            <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('dddd')}</Text>
+            <View style={applyStyle({ flexDirection: 'row' })}>
+              <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('MMMM')}</Text>
+              <Text allowFontScaling={false} style={applyStyle({ opacity: opacityPassed, marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(item.ondate).format('YYYY')}</Text>
+            </View>
+          </View>
+        </View>
+        <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} style={{ opacity: opacityPassed }} color={_selectTicket ? "#3ea4dc" : "#434343"} />
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#fff" }}>
+      <ComponentHeader title={esp.lang("event/order_reschedule_list", "header")} />
+      <ScrollView>
+        {
+          data?.price_type?.length > 0 && data?.price_type?.map(renderItem)
+        }
+      </ScrollView>
+
+      <ComponentButton label={esp.lang("event/order_reschedule_list", "btn")} onPress={() => {
+        if (!selectedTicket) {
+          LibToastProperty.show(esp.lang("event/order_reschedule_list", "select_date"))
+        } else {
+          LibNavigation.sendBackResult(selectedTicket)
+        }
+      }} style={{ margin: 15 }} backgroundColor={selectedTicket ? LibStyle.colorPrimary : LibStyle.colorBgGrey} fontColor="#fff" />
+
+    </View>
+  )
+}

package/modules/ticket/share_to.tsx

@@ -0,0 +1,220 @@
+// withHooks
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentInput_circle_icon } from 'esoftplay/cache/component/input_circle_icon/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventOrder_detailProperty } from 'esoftplay/cache/event/order_detail/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 { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserPopup } from 'esoftplay/cache/user/popup/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventOrder_share_toArgs {
+  url: string
+}
+export interface EventOrder_share_toProps {
+
+}
+export default function m(props: EventOrder_share_toProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const user = UserClass.state().get()
+  let inputEmail = React.useRef<ComponentInput_circle_icon>(null)
+  const dialogUser = useRef<ComponentSlidingup>(null)
+  const [email, setEmail] = useSafeState<string>('')
+  const [qty, setQty] = useSafeState<number>(1)
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+
+  const [result, setResult] = useSafeState<any>()
+
+  function loadData(): void {
+    new LibCurl(url, null, (res) => {
+      setResult(res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/order_share_to", "load_error"), error?.message);
+      LibNavigation.back()
+    })
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function add(): void {
+    if (qty < Number(result.qty_shareable)) {
+      setQty(qty + 1)
+    }
+  }
+
+  function min(): void {
+    setQty(qty == 1 ? 1 : qty - 1)
+  }
+
+  function shareTicket() {
+    LibDialog.warningConfirm(esp.lang("event/order_share_to", "title_alert_share_ticket"), esp.lang("event/order_share_to", "msg_alert_share_ticket"), esp.lang("event/order_share_to", "btn_yes_alert_share_ticket"), () => {
+      let post = {
+        receiver_email: email,
+        booking_id: result?.booking_id,
+        qty_shared: qty,
+        trx_id: trxId
+      }
+      LibProgress.show(esp.lang("event/order_share_to", "msg_wait"))
+      new LibCurl('event_booking_shared?id=' + result?.event_id, post, (res, msg) => {
+        // LibNotify(result)
+        EventOrder_detailProperty.subscribe().trigger()
+        EventIndexProperty.reload.trigger() //reload data order
+        LibProgress.hide()
+        LibDialog.info(esp.lang("event/order_share_to", "title_curl_success"), msg)
+        LibNavigation.back()
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/order_share_to", "share_error"), error?.message);
+        LibNavigation.back()
+      }, 1)
+    }, esp.lang("event/order_share_to", "btn_cancel_alert_share_ticket"), () => {
+
+    })
+  }
+
+  if (!result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  return (
+    <LibKeyboard_avoid style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/order_share_to", "title_share_ticket_to")} />
+      <ScrollView showsVerticalScrollIndicator={false} >
+        <ComponentTouchable onPress={() => {
+          LibNavigation.navigate('component/scanner', {
+            fromPage: 'event/order_share_to',
+            qty: result?.qty,
+            qty_shared: result?.qty_shared,
+            url_order_detail: url,
+          })
+        }}>
+          <View style={{ width: LibStyle.width, height: LibStyle.height * 0.5, backgroundColor: '#b8b7bf', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+            <LibPicture source={esp.assets('icons/ic_barcode_white.png')} style={{ height: 250, width: 250 }} />
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 10, color: '#fff' }}>{esp.lang("event/order_share_to", "click_here")}</Text>
+            <Text allowFontScaling={false} style={{ color: '#fff', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 6 }}>{esp.lang("event/order_share_to", "scan_qrcode")}</Text>
+            <Text allowFontScaling={false} style={{ color: '#fff', fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 5 }}>{esp.lang("event/order_share_to", "in_member_bbo_page")}</Text>
+          </View>
+        </ComponentTouchable>
+        <Text allowFontScaling={false} style={{ opacity: 0.6, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 17 }}>{esp.lang("event/order_share_to", "or")}</Text>
+        <ComponentInput_circle_icon
+          ref={inputEmail}
+          keyboardType="email-address"
+          placeholder={esp.lang("event/order_share_to", "placeholder_input_email")}
+          autoCapitalize="none"
+          onChangeText={(t) => {
+            setEmail(t)
+          }}
+          onSubmitEditing={() => {
+            if (inputEmail.current!.getText() == '') {
+              LibToastProperty.show(esp.lang("event/order_share_to", "msg_error_input_email"))
+              inputEmail.current!.blur()
+              return
+            } else if (email === user.email) {
+              LibDialog.warningConfirm(esp.lang("event/order_share_to", "title_alert_fault"), esp.lang("event/order_share_to", "msg_alert_cant_share_ticket_to_myself"), esp.lang("event/order_share_to", "btn_yes_alert_cant_share_ticket_to_myself"), () => {
+                setEmail("")
+                inputEmail.current?.setText("")
+                inputEmail.current!.focus()
+              }, "", () => {
+
+              })
+              return
+            } else {
+              dialogUser.current!.show()
+            }
+          }}
+          style={{ marginLeft: 25, marginRight: 25, marginTop: 18, borderRadius: 10 }} />
+        <ComponentTouchable onPress={() => {
+          if (inputEmail.current!.getText() == '') {
+            LibToastProperty.show(esp.lang("event/order_share_to", "msg_error_input_email"))
+            inputEmail.current!.blur()
+            return
+          } else if (email === user.email) {
+            LibDialog.warningConfirm(esp.lang("event/order_share_to", "title_alert_fault"), esp.lang("event/order_share_to", "msg_alert_cant_share_ticket_to_myself"), esp.lang("event/order_share_to", "btn_yes_alert_cant_share_ticket_to_myself"), () => {
+              setEmail("")
+              inputEmail.current?.setText("")
+              inputEmail.current!.focus()
+            }, "", () => {
+
+            })
+          } else {
+            dialogUser.current!.show()
+          }
+        }} >
+          <View style={{ marginBottom: 10, marginTop: 18, marginLeft: 25, marginRight: 25, height: 35, borderRadius: 17.5, backgroundColor: "#34a2ec", borderStyle: "solid", borderWidth: 0.5, borderColor: "#2980b9", alignItems: 'center', justifyContent: 'center' }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#fff" }} >{esp.lang("event/order_share_to", "next")}</Text>
+          </View>
+        </ComponentTouchable>
+
+      </ScrollView>
+      <ComponentSlidingup ref={dialogUser} >
+        <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
+          <UserPopup
+            email={email.trim()}
+            redirect={() => {
+              if (result?.use_seat == 1) {
+                let data = {
+                  event_id: result?.event_id,
+                  qty: qty,
+                  selected_ticket: {
+                    list: {
+                      price_id: result?.price_id,
+                      on_date: result?.ondate,
+                    }
+                  }
+                }
+                LibNavigation.navigate('event/seat', {
+                  url: 'event_seat_shared',
+                  dataTicket: data,
+                  shared: true,
+                  booking_id: result?.id,
+                  receiver_email: email,
+                })
+              } else {
+                shareTicket()
+              }
+              dialogUser.current!.hide()
+            }} cancel={() => {
+              dialogUser.current!.hide()
+            }}
+            view={
+              <View style={{ flexDirection: 'row', marginTop: 20, marginBottom: 8, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <TouchableOpacity onPress={() => { min() }}>
+                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="minus" color="#e74c3c" />
+                  </View>
+                </TouchableOpacity>
+                <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 }}>{qty}</Text>
+                <TouchableOpacity onPress={() => { add() }}>
+                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="plus" color="#16a085" />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            }
+          />
+        </View>
+      </ComponentSlidingup>
+    </LibKeyboard_avoid>
+  )
+}

package/modules/ticket/share_to_detail.tsx

@@ -0,0 +1,179 @@
+// withHooks
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/import';
+import { ComponentAvatar } from 'esoftplay/cache/component/avatar/import';
+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 { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventOrder_share_to_detailArgs {
+
+}
+export interface EventOrder_share_to_detailProps {
+
+}
+export default function m(props: EventOrder_share_to_detailProps): any {
+  const user = UserClass.state().get()
+  const { user_id, qty, qty_shared, url_order_detail } = LibNavigation.getArgsAll(props)
+  const [userTo, setUserTo] = useSafeState<any>()
+  const [_qty, set_qty] = useSafeState<number>(1)
+  const [result, setResult] = useSafeState<any>()
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+
+
+  useEffect(() => {
+    loadDataUser()
+    loadDataEvent()
+  }, [])
+
+  function loadDataUser() {
+    let postTest = {
+      qr: user_id
+    }
+    new LibCurl('user', postTest, (result, msg) => {
+      setUserTo(result)
+    }, (error) => {
+      LibNavigation.back()
+      LibToastProperty.show(error?.message)
+    }, 1)
+  }
+
+  function loadDataEvent() {
+    new LibCurl(url_order_detail, null, (res) => {
+      setResult(res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/order_share_to_detail", "load_error"), error?.message);
+      LibNavigation.back()
+    })
+
+  }
+
+  function add(): void {
+    let a = Number(qty - qty_shared)
+    let b = a - result?.qty_used
+
+    if (_qty < Number(b)) {
+      set_qty(_qty + 1)
+    }
+  }
+
+  function min(): void {
+    set_qty(_qty == 1 ? 1 : _qty - 1)
+  }
+
+  function shareTicket() {
+    LibDialog.warningConfirm(esp.lang("event/order_share_to_detail", "title_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "msg_confirm_share_ticket"), esp.lang("event/order_share_to_detail", "btn_yes_confirm_share_ticket"), () => {
+      let post = {
+        receiver_email: userTo?.email,
+        booking_id: result?.booking_id,
+        qty_shared: _qty,
+        trx_id: trxId
+      }
+
+      LibProgress.show(esp.lang("event/order_share_to_detail", "msg_wait"))
+      new LibCurl('event_booking_shared?id=' + result?.event_id, post, (res, msg) => {
+        // LibNotify(res)
+        LibProgress.hide()
+        LibDialog.info(esp.lang("event/order_share_to_detail", "title_success_ share_ticket"), msg)
+        LibNavigation.back()
+        LibNavigation.back()
+
+        // LibNavigation.backToRoot()
+        // LibNavigation.navigate('event/order_detail', { url: res?.url })
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/order_share_to_detail", "err"), error?.message);
+        LibNavigation.back()
+      })
+    }, esp.lang("event/order_share_to_detail", "btn_cancel_share_ticket"), () => {
+
+    })
+  }
+
+  if (!userTo && !result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  if (userTo?.id == user?.id) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("event/order_share_to_detail", "share_ticket_to")} />
+        <ComponentMessage message={esp.lang("event/order_share_to_detail", "cannot_share_ticket_to_myself")} children={
+          <ComponentButton onPress={() => {
+            LibNavigation.back()
+          }} label={esp.lang("event/order_share_to_detail", "back")} style={{ margin: 15, marginTop: 50 }} />
+        } />
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <LibKeyboard_avoid style={{ flex: 1 }}>
+        <ComponentHeader title={esp.lang("event/order_share_to_detail", "share_ticket_to")} />
+        <View style={[{ margin: 15, marginTop: 20, padding: 15, borderRadius: 5, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{esp.lang("event/order_share_to_detail", "share_ticket_to")}</Text>
+          <ComponentAvatar uri={userTo?.image} style={{ marginTop: 18, alignSelf: 'center' }} />
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a", marginTop: 11 }}>{userTo?.name}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{userTo?.phone}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{userTo?.email}</Text>
+
+          <View style={{ flexDirection: 'row', marginTop: 25, marginBottom: 8, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+            <TouchableOpacity onPress={() => { min() }}>
+              <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="minus" color="#e74c3c" />
+              </View>
+            </TouchableOpacity>
+            <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 }}>{_qty}</Text>
+            <TouchableOpacity onPress={() => { add() }}>
+              <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="plus" color="#16a085" />
+              </View>
+            </TouchableOpacity>
+          </View>
+          <ComponentButton label={esp.lang("event/order_share_to_detail", "send_ticket")} style={{ marginTop: 20, marginLeft: 10, marginRight: 10 }} onPress={() => {
+            if (result?.use_seat == 1) {
+              let data = {
+                event_id: result?.event_id,
+                qty: _qty,
+                selected_ticket: {
+                  list: {
+                    price_id: result?.price_id,
+                    on_date: result?.ondate,
+                  }
+                }
+              }
+              LibNavigation.navigate('event/seat', {
+                url: 'event_seat_shared',
+                dataTicket: data,
+                shared: true,
+                booking_id: result?.id,
+                receiver_email: userTo.email,
+              })
+            } else {
+              shareTicket()
+            }
+          }} />
+
+        </View>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}