esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/payment/ticket.tsx

@@ -0,0 +1,625 @@
+// withHooks
+
+import { BigbangPayment_detail, BigbangPayment_detailProperty } from 'esoftplay/cache/bigbang/payment_detail/import';
+import { BigbangPayment_list } from 'esoftplay/cache/bigbang/payment_list/import';
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentStep } from 'esoftplay/cache/component/step/import';
+import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
+import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibHtmltext } from 'esoftplay/cache/lib/htmltext/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseDeeplinkProperty } from 'esoftplay/cache/use/deeplink/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { sendTm } from 'esoftplay/error';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import useGlobalSubscriber from 'esoftplay/subscribe';
+import React, { useEffect, useRef } from 'react';
+import { Linking, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PaymentTicketArgs {
+
+}
+export interface PaymentTicketProps {
+
+}
+export const stateRandomSeat = useGlobalState<string | undefined>(undefined)
+export const reBooking = useGlobalSubscriber()
+export const reTryBooking = useGlobalSubscriber()
+
+export default function m(props: PaymentTicketProps): any {
+  const headerTitle = LibNavigation.getArgs(props, 'headerTitle', "BBO Payment")
+  const headerSubTitle = LibNavigation.getArgs(props, 'headerSubTitle', esp.lang("bigbang/payment", "subtitle_empty"))
+  const user = UserClass.state().get()
+  const dialogSeat = useRef<LibSlidingup>(null)
+  const dialogTerm = useRef<LibSlidingup>(null)
+  const scrollRef = useRef<ScrollView>(null)
+  const scrollYRef = useRef(0)
+  let userSelectRandomSeat = useRef(false)
+
+  const {
+    dataBookingEvent,
+    order_type,
+    tax,
+    fee_platform,
+    subscribed,
+    url_payment
+  } = LibNavigation.getArgsAll<any>(props)
+  const hasTerm = dataBookingEvent?.selected_ticket?.term && dataBookingEvent?.selected_ticket?.term.length > 0
+
+  const [agreeTermIfAvailable, setAgreeTermIfAvailable] = useSafeState(hasTerm ? false : true)
+  const [priceTotal, setPriceTotal] = useSafeState<any>(0)
+  const [charge, setCharge] = useSafeState<any>(0)
+  const [chargePercent, setChargePercent] = useSafeState<any>()
+  const [platformFee, setPlatformFee] = useSafeState<any>(fee_platform)
+  const [voucherUsed, setVoucherUsed] = useSafeState<any>()
+  const [selectedPayment, setSelectedPayment, getSelectedPayment] = useSafeState<any>()
+  const { isInPricingQueueConfig } = EventFirebase_socket()
+  const [, setAmountTotal, getAmountTotal] = useLazyState<string>()
+  const [agreeSubscribed, setAgreeSubscribed] = useSafeState<boolean>(subscribed?.is_subscribed_default == 1 ? true : false)
+
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+
+  reBooking.useSubscribe(() => {
+    if (getSelectedPayment()?.payment_id == 2 || getSelectedPayment()?.payment_type == 9)/* BBO PAY || BBO WALLET */ {
+      LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+        if (p) {
+          buyTicket(p)
+        }
+      })
+    } else {
+      buyTicket()
+    }
+  })
+
+  reTryBooking.useSubscribe(() => {
+    buyTicket(undefined, reTryBooking.getValue(), true)
+  })
+
+  const viewImageMap = (image: string) => {
+    return (
+      <View>
+        <TouchableOpacity onPress={() => {
+          // LibNavigation.navigate('lib/gallery', { image: result?.image_map })
+        }}>
+          <LibPicture source={{ uri: image }} style={{ width: LibStyle.width - 100, height: LibStyle.width - 100, borderRadius: 10 }} resizeMode="contain" />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => { LibDialog.hide() }} style={{ marginTop: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <LibIcon name="close-circle-outline" color={LibStyle.colorPrimary} size={30} />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  useEffect(() => {
+    let prices = Number(dataBookingEvent?.selected_ticket?.list?.price)
+    setPriceTotal(prices * Number(dataBookingEvent?.qty))
+
+    if (dataBookingEvent && dataBookingEvent?.selected_ticket?.hasOwnProperty('image_map') && dataBookingEvent?.selected_ticket?.image_map != "") {
+      LibDialog.custom(viewImageMap(dataBookingEvent?.selected_ticket?.image_map))
+    }
+    const code = UseDeeplinkProperty.params.get()?.code
+    if (code) {
+      let post = {
+        voucher_code: code,
+        event_id: dataBookingEvent.event_id,
+        price_id: dataBookingEvent?.selected_ticket?.price_id,
+        qty: dataBookingEvent?.qty
+      }
+      let url = "event_booking_voucher_check"
+      new LibCurl(url, post, (res, msg) => {
+        setVoucherUsed({ ...res, code: code })
+      }, (error) => {
+        LibProgress.hide()
+      }, 1)
+    }
+    return () => { stateRandomSeat.reset() }
+  }, [])
+
+  function parseQty(value: string, qty: number): string {
+    return new Array(qty).fill(value).join('|')
+  }
+
+
+  let postBookingTicket = {
+    buyer_name: encodeURIComponent(user?.name),
+    buyer_email: encodeURIComponent(user?.email.trim()),
+    buyer_phone: encodeURIComponent(user?.phone),
+    name: parseQty(encodeURIComponent(user?.name), dataBookingEvent?.qty),
+    email: parseQty(encodeURIComponent(user?.email.trim()), dataBookingEvent?.qty),
+    phone: parseQty(encodeURIComponent(user?.phone), dataBookingEvent?.qty),
+    address: parseQty(encodeURIComponent(user?.address), dataBookingEvent?.qty),
+    location_id: parseQty(user?.location_id, dataBookingEvent?.qty),
+    ondate: parseQty(dataBookingEvent?.selected_ticket?.list?.ondate, dataBookingEvent?.qty),
+    price_id: parseQty(dataBookingEvent?.selected_ticket?.price_id, dataBookingEvent?.qty),
+    qty: dataBookingEvent?.qty,
+    trx_id: trxId,
+  }
+
+  function percentageCalculator(amount: any, percent: any) {
+    return (percent * amount) / 100
+  }
+
+  /* 
+      $tiket = harga total tiket
+      $discount = dari voucher
+      $tax = ($tiket - $discount) x config
+      $convinience = ($tiket - $discount) x / + config
+      $bank_fee = (($tiket - $discount) + $convinience + $tax) x / + config */
+
+  let amount = Number(priceTotal)
+  let _voucher = voucherUsed?.amount_type == "NOMINAL" ? Number(voucherUsed?.amount) : percentageCalculator(amount, Number(voucherUsed?.amount))
+  let amountWithVoucher = voucherUsed ? (Number(amount) - _voucher) : Number(amount)
+  let _tax = percentageCalculator(amountWithVoucher, tax)
+  let subtotalWithTax = tax ? amountWithVoucher + _tax : amountWithVoucher
+
+  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(amountWithVoucher, Number(platformFee?.fee_platform_amount || 0)) : 0
+
+  let subtotalWithTaxWithFeePlatform = subtotalWithTax + _fee_platform
+
+  let _charge = priceTotal == 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)
+
+  setAmountTotal(String(_amountTotal))
+
+  function buyTicket(pin?: string, alldatapost?: boolean, bypassDialog?: boolean) {
+    if (pin) {
+      bypassDialog = true
+    }
+    if (!getSelectedPayment()) {
+      LibToastProperty.show(esp.lang("bigbang/payment", "toast_payment"));
+      return
+    }
+
+    let filteredPayment = LibObject.removeKeys(getSelectedPayment(), [
+      'code',
+      'title',
+      'va_prefix',
+      'image',
+      'description',
+      'description_topup',
+      'params',
+      'fee',
+      'fee_percent',
+      'fee_topup',
+      'fee_percent_topup',
+      'minimum_amount',
+      'orderby',
+      'publish',
+      'publish_topup',
+      'active',
+      'alert',
+      'provider',
+      'fee_platform_type',
+      'fee_platform_amount',
+      'allowed_payment',
+      'charge',
+      'charge_percent',
+      'list'
+    ])()
+    let post: any = {
+      ...postBookingTicket,
+      ...filteredPayment,
+      is_multi: 0,
+      pin: pin || '',
+    }
+
+
+    if (dataBookingEvent?.selected_ticket?.use_seat == 1) {
+      post.row_id = dataBookingEvent?.row_id
+      post.column_id = dataBookingEvent?.column_id
+    }
+
+    if (voucherUsed) {
+      post.discount_id = voucherUsed?.id
+      post.discount_generated_id = voucherUsed?.generated_id
+    }
+
+    if (dataBookingEvent?.hasOwnProperty('addition')) {
+      post.addition = dataBookingEvent?.addition
+    }
+
+    if (subscribed && subscribed?.is_subscribed == 1) {
+      post.is_subscribed = agreeSubscribed ? 1 : 0
+    }
+
+    if (dataBookingEvent?.adjacent_seats) {
+      if (stateRandomSeat.get()) {
+        post.adjacent_seats = stateRandomSeat.get()
+        userSelectRandomSeat.current = true
+        stateRandomSeat.reset()
+      } else {
+        userSelectRandomSeat.current = false
+        post.adjacent_seats = 1
+      }
+    }
+
+    // payment cc
+    // if (getSelectedPayment()?.payment_type == 3) {
+    //   post.card_id = getSelectedPayment()?.id
+    //   post.card_holder = getSelectedPayment()?.holder
+    //   post.card_number = getSelectedPayment()?.number
+    //   post.card_expiry_year = getSelectedPayment()?.expiry_year
+    //   post.card_expiry_month = getSelectedPayment()?.expiry_month
+    //   post.card_cvv = getSelectedPayment()?.card_cvv
+    //   if (getSelectedPayment()?.hasOwnProperty('card_installment_interval')) {
+    //     post.card_installment_interval = getSelectedPayment()?.card_installment_interval
+    //   }
+    //   if (getSelectedPayment()?.hasOwnProperty('card_installment_count')) {
+    //     post.card_installment_count = '' 
+    //   }
+    // }
+
+    function doBooking() {
+      let url = 'event_booking/' + dataBookingEvent?.event_id;
+      LibNavigation.navigateForResult('bigbang/loading_page', {
+        post: alldatapost || post,
+        url: url,
+        title: esp.lang("bigbang/payment", "title_buy_ticket", dataBookingEvent?.event_title),
+        isSecure: 1,
+        currency: dataBookingEvent?.selected_ticket?.currency,
+        amount: LibUtils.numberAbsolute(getAmountTotal()),
+        receive_name: "BBO",
+        receive_image: 'https://bbo.co.id/images/uploads/logo-bbo-tagline_1.png',
+        send_name: user?.name,
+        send_image: user?.image,
+        order_type: "ticket"
+      }, 660).then((value) => {
+        esp.log({ value });
+        setTimeout(() => {
+          if (isInPricingQueueConfig(dataBookingEvent?.event_id)) {
+            EventCountdownProperty.releaseQueue.trigger()
+          }
+        }, 3000);
+
+        if (userSelectRandomSeat.current) {
+          sendTm(`
+#randomseat
+${esp.config('domain')}
+${UserClass.state().get('email')}
+
+event=${dataBookingEvent?.event_title}
+type=${dataBookingEvent?.selected_ticket?.type}
+qty=${post?.qty}
+`,
+            '-1001737180019')
+        }
+
+        LibNavigation.backToRoot()
+        LibNavigation.push('event/order')
+
+        if (value?.hasOwnProperty('url_web') && value?.url_web != null) {
+          LibNavigation.navigateForResult('payment/cc_web', {
+            ...value,
+            statusSuccess: [1]
+          }).then((res) => {
+            LibNavigation.backToRoot()
+            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 if (value?.hasOwnProperty('url_mobile') && value?.url_mobile != null) {
+          Linking.openURL(value?.url_mobile)
+          LibNavigation.push('event/order_detail_waiting', { url: value?.url })
+        } else {
+          if (value?.url?.includes("waiting")) {
+            LibNavigation.push('event/order_waiting')
+          }
+          LibNavigation.push(value?.url?.includes("waiting") ? 'event/order_detail_waiting' : 'event/order_detail', {
+            url: value.url,
+          })
+        }
+
+        // if (getSelectedPayment()?.payment_id == 2) {
+        //   LibNavigation.push('event/order_detail', {
+        //     ...value,
+        //     url: value.url,
+        //     title: esp.lang("bigbang/loading_page", "success")
+        //   })
+        // } else if (getSelectedPayment()?.payment_id == 3 || getSelectedPayment().type == "12") { /* untuk cc sama paylater */
+        //   LibNavigation.navigateForResult('payment/cc_web', {
+        //     ...value,
+        //     statusSuccess: [1]
+        //   }).then((res) => {
+        //     LibNavigation.backToRoot()
+        //     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.push('event/order_waiting')
+        //   LibNavigation.push('event/order_detail_waiting', { url: value?.url })
+        // }
+
+      })
+    }
+
+    if (bypassDialog || alldatapost) {
+      doBooking()
+      return
+    }
+    LibDialog.confirm(esp.lang("bigbang/payment", "dialog_title"), esp.lang("bigbang/payment", "dialog_msg"), esp.lang("bigbang/payment", "dialog_ok"), () => {
+      doBooking()
+    }, esp.lang("bigbang/payment", "dialog_cancel"), () => {
+
+    })
+  }
+
+  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>
+    )
+  }
+
+  function renderTermItem(item: any, i: number) {
+    return (
+      <View key={i}>
+        <ComponentStep text={item} />
+      </View>
+    )
+  }
+
+  // tiket undangan
+  if (dataBookingEvent?.selected_ticket?.use_code == 1 && dataBookingEvent?.selected_ticket?.price_date == 0) {
+    LibNavigation.replace('payment/event_invitation', { dataBookingEvent: dataBookingEvent })
+  }
+
+  // order_type lihat di api home > config > order_type
+  let orderTitle = order_type == 1 ? esp.lang("bigbang/payment", "ticket_event") : order_type == 5 ? esp.lang("bigbang/payment", "cv") : esp.lang("bigbang/payment", "booking_talent")
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={headerTitle} subtitle={headerSubTitle} />
+      <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)
+          }
+        }
+      }}>
+        <View style={{ backgroundColor: '#fff' }}>
+          <BigbangPayment_detail
+            ondate={dataBookingEvent?.selected_ticket?.list?.ondate}
+            // onlyBboPay={bboPay}
+            order_type={order_type}
+            priceTotal={priceTotal}
+            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={dataBookingEvent?.selected_ticket?.currency}
+            qty={dataBookingEvent?.qty}
+            tax={tax}
+            voucher={voucherUsed}
+            name_seat={dataBookingEvent?.seat_name}
+            onPressSeat={() => {
+              dialogSeat.current?.show()
+            }}
+            title={orderTitle}
+            event_name={dataBookingEvent?.event_title} />
+        </View>
+
+        <View style={{ height: 5 }} />
+
+        {/* Voucher */}
+        {
+          order_type == 1 &&
+          <TouchableOpacity testID='voucher' onPress={() => {
+            LibNavigation.navigateForResult('event/voucher', {
+              qty: dataBookingEvent?.qty,
+              defaultCode: voucherUsed?.code,
+              event_id: dataBookingEvent?.event_id,
+              price_id: dataBookingEvent?.selected_ticket?.price_id,
+              ondate: dataBookingEvent?.selected_ticket?.list?.ondate
+            }).then((item: any) => {
+              setVoucherUsed(item)
+              if (selectedPayment) {
+                if (!item?.payment?.includes(selectedPayment?.payment_id)) {
+                  setSelectedPayment(undefined)
+                }
+              }
+              else {
+                if (item?.payment?.length > 0) {
+                  if (item?.payment[0] == 2) /* bbopay */ {
+                    // check saldo
+                    if (Number(user.saldo) >= Number(priceTotal)) {
+                      let payment = {
+                        payment_id: parseInt(item?.payment[0])
+                      }
+                      setSelectedPayment(payment)
+                    } else {
+                      if (item?.payment?.length > 1) {
+                        let payment = {
+                          payment_id: parseInt(item?.payment[1])
+                        }
+                        setSelectedPayment(payment)
+                      }
+                    }
+                  } else {
+                    let payment = {
+                      payment_id: parseInt(item?.payment[0])
+                    }
+                    setSelectedPayment(payment)
+                  }
+                }
+              }
+            })
+          }} style={{ flex: 1, borderRadius: 20, borderColor: LibStyle.colorBrown, borderWidth: 1, backgroundColor: '#fff', padding: 7, marginTop: 10, marginBottom: 0, margin: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ flexWrap: 'wrap', marginLeft: 15, fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }}>
+              {voucherUsed ? esp.lang("bigbang/payment", "success_use_code") : esp.lang("bigbang/payment", "input_code")}
+              {voucherUsed && <Text style={{ fontWeight: 'bold' }}> {voucherUsed?.code}</Text>}
+            </Text>
+            <LibIcon name="chevron-right" />
+          </TouchableOpacity>
+        }
+
+        <BigbangPayment_list
+          onToggleCC={() => { scrollRef.current?.scrollToEnd({ animated: true }) }}
+          url_payment={url_payment}
+          order_type={order_type}
+          voucher_amount={_voucher || 0}
+          eventId={dataBookingEvent?.event_id}
+          currency={dataBookingEvent?.selected_ticket?.currency}
+          onPressPayment={(item: any) => {
+            if (item) {
+              let payment = {
+                ...item,
+                payment_id: Number(item.id),
+                payment_type: Number(item.type),
+              }
+
+              if (voucherUsed) {
+                if (voucherUsed?.payment?.length > 0) {
+                  if (voucherUsed?.payment?.includes(Number(item.id))) {
+                    setSelectedPayment(payment)
+                  } else {
+                    LibDialog.warningConfirm(esp.lang("bigbang/payment", "warn_title"), esp.lang("bigbang/payment", "warn_msg", LibUtils.money(_voucher)), esp.lang("bigbang/payment", "warn_ok"), () => {
+                      setVoucherUsed(undefined)
+                      if (item.id == 2) /* bbopay */ {
+                        // check saldo
+                        if (Number(user.saldo) >= Number(priceTotal)) {
+                          setSelectedPayment(payment)
+                        }
+                      } else {
+                        setSelectedPayment(payment)
+                      }
+                    }, esp.lang("bigbang/payment", "warn_no"), () => {
+                      // setSelectedPayment(payment)
+                      // setSelectedPayment(undefined)
+                    })
+                  }
+                }
+                setSelectedPayment(payment)
+              } else {
+                setSelectedPayment(payment)
+              }
+
+              /* UPDATE TERAKHIR (8 Des 2023) */
+              /* CHARGE NGAMBIL DARI CHARGE PAYMENT */
+              /* SEKIAN */
+              setCharge(item.charge)
+              setPlatformFee({ fee_platform_type: item?.fee_platform_type || 'NONE', fee_platform_amount: item?.fee_platform_amount || 0 })
+              setChargePercent(item.charge_percent)
+            } else {
+              setSelectedPayment(undefined)
+            }
+          }}
+          paymentId={selectedPayment?.payment_id}
+          chargeTotal={_charge_total}
+          priceTotal={getAmountTotal()}
+        />
+
+        <View style={{ height: 40 }} />
+      </ScrollView>
+      <View style={{ paddingHorizontal: 15, paddingVertical: 10, }}>
+        {
+          subscribed?.is_subscribed == 1 &&
+          <Pressable onPress={() => { setAgreeSubscribed(!agreeSubscribed) }} style={{ padding: 10, paddingBottom: 5, flexDirection: 'row', alignItems: 'center' }} >
+            <View style={{}}  >
+              <LibIcon name={agreeSubscribed ? 'checkbox-outline' : 'checkbox-blank-outline'} />
+            </View>
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{subscribed?.is_subscribed_label}</Text>
+            </View>
+          </Pressable>
+        }
+
+        {
+          hasTerm &&
+          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+            <Pressable style={{ padding: 10 }} onPress={() => { setAgreeTermIfAvailable(!agreeTermIfAvailable) }} >
+              <LibIcon name={agreeTermIfAvailable ? 'checkbox-outline' : 'checkbox-blank-outline'} />
+            </Pressable>
+            <Pressable onPress={() => dialogTerm.current?.show()} style={{ flex: 1, marginRight: 16 }}>
+              <Text allowFontScaling={false}>{esp.lang("bigbang/payment", "accept")}<Text style={{ fontWeight: 'bold', color: LibStyle.colorPrimary }} >{esp.lang("bigbang/payment", "term")}</Text></Text>
+            </Pressable>
+          </View>
+        }
+        <ComponentButton
+          testID={"buy_btn"}
+          onPress={() => {
+            if (agreeTermIfAvailable)
+              if (selectedPayment?.payment_id == 2 || selectedPayment?.payment_type == 9)/* BBO PAY || BBO WALLET */ {
+                LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                  if (p) {
+                    buyTicket(p)
+                  }
+                })
+              } else {
+                buyTicket()
+              }
+          }}
+          label={esp.lang("bigbang/payment", "btn_buy")}
+          backgroundColor={!selectedPayment || !agreeTermIfAvailable ? LibStyle.colorGrey : "#00b894"}
+        />
+      </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' }}>
+              {
+                dataBookingEvent?.seat_name?.map(renderSeatItem)
+              }
+            </View>
+          </ScrollView>
+        </View>
+      </LibSlidingup>
+      {/* dialog term */}
+      <LibSlidingup ref={dialogTerm} >
+        {
+          <View style={[{ padding: 16, maxHeight: LibStyle.height * 0.7, borderRadius: 5, backgroundColor: '#fff' }]}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+              <View style={{ flex: 1 }}>
+                <LibHtmltext allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>Term & Condition {dataBookingEvent?.selected_ticket?.type}</LibHtmltext>
+              </View>
+              <Pressable onPress={() => dialogTerm.current?.hide()} >
+                <LibIcon name='close' />
+              </Pressable>
+            </View>
+            <ScrollView>
+              {dataBookingEvent?.selected_ticket?.term?.map?.(renderTermItem)}
+            </ScrollView>
+          </View>
+        }
+      </LibSlidingup>
+    </View>
+  )
+}