esoftplay-event 0.0.2 → 0.0.3

package/event/order_detail_upgrade.tsx

@@ -6,18 +6,19 @@ import { useEffect } from 'react';
 
 import { applyStyle } from 'esoftplay';
 import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventCheckout } from 'esoftplay/cache/event/checkout/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 +29,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() {
@@ -56,6 +58,70 @@ 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_to: item?.is_remainer == 0 ? (Number(item?.amount_difference) / Number(dataTicket?.qty_upgrade)) : item?.price_to, //kondisi jika upgrade fixprice
+              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" }}>{"+ "}{item?.is_remainer == "0" ? LibUtils.money(item?.price_difference, item?.currency) : LibUtils.money(item?.amount_difference, item?.currency)}</Text>
+
+          </View>
+        </View>
+      </Pressable>
+    )
+  }
+
   if (!result && !error) {
     const LibLoading = esp.mod("lib/loading")
     return <LibLoading />
@@ -78,6 +144,15 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
     )
   }
 
+  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 }} >
       <EventHeader title={esp.lang("event/order_detail_upgrade", "header_title")} subtitle={dataTicket?.event_name} />
@@ -85,8 +160,8 @@ export default function m(props: EventOrder_detail_upgradeProps): any {
         <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' }}>
-          <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>
+          <EventHtmltext allowFontScaling={false} style={{ marginHorizontal: 5, fontSize: 20, color: "#000", textAlign: 'center', fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode={'tail'}>{result?.price_name_from || dataTicket?.price_name}</EventHtmltext>
+          <Text allowFontScaling={false} style={{ color: "#000", marginTop: 10 }}>{LibUtils.money(result?.total_from, result?.currency || 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 })} />
@@ -98,106 +173,81 @@ 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 == 0 ? LibStyle.colorBgGrey : selectedTicket?.selected_ticket?.id == item.id ? LibStyle.colorGreen : "#fff", padding: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center'
-              }}>
-                <EventHtmltext allowFontScaling={false} 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'}>{item?.price_name_to}</EventHtmltext>
-                <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), item?.currency)}</Text>
-
-                {
-                  item.info &&
-                  <Text allowFontScaling={false} style={{ 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,
+        {
+          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={async () => {
+              const selectedTicket = getSelectedTicket()
+
+              if (!selectedTicket) {
+                LibToastProperty.show(esp.lang("event/order_detail_upgrade", "select_ticket"))
+                return
+              }
+
+              let seatData: any = {}
+              if (selectedTicket?.selected_ticket?.use_seat == 1) {
+                if (selectedTicket?.selected_ticket?.seat_autopick != 1) {
+                  const seat = await LibNavigation.navigateForResult('event/seat_map_new', {
+                    url: 'event_seat',
+                    dataTicket: selectedTicket
+                  })
+                  seatData = {
+                    ...seatData,
+                    seat_label: seat?.seat_label
                   }
-                })
-              })
-            } else {
-              LibNavigation.navigate('event/order_detail_upgrade_payment', {
+                }
+              }
+
+              setLoading(true)
+              const config = await EventCheckout().curlPriceConfig(getResult()?.url_price_config, selectedTicket?.selected_ticket?.price_id_to)
+              setLoading(false)
+
+              const args = {
                 dataTicket: {
                   url_payment: result?.url_payment,
-                  price_name: dataTicket?.price_name,
+                  url_upgrade: result?.url_upgrade,
+                  price_name: result?.price_name_from || dataTicket?.price_name,
+                  previous_total: selectedTicket?.selected_ticket?.is_remainer == 0 ? 0 : Number(result?.total_from),//kondisi jika upgrade fixprice
                   booking_id: dataTicket?.id,
                   qty_upgrade: dataTicket?.qty_upgrade,
-                  tax_event: selectedTicket?.tax_event,
+                  tax_event: config?.tax,
                   ondate: dataTicket?.ondate,
                   event_title: dataTicket?.event_name,
                   event_id: dataTicket?.event_id,
-                  // ...dataTicket
                 },
-                selectedTicket: selectedTicket,
+                selectedTicket: {
+                  ...selectedTicket,
+                  ...seatData
+                },
                 fee_platform: {
-                  fee_platform_amount: selectedTicket?.selected_ticket?.fee_platform_amount,
-                  fee_platform_type: selectedTicket?.selected_ticket?.fee_platform_type,
+                  fee_platform_amount: config?.fee_platform_amount,
+                  fee_platform_type: config?.fee_platform_type,
+                },
+                fee_custom: {
+                  fee_custom_label: config?.fee_custom_label,
+                  fee_custom_amount: config?.fee_custom_amount,
+                  fee_custom_type: config?.fee_custom_type,
                 }
-              })
-            }
-          } else {
-            LibToastProperty.show(esp.lang("event/order_detail_upgrade", "select_ticket"))
-            return
-          }
-        }}
-          backgroundColor={selectedTicket ? LibStyle.colorGreen : LibStyle.colorGrey}
-          fontColor='#fff'
-        />
+              }
+
+              LibNavigation.navigate('event/order_detail_upgrade_payment', args)
+
+            }}
+              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_list } from "esoftplay/cache/bigbang/payment_list/import";
+import { BigbangPayment_detail_ticket, BigbangPayment_detail_ticketProperty } from 'esoftplay/cache/bigbang/payment_detail_ticket/import';
+import { BigbangPayment_list, BigbangPayment_listProperty } 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";
 
 
 
