esoftplay-event 0.0.2-h → 0.0.2-i

package/event/order_detail_upgrade.tsx

@@ -9,15 +9,15 @@ import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/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 { LibPicture } from 'esoftplay/cache/lib/picture/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 { Pressable, Text, View } from 'react-native';
+import { ActivityIndicator, Pressable, Text, View } from 'react-native';
 
 
 export interface EventOrder_detail_upgradeArgs {
@@ -28,9 +28,10 @@ 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 [selectedTicket, setSelectedTicket, getSelectedTicket] = useSafeState()
+  const [result, setResult, getResult] = useSafeState()
   const [error, setError] = useSafeState()
+  const [loading, setLoading] = useSafeState(false)
   // const [resultEvent, setResultEvent] = useSafeState()
 
   function loadDataUpgradeTicket() {
@@ -42,6 +43,19 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
     })
   }
 
+  function curlPriceConfig(price_id: string, onDone: (data: any) => void) {
+    setLoading(true)
+    if (getResult()?.url_price_config) {
+      new LibCurl(getResult()?.url_price_config, null, (res, msg) => {
+        setLoading(false)
+        onDone(res?.[price_id])
+      }, (err) => {
+        setLoading(false)
+        LibToastProperty.show(err?.message)
+      })
+    }
+  }
+
   // function loadDataEvent() {
   //   new LibCurl("event_detail/" + dataTicket?.event_id, null, (res: any, msg: string) => {
   //     setResultEvent(res)
@@ -56,6 +70,69 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
     // loadDataEvent()
   }, [])
 
+  function renderItem(item: any, i: number) {
+    let textOpacity = item?.status == 1 ? 1 : 0.3
+    let ticketWithDate = item.price_date == 1 && item.use_code == 0
+    let selTic = selectedTicket?.selected_ticket?.id == item.id
+    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,
+            // tax_event: item.tax
+          }
+          setSelectedTicket(a)
+        }
+      }} key={i} style={{
+
+        margin: 15, marginTop: 0, borderRadius: 5, overflow: 'hidden', borderWidth: 1.5, borderColor: selTic ? LibStyle.colorBlue : LibStyle.colorBgGrey
+      }}>
+        <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 5, borderTopRightRadius: 5 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <View style={{ flex: 3 }}>
+              <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold', color: item.status != 1 ? "#c9c9c9" : selTic ? LibStyle.colorBlue : "#000" }}>{item.price_name_to} </EventHtmltext>
+            </View>
+            {
+              item?.status != 1 &&
+              <View style={applyStyle({ alignSelf: 'center', flexDirection: 'row' })}>
+                <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
+                  <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{item?.status_text}</Text>
+                </View>
+              </View>
+            }
+          </View>
+          {
+            item.info != "" && ticketWithDate &&
+            <View style={{ marginTop: 3, alignContent: 'center', alignItems: 'center', flexDirection: 'row', marginRight: 5 }}>
+              <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorBlue }}>{item.info}</Text>
+            </View>
+          }
+        </View>
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', padding: 10, alignItems: 'center' }}>
+          <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <LibPicture source={esp.assets('icons/ic_special2.png')} style={{ height: 42, width: 42 }} />
+            <View style={{ marginLeft: 14, flex: 1 }} >
+              {
+                item.info != "" &&
+                <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{item.info}</EventHtmltext>
+              }
+            </View>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status != 1 ? "#c9c9c9" : selTic ? LibStyle.colorBlue : "#000" }}>{"+ " + LibUtils.money(item?.amount_difference, item?.currency)}</Text>
+
+          </View>
+        </View>
+      </Pressable>
+    )
+  }
+
   if (!result && !error) {
     const LibLoading = esp.mod("lib/loading")
     return <LibLoading />
@@ -78,7 +155,14 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
     )
   }
 
