esoftplay-event 0.0.0-a → 0.0.0-c

package/event/order_detail_payment.tsx

@@ -0,0 +1,153 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { useEffect } from 'react';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import { EventStep } from 'esoftplay/cache/event/step/import';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export interface EventOrder_detail_paymentProps {
+  data: any
+}
+export default function m(props: EventOrder_detail_paymentProps): any {
+  let data = LibNavigation.getArgs(props, 'data', props.data)
+  let { from, va_no, fee_topup } = LibNavigation.getArgsAll(props)
+
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_topup_info')
+  }, [])
+
+  if (from == "fromTopUp") {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#FFF' }}>
+        <EventHeader title={esp.lang("event/order_detail_payment", "topup_payment_instruction")} />
+        <LibScroll>
+          {
+            fee_topup != null && fee_topup != 0 &&
+            <>
+              <View style={{ marginBottom: 10, marginHorizontal: 17, marginTop: 20, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_payment", "fee_topup")}</Text>
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FB871C" }}>{"TopUp - " + LibUtils.money(fee_topup)}</Text>
+              </View>
+              <View style={{ height: 10, flex: 1, backgroundColor: LibStyle.colorBgGrey }} />
+            </>
+          }
+          <View style={{ marginHorizontal: 17, marginTop: 10, paddingBottom: 5, marginBottom: 10, }} >
+            <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#4a4a4a" }}>{esp.lang("event/order_detail_payment", "virtual_number_account")}</Text>
+            <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", }}>
+              <View style={{ flex: 1, backgroundColor: '#f1f2f3', borderRadius: 5, marginRight: 10, padding: 5 }} >
+                <Text allowFontScaling={false} ellipsizeMode={"middle"} numberOfLines={1} style={{ fontSize: 30, fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: LibStyle.colorPrimaryDark }}>{va_no}</Text>
+              </View>
+              <TouchableOpacity onPress={() => {
+                LibUtils.copyToClipboard(va_no)
+                LibToastProperty.show(esp.lang("event/order_detail_payment", "success_copied"))
+              }} >
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0, color: LibStyle.colorPrimaryDark }} >{esp.lang("event/order_detail_payment", "copy")}</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {
+            LibUtils.checkUndefined(bboConfig, 'topup_info.0') &&
+            <View style={{ marginHorizontal: 15, backgroundColor: '#FDF1DE', padding: 15, borderRadius: 5, borderWidth: 1, borderColor: '#FC9722' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 5 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', letterSpacing: 0.3, paddingRight: 5 }} >{esp.lang("event/order_detail_payment", "information")}</Text>
+                <LibIcon.Ionicons name="information-circle" color="#FB871C" size={16} />
+              </View>
+              {
+                bboConfig.topup_info.map((item: any, i: number) => {
+                  if (bboConfig.topup_info.length > 1) {
+                    return (
+                      <View key={i} style={{ alignItems: "flex-start", flexDirection: "row", marginRight: 10 }} >
+                        <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: "#FB871C", marginRight: 5, marginTop: 6 }} />
+                        <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item}</Text>
+                      </View>
+                    )
+                  } else {
+                    return (
+                      <Text key={i} allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item}</Text>
+                    )
+                  }
+                })
+              }
+            </View>
+          }
+          <View style={{ marginTop: 10 }} />
+          {
+            Object.keys(data).map((key: any, i: number) => {
+              let imgBank: any = ''
+              let keyT = ''
+              if (key == "atm") {
+                imgBank = 'icons/ic_atm.png'
+                keyT = esp.lang("event/order_detail_payment", "transfer_atm_instruction")
+              } else if (key == "internet") {
+                imgBank = 'icons/ic_ibank.png'
+                keyT = esp.lang("event/order_detail_payment", "transfer_ibank_instruction")
+              } else {
+                imgBank = 'icons/ic_mbank.png'
+                keyT = esp.lang("event/order_detail_payment", "transfer_mbanking_instruction")
+              }
+              return (
+                <LibCollaps key={i} show={i == 2} header={(show) =>
+                  <View style={[{ borderRadius: 5, marginVertical: 5, marginLeft: 15, marginRight: 15, padding: 12, justifyContent: 'space-between', flexDirection: 'row', backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+                    <View style={{ flex: 7, alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                      <LibPicture source={esp.assets(imgBank)} style={{ width: 20, height: 20 }} resizeMode="cover" />
+                      <Text allowFontScaling={false} ellipsizeMode={"middle"} numberOfLines={1} style={{ marginLeft: 10, marginRight: 10, fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{keyT}</Text>
+                    </View>
+                    <LibIcon name={show ? 'chevron-up' : 'chevron-down'} color="#4a4a4a" />
+                  </View>}>
+                  {
+                    data && data.atm && data[key].length > 0 && data[key].map((item: any, i: number) => {
+                      return (
+                        <View key={i} style={{ marginHorizontal: 15 }} >
+                          <EventStep text={item} />
+                        </View>
+                      )
+                    })
+                  }
+                </LibCollaps>
+              )
+            })
+          }
+        </LibScroll>
+      </View>
+    )
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
+      <EventHeader title={esp.lang("event/order_detail_payment", "payment_instruction")} />
+      <LibScroll>
+        {
+          Object.keys(data).map((key: any, i: number) => {
+            return (
+              <View key={i} style={{ borderWidth: 1, borderColor: '#9e9e9e', marginTop: 5, margin: 20, borderTopLeftRadius: 5, borderTopRightRadius: 5, paddingBottom: 10, marginBottom: 10 }}>
+                <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={{ borderBottomColor: '#9e9e9e', borderBottomWidth: 1, textAlignVertical: 'center', margin: 10, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{key.toUpperCase()}</Text>
+                {
+                  data && data.atm && data[key].length > 0 && data[key].map((item: any, i: number) => {
+                    return (
+                      <EventStep key={i} text={item} />
+                    )
+                  })
+                }
+              </View>
+            )
+          })
+        }
+      </LibScroll>
+    </View>
+  )
+}

package/event/order_detail_upgrade.tsx

@@ -0,0 +1,164 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 from 'react';
+import { Text, View } from 'react-native';
+import Pressable from '../lib/pressable';
+
+
+export interface EventOrder_detail_upgradeArgs {
+
+}
+export interface EventOrder_detail_upgradeProps {
+
+}
+export default function m(props: EventOrder_detail_upgradeProps): any {
+  const { dataTicket, url }: any = esp.mod("lib/navigation").getArgsAll(props)
+  const [selectedTicket, setSelectedTicket] = useSafeState()
+  const [result, setResult] = useSafeState()
+  const [error, setError] = useSafeState()
+
+  function loadDataUpgradeTicket() {
+    new LibCurl(url, null, (res: any, msg: string) => {
+      // setAvailableUpgrade(res?.list)
+      // esp.log(res);
+      setResult(res)
+    }, (err: any) => {
+      setError(err)
+    })
+  }
+
+
+  useEffect(() => {
+    loadDataUpgradeTicket()
+  }, [])
+
+  if (!result && !error) {
+    const LibLoading = esp.mod("lib/loading")
+    return <LibLoading />
+  }
+
+  if (error) {
+    return (
+      <View style={{ flex: 1 }} >
+        <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
+        <View style={{ flex: 1 }}>
+          <EventMessage message={error?.message} children={
+            <EventButton
+              label='Kembali'
+              style={{ margin: 15, marginHorizontal: 30 }}
+              onPress={() => LibNavigation.back()}
+            />
+          } />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
+      <View style={{ flex: 1 }}>
+        <LibTextstyle textStyle='m_overline' text={esp.lang("event/order_detail_upgrade", "current_ticket")} style={{ fontSize: 12, margin: 15, marginBottom: 0 }} />
+
+        <View style={{ ...LibStyle.elevation(2), margin: 15, width: LibStyle.width - 30, borderRadius: 10, backgroundColor: LibStyle.colorBgGrey, padding: 10, height: 100, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <LibTextstyle style={{ marginHorizontal: 5, fontSize: 20, color: "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'} textStyle='m_button' text={dataTicket?.price_name} />
+          <Text allowFontScaling={false} style={{ color: "#000" }}>{LibUtils.money(dataTicket.total)}</Text>
+
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 })}>
+            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: "#fff", marginLeft: -12.5 })} />
+            <View style={applyStyle({ flex: 1 })} />
+            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: "#fff", marginRight: -12.5 })} />
+          </View>
+        </View>
+
+        <LibTextstyle textStyle='m_overline' text={esp.lang("event/order_detail_upgrade", "upgrade_to")} style={{ fontSize: 12, margin: 15, marginBottom: 0 }} />
+
+        <LibList
+          data={result?.list}
+          extraData={selectedTicket}
+          style={{ margin: 15, justifyContent: 'space-between' }}
+          renderItem={(item: any, i: number) => {
+            return (
+              <Pressable onPress={() => {
+                if (item.status == 1) {
+                  let a = {
+                    event_id: dataTicket?.event_id,
+                    selected_ticket: {
+                      ...item,
+                      price_id: item.price_id_to,
+                      list: {
+                        ondate: item.ondate
+                      },
+                    },
+                    qty: dataTicket?.qty_upgrade
+                  }
+                  setSelectedTicket(a)
+                } else {
+                  LibDialog.warning(esp.lang("event/order_detail_upgrade", "oops"), item.message_error)
+                }
+              }} key={i} style={{ ...LibStyle.elevation(2), width: LibStyle.width - 35, marginLeft: 2.5, marginTop: 2.5, marginBottom: 10, borderRadius: 10, backgroundColor: item.status == 0 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                <LibTextstyle style={{ marginHorizontal: 5, fontSize: 16, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'} textStyle='m_button' text={item?.price_name_to} />
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status == 0 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000" }}>{"+ " + LibUtils.money(Number(dataTicket?.qty_upgrade) * Number(item?.amount))}</Text>
+
+                {
+                  item.info &&
+                  <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#c9c9c9" }}>{item.info}</Text>
+                }
+
+              </Pressable>
+            )
+          }}
+        />
+
+      </View>
+      <View style={{ padding: 10 }}>
+        <EventButton label={esp.lang("event/order_detail_upgrade", "btn_next")} onPress={() => {
+          if (selectedTicket) {
+            if (selectedTicket?.selected_ticket?.use_seat == 1 && selectedTicket?.selected_ticket?.seat_autopick == 0) {
+              LibNavigation.navigateForResult('event/seat_map', {
+                url: 'event_seat',
+                dataTicket: selectedTicket
+              }).then((value) => {
+                LibNavigation.navigate('event/order_detail_upgrade_payment', {
+                  dataTicket: dataTicket,
+                  selectedTicket: {
+                    ...selectedTicket,
+                    row_id: value?.row_id,
+                    column_id: value?.column_id,
+                    seat_name: value?.seat_name,
+                  }
+                })
+              })
+            } else {
+              LibNavigation.navigate('event/order_detail_upgrade_payment', {
+                dataTicket: dataTicket,
+                selectedTicket: selectedTicket
+              })
+            }
+          } else {
+            LibToastProperty.show(esp.lang("event/order_detail_upgrade", "select_ticket"))
+            return
+          }
+        }}
+          backgroundColor={selectedTicket ? LibStyle.colorGreen : LibStyle.colorGrey}
+          fontColor='#fff'
+        />
+      </View>
+    </View>
+  )
+}

package/event/order_detail_upgrade_button.tsx

@@ -0,0 +1,60 @@
+// withHooks
+import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from 'react-native-reanimated';
+import Pressable from '../lib/pressable';
+
+
+export interface EventOrder_detail_upgrade_buttonArgs {
+
+}
+export interface EventOrder_detail_upgrade_buttonProps {
+  onPress: () => void
+}
+export default function m(props: EventOrder_detail_upgrade_buttonProps): any {
+  const translateY = useSharedValue(0);
+
+  translateY.value = withRepeat(
+    withSequence(
+      withTiming(-5, { duration: 400 }),
+      withTiming(5, { duration: 400 }),
+    ),
+    -1, // -1 means repeat indefinitel
+    false
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  return (
+    <Pressable onPress={() => props.onPress()} >
+      <LibGradient
+        colors={["#f1f2f3", LibStyle.colorPrimary]}
+        direction='left-to-right'
+        style={{ margin: 15, marginBottom: 0, borderRadius: 5, padding: 12, paddingVertical: 8, flexDirection: "row", justifyContent: 'space-between', alignItems: 'center', borderWidth: 1, borderColor: '#ccc' }} >
+        <View>
+          <LibTextstyle textStyle='headline' text={esp.lang("event/order_detail_upgrade_button", "upgrade")} />
+          <LibTextstyle textStyle='footnote' text={esp.lang("event/order_detail_upgrade_button", "eays")} />
+        </View>
+        <Animated.View style={[animatedStyle]} >
+          <LibIcon.Feather name='chevrons-up' size={40} />
+        </Animated.View>
+      </LibGradient>
+    </Pressable>
+  )
+}

package/event/order_detail_upgrade_payment.tsx

@@ -0,0 +1,221 @@
+// withHooks
+import { useRef } from 'react';
+
+import { BigbangPayment_detail, BigbangPayment_detailProperty } from 'esoftplay/cache/bigbang/payment_detail/import';
+import { BigbangPayment_list } from "esoftplay/cache/bigbang/payment_list/import";
+import { EventButton } from "esoftplay/cache/event/button/import";
+import { EventHeader } from "esoftplay/cache/event/header/import";
+import { EventTransaction } from 'esoftplay/cache/event/transaction/import';
+import { LibCurl } from "esoftplay/cache/lib/curl/import";
+import { LibDialog } from "esoftplay/cache/lib/dialog/import";
+import { LibNavigation } from "esoftplay/cache/lib/navigation/import";
+import { LibProgress } from "esoftplay/cache/lib/progress/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 esp from "esoftplay/esp";
+import useSafeState from "esoftplay/state";
+import { ScrollView, Text, View } from "react-native";
+
+
+
+export interface EventOrder_detail_upgrade_paymentArgs {
+
+}
+export interface EventOrder_detail_upgrade_paymentProps {
+
+}
+export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
+  const { dataTicket, selectedTicket }: any = LibNavigation.getArgsAll(props)
+  const [selectedPayment, setSelectedPayment] = useSafeState<any>()
+  const [platformFee, setPlatformFee] = useSafeState<any>()
+  const [charge, setCharge] = useSafeState<any>(0)
+  const [chargePercent, setChargePercent] = useSafeState<any>()
+
+  const [trxId] = useSafeState(EventTransaction().getTrxId())
+  const scrollRef = useRef<ScrollView>(null)
+  const scrollYRef = useRef(0)
+  const dialogSeat = useRef<LibSlidingup>(null)
+
+  function doUpgrade(pin?: any) {
+    const LibToastProperty = esp.modProp("lib/toast")
+    if (!selectedPayment) {
+      LibToastProperty.show(esp.lang("event/order_detail_upgrade_payment", "empty_method"))
+      return
+    }
+
+    LibDialog.confirm(esp.lang("event/order_detail_upgrade_payment", "confirm_title"), esp.lang("event/order_detail_upgrade_payment", "confirm_msg", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to), esp.lang("event/order_detail_upgrade_payment", "confirm_ok"), () => {
+      let post = {
+        booking_id: dataTicket?.id,
+        price_id_to: selectedTicket?.selected_ticket?.price_id_to,
+        trx_id: trxId,
+        payment_id: selectedPayment?.payment_id,
+        ...selectedPayment
+      }
+
+      if (selectedTicket?.selected_ticket?.use_seat == 1) {
+        post.row_id = selectedTicket?.row_id
+        post.column_id = selectedTicket?.column_id
+        post.seat_name = selectedTicket?.seat_name
+      }
+
+      if (selectedTicket?.selected_ticket?.seat_autopick == 1) {
+        post.adjacent_seats = 1
+      }
+
+      if (selectedPayment?.payment_id == 2) {
+        post.pin = pin
+      }
+      LibProgress.show(esp.lang("event/order_detail_upgrade_payment", "confirm_wait"))
+      new LibCurl('event_order_detail_upgrade_checkout', post, (res, msg) => {
+        esp.log({ post });
+        LibProgress.hide()
+        LibNavigation.reset()
+        if (selectedPayment?.payment_id == 2) /* bbo pay */ {
+          LibToastProperty.show(msg)
+          LibNavigation.navigate('event/order_detail', { url: res?.url })
+        } else if (selectedPayment?.payment_id == 3)/* cc */ {
+          LibNavigation.navigateForResult('payment/cc_web', {
+            ...res,
+            statusSuccess: [1]
+          }).then((res) => {
+            LibNavigation.push('user/profile')
+            if (res?.hasOwnProperty('params_error') || res?.hasOwnProperty('failed')) {
+              LibNavigation.push('event/order_waiting')
+              LibNavigation.push('event/order_detail_waiting', { url: res?.url })
+            } else {
+              LibNavigation.push('event/order')
+            }
+          })
+        } else {
+          LibNavigation.navigate('event/order_detail_waiting', { url: res?.url })
+        }
+      }, (err) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/order_detail_upgrade_payment", "oops"), err?.message)
+      })
+
+    }, esp.lang("event/order_detail_upgrade_payment", "confirm_no"), () => { })
+
+  }
+
+
+  function percentageCalculator(amount: any, percent: any) {
+    return (percent * amount) / 100
+  }
+
+  let amount = Number(selectedTicket?.selected_ticket?.amount) * Number(dataTicket?.qty_upgrade)
+  let _tax = percentageCalculator(amount, dataTicket?.tax_event)
+  let subtotalWithTax = amount + _tax
+
+  let _fee_platform_type = platformFee?.fee_platform_type
+  let _fee_platform = _fee_platform_type == "NOMINAL" ? Number(platformFee?.fee_platform_amount || 0) : _fee_platform_type == "PERCENTAGE" ? percentageCalculator(amount, Number(platformFee?.fee_platform_amount || 0)) : 0
+
+  let subtotalWithTaxWithFeePlatform = subtotalWithTax + _fee_platform
+
+  let _charge = amount == 0 ? 0 : Number(charge)
+  let _charge_percent = chargePercent == 0 ? 0 : percentageCalculator(subtotalWithTaxWithFeePlatform, chargePercent)
+  let _charge_total = chargePercent ? _charge + _charge_percent : _charge
+
+  let _amountTotal = Number(subtotalWithTaxWithFeePlatform) + Number(_charge_total)
+
+  function renderSeatItem(item: any, i: number) {
+    return (
+      <View key={i} style={{ margin: 10, marginBottom: 0, marginRight: 5, marginLeft: 5, height: 32, width: 32, backgroundColor: LibStyle.colorBlue, borderWidth: 1, borderColor: LibStyle.colorBlue, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={esp.lang("event/order_detail_upgrade_payment", "header_title")} />
+      <ScrollView ref={scrollRef} stickyHeaderIndices={[0]} scrollEventThrottle={16} onScroll={({ nativeEvent }) => {
+        const currentYPosition = nativeEvent.contentOffset.y
+        const oldPosition = scrollYRef.current
+
+        if (currentYPosition >= (LibStyle.height * 0.3)) {
+          if (oldPosition == 0) {
+            scrollYRef.current = nativeEvent.contentOffset.y
+            BigbangPayment_detailProperty.stateShow.set(false)
+          }
+        }
+      }}>
+        {/* detail */}
+
+        <View style={{ backgroundColor: 'white' }}>
+          <BigbangPayment_detail
+            ondate={dataTicket?.ondate}
+            // onlyBboPay={bboPay}
+            order_type={14}
+            priceTotal={amount}
+            charge={charge}
+            fee_platform_type={platformFee?.fee_platform_type}
+            fee_platform_amount={platformFee?.fee_platform_amount}
+            charge_percent={chargePercent}
+            // typeTicket={dataBookingEvent?.selected_ticket?.type}
+            currency={selectedTicket?.selected_ticket?.currency}
+            qty={dataTicket?.qty_upgrade}
+            tax={dataTicket?.tax_event}
+            name_seat={selectedTicket?.seat_name}
+            onPressSeat={() => {
+              dialogSeat.current?.show()
+            }}
+            title={esp.lang("event/order_detail_upgrade_payment", "upgrade_to", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to)}
+            event_name={dataTicket?.event_title} />
+        </View>
+
+
+        <BigbangPayment_list
+          eventId={dataTicket?.event_id}
+          onToggleCC={() => { scrollRef.current?.scrollToEnd({ animated: true }) }}
+          order_type={14} // upgrade ticekt
+          currency={selectedTicket?.selected_ticket?.currency}
+          onPressPayment={(item: any) => {
+            let payment = {
+              ...item,
+              payment_id: Number(item.id),
+              payment_type: Number(item.type),
+            }
+            setSelectedPayment(payment)
+            setPlatformFee({ fee_platform_type: item?.fee_platform_type || 'NONE', fee_platform_amount: item?.fee_platform_amount || 0 })
+            setCharge(item.charge)
+            setChargePercent(item.charge_percent)
+          }}
+          paymentId={selectedPayment?.payment_id}
+          priceTotal={Number(_amountTotal)}
+          chargeTotal={_charge_total}
+        />
+      </ScrollView>
+      <View style={{ padding: 10 }}>
+        <EventButton label={esp.lang("event/order_detail_upgrade_payment", "pay")} onPress={() => {
+          if (selectedPayment?.payment_id == 2) /* BBO PAY */ {
+            LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+              if (p) {
+                doUpgrade(p)
+              }
+            })
+          } else {
+            doUpgrade()
+          }
+        }}
+          fontColor='#fff'
+          backgroundColor={selectedPayment ? "#00b894" : LibStyle.colorBgGrey}
+        />
+      </View>
+      {/* ini dialog seat */}
+      <LibSlidingup ref={dialogSeat}>
+        <View style={{ backgroundColor: 'white', padding: 20 }} >
+          <LibTextstyle text={esp.lang("bigbang/payment", "text_seat")} textStyle="headline" />
+          <ScrollView >
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+              {
+                selectedTicket?.seat_name?.map(renderSeatItem)
+              }
+            </View>
+          </ScrollView>
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}