@@ -25,10 +28,10 @@ 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, fee_platform }: any = LibNavigation.getArgsAll(props)
-  const [selectedPayment, setSelectedPayment] = useSafeState<any>()
-  const [platformFee, setPlatformFee] = useSafeState<any>(fee_platform)
+  const { dataTicket, selectedTicket, fee_platform, fee_custom }: any = LibNavigation.getArgsAll(props)
+  const [selectedPayment, setSelectedPayment] = BigbangPayment_listProperty.paymentState.useState()
   const [charge, setCharge] = useSafeState<any>(0)
   const [chargePercent, setChargePercent] = useSafeState<any>()
 
@@ -37,7 +40,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")
@@ -56,7 +58,7 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
       }
 
       if (selectedTicket?.selected_ticket?.use_seat == 1) {
-        post.seat_label = selectedTicket?.seat_label.join('|')
+        post.seat_label = selectedTicket?.seat_label?.join('|')
       }
 
       if (selectedTicket?.selected_ticket?.seat_autopick == 1) {
@@ -67,7 +69,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 +112,24 @@ 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 || selectedTicket?.selected_ticket?.amount_difference)
+  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,
+      fee_custom_type: fee_custom?.fee_custom_type || "NONE",
+      fee_custom_amount: fee_custom?.fee_custom_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)
@@ -126,13 +138,96 @@ export default function m(props: EventOrder_detail_upgrade_paymentProps): any {
   let _amountTotal = Number(subtotalWithTaxWithFeePlatform) + Number(_charge_total)
 
   function renderSeatItem(item: any, i: number) {
+    const seat = item.includes("#") ? item.split("#")[1] : item
     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>
+        <Text allowFontScaling={false} adjustsFontSizeToFit style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff", textAlign: "center", textAlignVertical: "center" }}>{seat}</Text>
       </View>
     )
   }
 