-  esp.log(result);
+  const sorted = result?.list?.sort((a: any, b: any) => {
+    // jika a.status = 1 dan b bukan 1 → a di atas
+    if (a.status == 1 && b.status != 1) return -1;
+    // jika b.status = 1 dan a bukan 1 → b di atas
+    if (b.status == 1 && a.status != 1) return 1;
+    // jika dua-duanya sama statusnya → urutan tidak berubah
+    return 0;
+  });
 
   return (
     <View style={{ flex: 1 }} >
@@ -88,7 +172,7 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
 
         <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' }}>
           <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 20, color: "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{dataTicket?.price_name}</EventHtmltext>
-          <Text allowFontScaling={false} style={{ color: "#000", marginTop: 10 }}>{LibUtils.money(dataTicket.total, dataTicket?.currency)}</Text>
+          <Text allowFontScaling={false} style={{ color: "#000", marginTop: 10 }}>{LibUtils.money(result?.total_from, dataTicket?.currency)}</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 })} />
@@ -100,114 +184,92 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
         <LibTextstyle textStyle='m_overline' text={esp.lang("event/order_detail_upgrade", "upgrade_to")} style={{ fontSize: 12, margin: 15, marginBottom: 10 }} />
 
         <LibList
-          data={result?.list}
+          data={sorted}
           extraData={selectedTicket}
-          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,
-                    tax_event: item.tax
-                  }
-                  setSelectedTicket(a)
-                } else {
-                  LibDialog.warning(esp.lang("event/order_detail_upgrade", "oops"), item.message_error)
-                }
-              }} key={i} style={{
-                ...LibStyle.elevation(2), marginHorizontal: 15, marginTop: 2.5, marginBottom: 10, borderRadius: 10,
-                backgroundColor: item.status != 1 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, /* alignContent: 'center', alignItems: 'center', justifyContent: 'center' */
-              }}>
-                {
-                  item?.status != 1 &&
-                  <View style={applyStyle({ flexDirection: 'row' })}>
-                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderWidth: 1, backgroundColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderColor: (item.status == 0 || item?.status == 3) ? LibStyle.colorRed : "#4cd964", borderRadius: 5, padding: 3, opacity: 0.8 })}>
-                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: "#fff", fontWeight: 'bold' })}>{item?.status_text}</Text>
-                    </View>
-                  </View>
-                }
-                <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 16, color: item.status != 1 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{item?.price_name_to}</EventHtmltext>
-                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', marginTop: 5, color: item.status != 1 ? "#c9c9c9" : selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#000" }}>{"+ " + LibUtils.money(Number(dataTicket?.qty_upgrade) * Number(item?.amount), item?.currency)}</Text>
-
-                {
-                  item.info &&
-                  <Text allowFontScaling={false} style={{ textAlign: 'center', marginTop: 10, fontSize: 12, color: selectedTicket?.selected_ticket?.id == item.id ? "#fff" : "#c9c9c9" }}>{item.info}</Text>
-                }
-
-              </Pressable>
-            )
-          }}
+          renderItem={renderItem}
         />
 
       </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_new', {