+  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) {
+      const firstSeat = name_seat?.[0]
+      const seat = firstSeat.includes("#") ? firstSeat.split("#")[1] : firstSeat
+      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: 28, width: 28, backgroundColor: LibStyle.colorBlue, borderWidth: 1, borderColor: LibStyle.colorBlue, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} adjustsFontSizeToFit style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff", textAlign: "center", textAlignVertical: "center" }}>{seat}</Text>
+            </View>
+            {
+              name_seat && name_seat?.length > 1 &&
+              <LibIcon.MaterialIcons name="more" style={{ transform: [{ rotate: '180deg' }] }} size={37} color={LibStyle.colorBlue} />
+            }
+          </Pressable>
+      })
+    }
+
+    // Gov tax
+    if (dataTicket?.tax_event) {
+      if (Number(dataTicket?.tax_event) !== 0) {
+        items.push({
+          label: esp.lang("bigbang/payment_detail", "tax", String(Number(dataTicket?.tax_event))),
+          value: LibUtils.money(calculate.tax, currency)
+        })
+      } else
+        //@ts-ignore
+        items.push({
+          caption: esp.lang("bigbang/payment_detail", "tax_include")
+        })
+    }
+
+    // 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 + "%)" : ""
+      });
+    }
+
+    // Custom fee
+    if (calculate.custom !== 0) {
+      items.push({
+        label: fee_custom?.fee_custom_label || "Custom Fee",
+        value: LibUtils.money(calculate.custom, currency),
+        sublabel: (fee_custom?.fee_custom_type !== "NOMINAL") ? "(" + fee_custom?.fee_custom_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,38 +239,26 @@ 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}
+          />
         </View>
 
 
         <BigbangPayment_list
           eventId={dataTicket?.event_id}
           url_payment={dataTicket?.url_payment}
+          previous_total={dataTicket?.previous_total || 0}
           onToggleCC={() => { scrollRef.current?.scrollToEnd({ animated: true }) }}
           order_type={14} // upgrade ticekt
           currency={selectedTicket?.selected_ticket?.currency}
@@ -186,7 +269,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

@@ -106,6 +106,8 @@ export default function m(props: EventOrder_detail_visitorProps): any {
     return finalResult
   }
 
+  esp.log(result);
+
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
       <EventHeader title={esp.lang("event/order_detail_visitor", "header")} />
@@ -119,6 +121,7 @@ export default function m(props: EventOrder_detail_visitorProps): any {
               <View style={{ margin: 15, borderRadius: 10, backgroundColor: '#fff', padding: 10 }}>
                 {
                   result?.tickets?.map((item: any, i: number) => {
+                    const [front, end] = item?.seat_name?.split("#") || ["", ""];
                     return (
                       <View key={i} style={{ marginLeft: 14, marginBottom: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
                         <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
@@ -134,11 +137,11 @@ export default function m(props: EventOrder_detail_visitorProps): any {
                               item?.redemption?.length > 0 &&
                               <View style={{ marginTop: 3 }}>
                                 <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#c3c3c3", marginTop: 7 }}>{"Item Redemption"}</Text>
-                                <View style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-around' }}>
+                                <View style={{ marginTop: 5, flexDirection: 'row', flex: 1, flexWrap: 'wrap' }}>
                                   {
                                     item?.redemption?.map((x: any, ii: number) => {
                                       return (
-                                        <View key={ii} style={{ borderRadius: 3, marginRight: 6, backgroundColor: LibStyle.colorPrimary, padding: 5 }}>
+                                        <View key={ii} style={{ marginBottom: 6, borderRadius: 3, marginRight: 6, backgroundColor: LibStyle.colorPrimary, padding: 5 }}>
                                           <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{x}</Text>
                                         </View>
                                       )
@@ -149,14 +152,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 != "" &&
-                            <View style={{ paddingVertical: 5, paddingHorizontal: 7, borderWidth: 1, borderColor: '#000', backgroundColor: '#fff', borderRadius: 5, marginRight: 7 }}>
-                              <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/order_detail_waiting.tsx

@@ -313,7 +313,7 @@ export default function m(props: EventOrder_waitingProps): any {
             result?.status == 0 &&
             <View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', marginTop: 5 }}>
               <Text allowFontScaling={false} style={{ fontWeight: 'bold', flex: 1, flexWrap: 'wrap', fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail_waiting", "expired_payment")}</Text>
-              <EventCountdown_base expired={moment(result?.exp_payment).serverFormat("YYYY-MM-DD HH:mm:ss", result?.timezone)} style={{ flex: 1, marginLeft: 15, fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold" }} />
+              <EventCountdown_base expired={moment(result?.exp_payment).serverFormat("YYYY-MM-DD HH:mm:ss", result?.timezone)} timezone={result?.timezone} style={{ flex: 1, marginLeft: 15, fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold" }} />
             </View>
           }
 
@@ -397,7 +397,7 @@ export default function m(props: EventOrder_waitingProps): any {
           }
 
           {
-            result?.status == 0 && result?.payment?.payment_type != 3 && result?.payment?.payment_type != 4 && result?.payment?.payment_type != 11 && result?.payment?.payment_type != 13 && result?.payment?.payment_type != 14 &&
+            result?.status == 0 && result?.payment?.payment_type != 3 && result?.payment?.payment_type != 4 && result?.payment?.payment_type != 11 && result?.payment?.payment_type != 12 && result?.payment?.payment_type != 13 && result?.payment?.payment_type != 14 &&
             <>
               <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
 
@@ -487,7 +487,7 @@ export default function m(props: EventOrder_waitingProps): any {
         result?.status == 0 && LibUtils.moment(result?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', result?.timezone) >= dateNow &&
         <View style={{ padding: 15, paddingTop: 10, paddingBottom: 10 }}>
           {
-            (result?.payment?.payment_type == 3 || result?.payment?.payment_type == 14) && //khusus cc & FPX
+            (result?.payment?.payment_type == 3 || result?.payment?.payment_type == 12 || result?.payment?.payment_type == 14) && //khusus cc & FPX
             <TouchableOpacity onPress={() => {
               if (result?.hasOwnProperty("has_addition") && result?.has_addition == 1) {
                 LibNavigation.navigateForResult('event/additional', {