-                url: 'event_seat',
-                dataTicket: selectedTicket
-              }).then((value) => {
-                let seatData: any = {}
-                seatData.seat_label = value?.seat_label
-                LibNavigation.navigate('event/order_detail_upgrade_payment', {
-                  dataTicket: {
-                    url_payment: result?.url_payment,
-                    price_name: dataTicket?.price_name,
-                    booking_id: dataTicket?.id,
-                    qty_upgrade: dataTicket?.qty_upgrade,
-                    tax_event: selectedTicket?.tax_event,
-                    ondate: dataTicket?.ondate,
-                    event_title: dataTicket?.event_name,
-                    event_id: dataTicket?.event_id,
-                    // ...dataTicket
-                  },
-                  selectedTicket: {
-                    ...selectedTicket,
-                    ...seatData
-                  },
-                  fee_platform: {
-                    fee_platform_amount: selectedTicket?.selected_ticket?.fee_platform_amount,
-                    fee_platform_type: selectedTicket?.selected_ticket?.fee_platform_type,
-                  }
-                })
-              })
-            } else {
-              LibNavigation.navigate('event/order_detail_upgrade_payment', {
-                dataTicket: {
-                  url_payment: result?.url_payment,
-                  price_name: dataTicket?.price_name,
-                  booking_id: dataTicket?.id,
-                  qty_upgrade: dataTicket?.qty_upgrade,
-                  tax_event: selectedTicket?.tax_event,
-                  ondate: dataTicket?.ondate,
-                  event_title: dataTicket?.event_name,
-                  event_id: dataTicket?.event_id,
-                  // ...dataTicket
-                },
-                selectedTicket: selectedTicket,
-                fee_platform: {
-                  fee_platform_amount: selectedTicket?.selected_ticket?.fee_platform_amount,
-                  fee_platform_type: selectedTicket?.selected_ticket?.fee_platform_type,
+        {
+          loading ?
+            <View style={{ minWidth: '100%', alignSelf: 'center' }}  >
+              <View style={{ borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: "#e6e6e6", alignItems: 'center', justifyContent: 'center', paddingHorizontal: 9 }} >
+                <ActivityIndicator size={"small"} color={LibStyle.colorPrimary} />
+              </View>
+            </View> :
+            <EventButton label={esp.lang("event/order_detail_upgrade", "btn_next")} onPress={() => {
+              const selectedTicket = getSelectedTicket()
+              if (selectedTicket) {
+                if (selectedTicket?.selected_ticket?.use_seat == 1 && selectedTicket?.selected_ticket?.seat_autopick == 0) {
+                  LibNavigation.navigateForResult('event/seat_map_new', {
+                    url: 'event_seat',
+                    dataTicket: selectedTicket
+                  }).then((value) => {
+                    let seatData: any = {}
+                    seatData.seat_label = value?.seat_label
+
+                    curlPriceConfig(selectedTicket.selected_ticket?.price_id_to, (config) => {
+                      LibNavigation.navigate('event/order_detail_upgrade_payment', {
+                        dataTicket: {
+                          url_payment: result?.url_payment,
+                          url_upgrade: result?.url_upgrade,
+                          price_name: dataTicket?.price_name,
+                          previous_total: Number(result?.total_from),
+                          booking_id: dataTicket?.id,
+                          qty_upgrade: dataTicket?.qty_upgrade,
+                          tax_event: config?.tax,
+                          ondate: dataTicket?.ondate,
+                          event_title: dataTicket?.event_name,
+                          event_id: dataTicket?.event_id,
+                          // ...dataTicket
+                        },
+                        selectedTicket: {
+                          ...selectedTicket,
+                          ...seatData
+                        },
+                        fee_platform: {
+                          fee_platform_amount: config?.fee_platform_amount,
+                          fee_platform_type: config?.fee_platform_type,
+                        },
+                      })
+                    })
+
+                  })
+                } else {
+                  curlPriceConfig(selectedTicket.selected_ticket?.price_id_to, (config) => {
+                    LibNavigation.navigate('event/order_detail_upgrade_payment', {
+                      dataTicket: {
+                        url_payment: result?.url_payment,
+                        url_upgrade: result?.url_upgrade,
+                        price_name: dataTicket?.price_name,
+                        booking_id: dataTicket?.id,
+                        previous_total: Number(result?.total_from),
+                        qty_upgrade: dataTicket?.qty_upgrade,
+                        tax_event: config?.tax,
+                        ondate: dataTicket?.ondate,
+                        event_title: dataTicket?.event_name,
+                        event_id: dataTicket?.event_id,
+                        // ...dataTicket
+                      },
+                      selectedTicket: selectedTicket,
+                      fee_platform: {
+                        fee_platform_amount: config?.fee_platform_amount,
+                        fee_platform_type: config?.fee_platform_type,
+                      }
+                    })
+                  })
+
                 }
-              })
-            }
-          } else {
-            LibToastProperty.show(esp.lang("event/order_detail_upgrade", "select_ticket"))
-            return
-          }
-        }}
-          backgroundColor={selectedTicket ? LibStyle.colorGreen : LibStyle.colorGrey}
-          fontColor='#fff'
-        />
+              } 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_payment.tsx

@@ -1,21 +1,24 @@
 // withHooks
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 
-import { BigbangPayment_detail, BigbangPayment_detailProperty } from 'esoftplay/cache/bigbang/payment_detail/import';
+import { BigbangPayment_detail_ticket, BigbangPayment_detail_ticketProperty } from 'esoftplay/cache/bigbang/payment_detail_ticket/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 { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { PaymentFee_calculate } from 'esoftplay/cache/payment/fee_calculate/import';
 import esp from "esoftplay/esp";
 import useSafeState from "esoftplay/state";
-import { Linking, ScrollView, Text, View } from "react-native";
+import { Linking, Pressable, ScrollView, Text, View } from "react-native";
 
 
 
@@ -28,7 +31,6 @@ export interface EventOrder_detail_upgrade_paymentProps {
 export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
   const { dataTicket, selectedTicket, fee_platform }: any = LibNavigation.getArgsAll(props)
   const [selectedPayment, setSelectedPayment] = useSafeState<any>()
-  const [platformFee, setPlatformFee] = useSafeState<any>(fee_platform)
   const [charge, setCharge] = useSafeState<any>(0)
   const [chargePercent, setChargePercent] = useSafeState<any>()
 
@@ -37,7 +39,6 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
   const scrollYRef = useRef(0)
   const dialogSeat = useRef<LibSlidingup>(null)
 
-  esp.log({ dataTicket, selectedTicket });
 
   function doUpgrade(pin?: any) {
     const LibToastProperty = esp.modProp("lib/toast")
@@ -67,7 +68,7 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
         post.pin = pin
       }
       LibProgress.show(esp.lang("event/order_detail_upgrade_payment", "confirm_wait"))
-      new LibCurl('event_order_detail_upgrade_checkout', post, (res, msg) => {
+      new LibCurl(dataTicket?.url_upgrade || 'event_order_detail_upgrade_checkout', post, (res, msg) => {
         LibProgress.hide()
         LibNavigation.reset()
         if (res?.hasOwnProperty('url_mobile') && res?.url_mobile != null) {
@@ -110,14 +111,22 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
     return (percent * amount) / 100
   }
 
-  let amount = Number(selectedTicket?.selected_ticket?.amount_difference) * Number(dataTicket?.qty_upgrade)
-  let _tax = percentageCalculator(amount, dataTicket?.tax_event)
-  let subtotalWithTax = amount + _tax
+  const price = Number(selectedTicket?.selected_ticket?.price_to)
+  const qty = Number(dataTicket?.qty_upgrade)
+
+  const calculate = PaymentFee_calculate(price, qty,
+    {
+      fee_platform_type: fee_platform?.fee_platform_type || "NONE",
+      fee_platform_amount: fee_platform?.fee_platform_amount || 0,
+      discount_type: "NONE",
+      discount_amount: 0,
+      tax: dataTicket?.tax_event || 0
+    }
+  )
 
-  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 amount = Number(selectedTicket?.selected_ticket?.price_to || selectedTicket?.selected_ticket?.amount_difference) * Number(dataTicket?.qty_upgrade)
+  let subtotalWithTaxWithFeePlatform = calculate.subtotal
 
   let _charge = amount == 0 ? 0 : Number(charge)
   let _charge_percent = chargePercent == 0 ? 0 : percentageCalculator(subtotalWithTaxWithFeePlatform, chargePercent)
@@ -133,6 +142,71 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
     )
   }
 
+  const currency = selectedTicket?.selected_ticket?.currency || "IDR"
+
+  const itemData = useMemo(() => {
+    const items: BigbangPayment_detail_ticketProperty.BigbangPayment_detail_ticketItem[] = []
+
+    items.push({
+      label: esp.lang("event/order_detail_upgrade_payment", "upgrade_to", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to),
+      caption: dataTicket?.ondate != "0000-00-00" ? LibUtils.moment(dataTicket?.ondate).localeFormat("DD MMMM YYYY") : "",
+      value: LibUtils.money(price, currency),
+      qty: LibUtils.number(qty)
+    })
+
+    //seat
+    const name_seat = selectedTicket?.seat_name
+    if (name_seat && name_seat.length > 0) {
+      items.push({
+        label: esp.lang("bigbang/payment_detail", "text_seat"),
+        value:
+          <Pressable onPress={() => dialogSeat.current?.show()} style={{ flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+            <View style={{ marginRight: 5, marginLeft: 5, height: 25, width: 25, backgroundColor: LibStyle.colorBlue, borderWidth: 1, borderColor: LibStyle.colorBlue, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{name_seat?.[0]}</Text>
+            </View>
+            {
+              name_seat && name_seat?.length > 1 &&
+              <LibIcon.MaterialIcons name="more" style={{ transform: [{ rotate: '180deg' }] }} size={32} color={LibStyle.colorBlue} />
+            }
+          </Pressable>
+      })
+    }
+
+    // Gov tax
+    if (dataTicket?.tax_event) {
+      items.push({
+        label: esp.lang("bigbang/payment_detail", "tax", String(Number(dataTicket?.tax_event))),
+        value: LibUtils.money(calculate.tax, currency)
+      })
+    }
+
+    // Platform fee
+    if (calculate.platform !== 0) {
+      items.push({
+        label: esp.lang("bigbang/payment_detail", "fee_apps"),
+        value: LibUtils.money(calculate.platform, currency),
+        sublabel: (fee_platform?.fee_platform_type !== "NOMINAL") ? "(" + fee_platform?.fee_platform_amount + "%)" : ""
+      });
+    }
+
+    //potongan sebelumnya
+    if (dataTicket?.previous_total && dataTicket?.previous_total > 0) {
+      items.push({
+        label: esp.lang("bigbang/payment_detail_ticket", "previous_total"),
+        value: "-" + LibUtils.money(dataTicket?.previous_total, currency),
+      })
+    }
+
+    // Admin bank
+    items.push({
+      label: esp.lang("bigbang/payment_detail", "admin_fee"),
+      sublabel: esp.modProp("bigbang/payment_detail_ticket").processAdminBank(chargePercent, charge, currency),
+      caption: esp.lang("bigbang/payment_detail", "info"),
+      value: LibUtils.money(_charge_total, currency),
+    })
+
+    return items
+  }, [charge, chargePercent, _charge_total, dataTicket, calculate, price, qty])
 
   return (
     <View style={{ flex: 1, backgroundColor: '#fff' }}>
@@ -144,32 +218,20 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
         if (currentYPosition >= (LibStyle.height * 0.3)) {
           if (oldPosition == 0) {
             scrollYRef.current = nativeEvent.contentOffset.y
-            BigbangPayment_detailProperty.stateShow.set(false)
+            BigbangPayment_detail_ticketProperty.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} />
+          <BigbangPayment_detail_ticket
+            product_title={esp.lang("event/order_detail_upgrade_payment", "upgrade_to", dataTicket?.price_name, selectedTicket?.selected_ticket?.price_name_to)}
+            product_subtitle={dataTicket?.event_title}
+            product_price={LibUtils.money(_amountTotal - (dataTicket?.previous_total || 0), currency)}
+            itemData={itemData}
+            isFree={calculate.subtotal == 0 && calculate.discount == 0} //tiket gratis
+          />
         </View>
 
 
@@ -186,7 +248,6 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
               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)
           }}

package/event/order_detail_visitor.tsx

@@ -150,19 +150,22 @@ export default function m(props: EventOrder_detail_visitorProps): any {
                             }
                           </View>
                         </View>
-                        <View style={{ alignContent: 'center', alignItems: 'center' }}>
-                          {
-                            item.hasOwnProperty('seat_name') && item?.seat_name != "" && item?.seat_name?.includes('#') ?
-                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
-                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}> {front} </Text>
-                                <Text allowFontScaling={false} style={{ marginLeft: 3, fontWeight: 'bold', fontSize: 16, color: '#000', }}> {end} </Text>
-                              </View>
-                              :
-                              <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
-                                <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: "#000" }}>{item?.seat_name}</Text>
-                              </View>
-                          }
-                        </View>
+                        {
+                          item.hasOwnProperty('seat_name') && item?.seat_name != "" &&
+                          <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                            {
+                              item?.seat_name?.includes('#') ?
+                                <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                                  <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}> {front} </Text>
+                                  <Text allowFontScaling={false} style={{ marginLeft: 3, fontWeight: 'bold', fontSize: 16, color: '#000', }}> {end} </Text>
+                                </View>
+                                :
+                                <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                                  <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: "#000" }}>{item?.seat_name}</Text>
+                                </View>
+                            }
+                          </View>
+                        }
                       </View>
                     )
                   })

package/event/step.tsx

@@ -19,7 +19,7 @@ export default function m(props: EventStepProps): any {
   return (
     <VIEW
       onPress={() => { if (urls && urls.length > 0) Linking.openURL(urls[0]) }}
-      style={{ flexDirection: 'row', marginLeft: 10, paddingRight: 25, paddingBottom: 10 }}>
+      style={{ flexDirection: 'row', marginLeft: 15, paddingRight: 25, paddingBottom: 10 }}>
       <View style={{ marginRight: 15, marginTop: 3, borderRadius: 15, width: 14, height: 14, backgroundColor: "#f5e71e", borderStyle: "solid", borderWidth: 2, borderColor: "#70472b" }} />
       <View style={{ flex: 1 }} >
         <RenderHtml contentWidth={LibStyle.width} source={{ html: props?.text?.trim?.() }} />