esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/ppob/transaction_detail.tsx

@@ -0,0 +1,834 @@
+//[moved] add waiting payment if use cc
+// withHooks
+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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { PpobContainer } from 'esoftplay/cache/ppob/container/import';
+import { PpobCountdown } from 'esoftplay/cache/ppob/countdown/import';
+import { PpobElectricityProperty } from 'esoftplay/cache/ppob/electricity/import';
+import { PpobHeader } from 'esoftplay/cache/ppob/header/import';
+import { PpobOrder_status } from 'esoftplay/cache/ppob/order_status/import';
+import { PpobStyle } from 'esoftplay/cache/ppob/style/import';
+import { PpobTransaction_detail_button } from 'esoftplay/cache/ppob/transaction_detail_button/import';
+import { PpobTransaction_detail_row, PpobTransaction_detail_rowProps } from 'esoftplay/cache/ppob/transaction_detail_row/import';
+import { PpobTransaction_loading } from 'esoftplay/cache/ppob/transaction_loading/import';
+import esp from 'esoftplay/esp';
+
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+moment().locale('id')
+
+export interface PpobTransaction_detailProps {
+
+}
+
+interface renderCopy {
+  disabled?: boolean,
+  title: string,
+  value: string,
+  onPressCopy: () => void
+}
+
+export default function m(props: PpobTransaction_detailProps): any {
+  const url = LibNavigation.getArgs(props, 'url')
+  const [result, setResult] = useSafeState<any>()
+  const [periode, setPeriode] = useSafeState<any>('')
+  const [pbbPeriod, setPbbPeriod] = useSafeState('')
+  const [gasPeriod, setGasPeriode] = useSafeState<any>('')
+  const status = PpobOrder_status()
+
+  useEffect(() => {
+    getAll()
+  }, [])
+
+  function getAll() {
+    new LibCurl(url, null,
+      (res, msg) => {
+        setResult(res)
+        const _period = moment(res?.params?.bill_period_start).localeFormat('MMMM YYYY') + ' s.d ' + moment(res?.params?.bill_period_end).localeFormat('MMMM YYYY')
+        if (!!res?.params?.bill_period_start) {
+          setPeriode(moment(res?.params?.bill_period_start).localeFormat('MM-YYYY') == moment(res?.params?.bill_period_end).localeFormat('MM-YYYY') ? moment(res?.params?.bill_period_start).localeFormat('MMMM YYYY') : _period)
+          if (moment(res?.params?.bill_period_start).localeFormat("YYYY") === moment(res?.params?.bill_period_start).localeFormat("YYYY")) {
+            setPbbPeriod(moment(res?.params?.bill_period_start).localeFormat("YYYY"))
+            setGasPeriode(moment(res?.params?.bill_period_start).localeFormat("DD MMM YYYY"))
+          } else {
+            setPbbPeriod(moment(res?.params?.bill_period_start).localeFormat("YYYY") + "s.d" + moment(res?.params?.bill_period_end).localeFormat("YYYY"))
+            setGasPeriode(moment(res?.params?.bill_period_start).localeFormat("DD MMM YYYY") + "s.d" + moment(res?.params?.bill_period_end).localeFormat("DD MMM YYYY"))
+          }
+        }
+
+        // auto cancel saat gagal bayar pakai cc
+        if (res?.status == 0 && res?.params?.error && res?.params?.error != "") {
+          cancelOrder(res?.id)
+        }
+
+      }, (err) => {
+        LibDialog.warning(esp.lang("ppob/transaction_detail", "text_alert"), err?.message)
+      }, 1
+    )
+  }
+
+  function getFirstWord(text: string): any {
+    if (text.indexOf(' ') > -1) {
+      return text.substring(0, text.indexOf(' '))
+    } else {
+      return text
+    }
+  }
+
+  function cancelOrder(orderId: string) {
+    let post = {
+      id: orderId,
+    }
+    LibProgress.show(esp.lang("ppob/transaction_detail", "text_wait"))
+    new LibCurl("ppob/order_detail_cancel", post,
+      (res) => {
+        LibProgress.hide()
+        getAll()
+      }, (msg) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("ppob/transaction_detail", "text_alert_lay"), msg?.message)
+      }
+    )
+  }
+
+  function doPay(next: boolean, orderId: string) {
+    let post = {
+      id: orderId,
+    }
+    LibProgress.show(esp.lang("ppob/transaction_detail", "text_wait"))
+    new LibCurl(next ? "ppob/order_detail_pay" : "ppob/order_detail_cancel", post,
+      (res) => {
+        LibProgress.hide()
+        LibNavigation.reset()
+        LibNavigation.navigate('ppob/menu')
+        LibNavigation.navigate('ppob/transaction')
+        LibNavigation.navigate('ppob/transaction_detail', { url: res })
+      }, (msg) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("ppob/transaction_detail", "text_alert_lay"), msg?.message)
+      }
+    )
+  }
+
+  {/* id 6 pulsa id=1 paket data */ }
+  {/* id 17 = token listrik, 18=tagihan listrik */ }
+  {/* multifinance type_id == "2" && */ }
+  {/* game type_id == "3" */ }
+  {/* pdam type_id == "4"  */ }
+  {/* voucher type_id == "5" */ }
+  {/* bpjs type_id == "7"  */ }
+  {/* mobile international type_id == "8" */ }
+  {/* ewallet type_id == "9" */ }
+  {/* esamsat type_id == "10" */ }
+  {/* telepon postpaid type_id == "11" */ }
+  {/* tv postpaid type_id == "12" */ }
+  {/* emoney type_id == "13" */ }
+  {/* mobile postpaid type_id == "14" */ }
+  {/* pbb type_id == "15"  */ }
+  {/* gas type_id == "16" */ }
+  {/* samolnas type_id == "19" */ }
+  {/* spp type_id == "20" */ }
+
+  const RenderRow = (props: PpobTransaction_detail_rowProps) => {
+    return (
+      <PpobTransaction_detail_row {...props} />
+    )
+  }
+
+  const RenderRowCopy = (props: renderCopy) => {
+    return (
+      <RenderRow copy copyDisable={!!props?.disabled} title={props?.title} value={props?.value} onPressCopy={() => props?.onPressCopy()} />
+    )
+  }
+
+  return (
+    <PpobContainer>
+      <PpobHeader headerText={esp.lang("ppob/transaction_detail", "header_title")} onLeftPress={() => LibNavigation.back()} />
+      {
+        !result ?
+          <PpobTransaction_loading />
+          :
+          <>
+            <LibScroll onRefresh={getAll} >
+              <View style={{ backgroundColor: (result?.status == 0 || result?.status == 3 || result?.status == 4 || result?.status == 5) ? '#E32545' : '#00C4A3', paddingHorizontal: 15, paddingVertical: 8 }} >
+                <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+                  <LibIcon.AntDesign name="copy1" size={18} color="#f1f1f1" />
+                  <Text allowFontScaling={false} style={{ fontSize: 12, color: '#f1f1f1', paddingLeft: 10 }} >{status?.[result?.status]?.text}
+                    {
+                      result?.status == 4 && result?.params?.msg &&
+                      <Text style={{ fontSize: 10 }}>{"\n" + result?.params?.msg}</Text>
+                    }
+                  </Text>
+                </View>
+                {result?.status == 0 &&
+                  <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }} >
+                    <Text allowFontScaling={false} style={{ fontSize: 12, color: '#f1f1f1', flex: 1 }} >{esp.lang("ppob/transaction_detail", "auto_cancel")}</Text>
+                    <PpobCountdown expired={moment(result?.exp_payment).localeFormat('YYYY-MM-DD HH:mm:ss')}
+                      style={{ color: 'white', fontSize: 12, fontWeight: 'bold' }}
+                      containerStyle={{ marginLeft: 10, paddingHorizontal: 15, borderRadius: 20 }} />
+                  </View>
+                }
+              </View>
+
+              <View style={{ backgroundColor: PpobStyle.backgroundColor }}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', padding: 15 }} >
+                  <View style={{ backgroundColor: 'white', width: 40, height: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#f2f2f2' }} >
+                    <LibPicture source={{ uri: result?.image }} style={{ width: 30, height: 30 }} resizeMode="contain" />
+                  </View>
+                  <View style={{ paddingLeft: 10, flex: 1 }}>
+                    <Text allowFontScaling={false} style={{ color: PpobStyle.textColorPrimary }} >{result?.product_title}</Text>
+                  </View>
+                </View>
+                <RenderRow title={esp.lang("ppob/transaction_detail", "text_inv")} value={result?.invoice + "/" + result?.ref_id} />
+                {
+                  // 1:data, 5:pulsa, 6:voucher
+                  result?.customer_code != '1' && (result?.type_id == "1" || result?.type_id == "5" || result?.type_id == "6") &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_phone")} value={result?.customer_code} />
+                }
+                {
+                  result?.type_code == "spp" &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "spp_number")} value={result?.customer_code} />
+                  </>
+                }
+                {
+                  result?.type_code == "multifinance" &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "finance_customer")} value={result?.customer_code} />
+                  </>
+                }
+                {
+                  result?.params?.bill_no && result?.params?.bill_no != "" && result?.params?.bill_no != null && (Number(result?.params?.bill_no) == Number(result?.params?.bill_meter)) ?
+                    <>
+                      {
+                        (result?.params?.bill_no || result.customer_code) &&
+                        <RenderRow title={esp.lang("ppob/transaction_detail", "customer_code")} value={result.status == 2 ? result?.params?.bill_no : result.customer_code} />
+                      }
+                    </>
+                    :
+                    <>
+                      {
+                        //4:pdam, 11:postpaid, 12:tv, 14:mobile_postpaid, 15:pbb, 16:gas,17:token,18:tagihan listrik
+                        result?.customer_code != '1' && (result?.type_id == "4" || result?.type_id == "11" || result?.type_id == "12" || result?.type_id == "14" || result?.type_id == "15" || result?.type_id == "16" || result?.type_id == "17" || result?.type_id == "18") &&
+                        <RenderRow title={
+                          result?.type_id == 14 ? esp.lang("ppob/transaction_detail", "pospaid_number") :
+                            result?.type_code == "pbb" ? esp.lang("ppob/transaction_detail", "pospaid_object_number") :
+                              result?.type_code == "tv_postpaid" ? esp.lang("ppob/transaction_detail", "nomor_bill") :
+                                esp.lang("ppob/transaction_detail", "text_id")} value={result?.customer_code} />
+                      }
+                    </>
+                }
+                {
+                  result?.type_code == "pbb" &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "tax_type")} value={result?.product_title} />
+                    {
+                      result?.params?.bill_ntb &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "ntb")} value={result?.params?.bill_ntb} />
+                    }
+                    {
+                      result?.params?.bill_ntpd &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "ntpd")} value={result?.params?.bill_ntpd} />
+                    }
+                  </>
+                }
+                {
+                  result?.type_code == "electricity_non-taglis" &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "non_tag_number")} value={result?.customer_code} />
+                    {
+                      result?.params?.register_date &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "non_tag_date")} value={result?.params?.register_date} />
+                    }
+                  </>
+                }
+                {
+                  // 7:bpjs,13:bpjs
+                  (result?.type_id == "7" || result?.type_id == "13" || result?.type_code == "bpjs" || result?.type_code == "bpjs_penalty" || result?.type_code == "bpjs_employment") &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_card")} value={result?.customer_code} />
+                }
+                {
+                  //3:game
+                  result?.type_id == "3" &&
+                  <>
+                    {
+                      result?.customer_code != 1 &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "text_game_id")} value={result?.customer_code} />
+                    }
+                  </>
+                }
+                {
+                  result?.params?.voucher != "" && result?.params?.voucher != null && result.status != 3 &&
+                  <RenderRowCopy
+                    title={esp.lang("ppob/transaction_detail", "text_vc")}
+                    value={result?.params?.status != 3 ? result?.params?.voucher : esp.lang("ppob/transaction_detail", "text_process")}
+                    onPressCopy={() => {
+                      LibUtils.copyToClipboard(result?.params?.voucher)
+                        .then(() => { LibToastProperty.show(esp.lang("ppob/transaction_detail", "vc_copied")) })
+                    }} />
+                }
+                {
+                  result?.params?.serial != '' && result?.params?.serial != null &&
+                  <RenderRowCopy
+                    title={esp.lang("ppob/transaction_detail", "text_serial")}
+                    value={result?.params?.serial}
+                    disabled={result?.params == null && typeof result?.params == "string"}
+                    onPressCopy={() => {
+                      LibUtils.copyToClipboard(result?.params?.serial)
+                        .then(() => { LibToastProperty.show(esp.lang("ppob/transaction_detail", "serial_copied")) })
+                    }} />
+                }
+                {
+                  result && result?.status == 2 && result?.tutorial?.length > 0 &&
+                  <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingBottom: 10, alignSelf: 'flex-end', marginRight: 10 }} onPress={() => { LibNavigation.navigate("ppob/tutorial", { data: result?.tutorial }) }} >
+                    <Text allowFontScaling={false} style={{ fontSize: 12, color: "blue" }} >{esp.lang("ppob/transaction_detail", "text_how_to")}</Text>
+                    <LibIcon name="chevron-right" color="blue" />
+                  </TouchableOpacity>
+                }
+
+                {//id 59 mobile legends, id 75 Ragnarok mobile
+                  result?.operator_id != "59" && result?.operator_id != "75" && result?.params?.pin != null && result?.params?.pin != "" &&
+                  <>
+                    <RenderRowCopy
+                      title={esp.lang("ppob/transaction_detail", "pin")}
+                      value={result?.params?.pin || ""}
+                      disabled={result?.params == null && typeof result?.params == "string"}
+                      onPressCopy={() => {
+                        LibUtils.copyToClipboard(result?.params?.pin)
+                          .then(() => { LibToastProperty.show(esp.lang("ppob/transaction_detail", "pin_copied")) })
+                      }} />
+                  </>
+                }
+                {
+                  result?.type_id == "17" && ((result?.params?.bill_no != result?.params?.bill_meter)) &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_meter")} value={result?.status == "2" ? result?.params?.bill_meter : result?.customer_code} />
+                }
+                {
+                  result?.params?.bill_name != '' && result?.params?.bill_name != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_bill_name")} value={result?.params?.bill_name} />
+                }
+                {
+                  (result?.params?.bill_segment != null && result?.params?.bill_power != null) &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_segment")} value={result?.params?.bill_segment + "/" + result?.params?.bill_power} />
+                }
+                {
+                  result?.params?.reference_no != '' && result?.params?.reference_no != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_ref")} value={result?.params?.reference_no} />
+                }
+                {
+                  result?.type_id == "17" && result?.params != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_pay")} value={LibUtils.money(result?.total)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.materai != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_materai")} value={LibUtils.money(result?.params?.materai)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.ppn != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_ppn")} value={LibUtils.money(result?.params?.ppn)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.ppj != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_ppj")} value={LibUtils.money(result?.params?.ppj)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.angsuran != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_angsuran")} value={LibUtils.money(result?.params?.angsuran)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.rptoken != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_strom")} value={LibUtils.money(result?.params?.rptoken)} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.voucher != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_token")} value={result?.params?.voucher} />
+                }
+                {
+                  result?.type_id == "17" && result?.params?.bill_kwh != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_kwh_total")} value={result?.params?.bill_kwh} />
+                }
+                {
+                  result?.type_id == "17" && result?.params != null && result?.params?.status &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_admin")} value={LibUtils.money(result?.total - PpobElectricityProperty.getNumber(result?.product_title))} />
+                }
+                {
+                  result?.params?.bill_address != '' && result?.params?.bill_address != null &&
+                  <>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderTopWidth: 0.5, borderTopColor: PpobStyle.borderColor, padding: 15 }}>
+                      <Text allowFontScaling={false} style={{ flex: 1, fontSize: 12, color: PpobStyle.textColorPrimary }}>{esp.lang("ppob/transaction_detail", "text_address")}</Text>
+                      <Text allowFontScaling={false} style={{ flex: 2, textAlign: 'right', fontSize: 12, color: PpobStyle.textColorPrimary }}>{result?.params?.bill_address}</Text>
+                    </View>
+                  </>
+                }
+                {
+                  result?.type_id == "11" && result?.params?.bill_number && result?.params?.bill_number != "" &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "total")} value={result?.params?.bill_number} />
+                }
+                {
+                  (result.type_code != "pbb" && result.type_code != "gas_postpaid" && result.type_code != "spp")
+                  && periode != '' && periode != 'Invalid Date' &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_periode")} value={periode} />
+                }
+                {
+                  result.type_code == "pbb" && !!result?.params?.bill_period_start &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_periode")} value={pbbPeriod} />
+                }
+                {
+                  result.type_code == "gas_postpaid" && !!result?.params?.bill_period_start &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_periode")} value={gasPeriod} />
+                }
+                {
+                  result.type_code == "spp" && !!result?.params?.bill_period_start &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_periode")} value={moment(result?.bill_period_start).localeFormat('DD MMMM YYYY') === moment(result?.bill_period_end).localeFormat('DD MMMM YYYY') ? moment(result?.bill_period_start).localeFormat('DD MMMM YYYY') : moment(result?.bill_period_start).localeFormat('DD MMMM YYYY') + "s.d" + moment(result?.bill_period_end).localeFormat('DD MMMM YYYY')} />
+                }
+                {
+                  result?.type_code == "spp" && result?.params?.bill_info != '' && result?.params?.bill_info != null &&
+                  <>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderTopWidth: 0.5, borderTopColor: PpobStyle.borderColor, padding: 15 }}>
+                      <Text allowFontScaling={false} style={{ flex: 1, fontSize: 12, color: PpobStyle.textColorPrimary }}>{esp.lang("ppob/transaction_detail", "spp_info")}</Text>
+                      <Text allowFontScaling={false} style={{ flex: 2, textAlign: 'right', fontSize: 12, color: PpobStyle.textColorPrimary }}>{result?.params?.bill_info}</Text>
+                    </View>
+                  </>
+                }
+                {
+                  result?.type_code == "tv_postpaid" &&
+                  <>
+                    {
+                      !!result?.params?.bill_due &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "tv_bill_due")} value={moment(result?.params?.bill_due).localeFormat('DD MMMM YYYY')} />
+                    }
+                  </>
+                }
+                {
+                  result?.type_code == "multifinance" &&
+                  <>
+                    {
+                      !!result?.params?.bill_number &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "finance_number")} value={LibUtils.number(result?.params?.bill_number)} />
+                    }
+                    {
+                      !!result?.params?.bill_penalty &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "finance_penalty")} value={LibUtils.money(result?.params?.bill_penalty)} />
+                    }
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "tempo")} value={moment(result?.params?.bill_due).localeFormat('DD MMMM YYYY')} />
+                  </>
+                }
+                {
+                  result?.type_code == "pbb" &&
+                  <>
+                    {
+                      !!result?.params?.bill_pokok &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "pokok")} value={LibUtils.money(result?.params?.bill_pokok)} />
+                    }
+                    {
+                      !!result?.params?.bill_bunga &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "bunga")} value={LibUtils.money(result?.params?.bill_bunga)} />
+                    }
+                    {
+                      !!result?.params?.bill_surface &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "surface")} value={LibUtils.number(result?.params?.bill_surface) + ' m2'} />
+                    }
+                    {
+                      !!result?.params?.bill_building &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "build")} value={LibUtils.number(result?.params?.bill_building) + ' m2'} />
+                    }
+                    {
+                      !!result?.params?.bill_year &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "year")} value={result?.params?.bill_year} />
+                    }
+                    {
+                      !!result?.params?.bill_year_owed &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "credit_year")} value={result?.params?.bill_year_owed} />
+                    }
+                    {
+                      !!result?.params?.bill_due &&
+                      //check if include space 30 Sep 20XX
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "due")} value={/\s/.test(result?.params?.bill_due) ? result?.params?.bill_due : moment(result?.params?.bill_due).localeFormat('DD MMMM YYYY')} />
+                    }
+                    {
+                      !!result?.params?.bill_denda &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "penalty_total")} value={LibUtils.money(result?.params?.bill_denda)} />
+                    }
+                    {
+                      !!result?.params?.bill_sanksi &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "sanksi")} value={LibUtils.money(result?.params?.bill_sanksi)} />
+                    }
+                    {
+                      !!result?.params?.bill_discount &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "discount")} value={LibUtils.money(result?.params?.bill_discount)} />
+                    }
+                    {
+                      !!result?.params?.bill_validation_code &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "validation")} value={result?.params?.bill_validation_code} />
+                    }
+                  </>
+                }
+                {
+                  result?.params?.bill_branch != '' && result?.params?.bill_branch != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "bpjs_branch")} value={result?.params?.bill_branch} />
+                }
+                {
+                  result?.params?.bill_branch_name != '' && result?.params?.bill_branch_name != null &&
+                  <RenderRow title={result?.type_code == "bpjs_employment" ? esp.lang("ppob/transaction_detail", "branch") : result?.type_code == "spp" ? esp.lang("ppob/transaction_detail", "class") : result?.type_code == "bpjs" ? esp.lang("ppob/transaction_detail", "branch_name") : esp.lang("ppob/transaction_detail", "distric")} value={result?.params?.bill_branch_name} />
+                }
+                {
+                  result?.params?.bill_family &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "total_family")} value={LibUtils.number(result?.params?.bill_family)} />
+                }
+                {
+                  result?.type_code == "bpjs_employment" && result?.params?.['bill_bpjs-jht'] &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "jht")} value={LibUtils.money(result?.params?.['bill_bpjs-jht'])} />
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "jkk")} value={LibUtils.money(result?.params?.['bill_bpjs-jkk'])} />
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "jkm")} value={LibUtils.money(result?.params?.['bill_bpjs-jkm'])} />
+                  </>
+                }
+                {
+                  result?.type_code == "bpjs_employment" &&
+                  <>
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "efective")} value={moment(result?.params?.['bill_bpjs-date_eff']).localeFormat("DD-MM-YYYY")} />
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "end")} value={moment(result?.params?.['bill_bpjs-date_end']).localeFormat("DD-MM-YYYY")} />
+                  </>
+                }
+                {
+                  result?.type_code == "bpjs_penalty" &&
+                  <>
+                    {
+                      result?.params?.bill_no && result?.params?.bill_no != "" &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "penalty")} value={result?.params?.bill_no} />
+                    }
+                    {
+                      result?.params?.bill_branch && result?.params?.bill_branch != "" &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "code")} value={result?.params?.bill_branch} />
+                    }
+                    {
+                      result?.params?.bill_info && result?.params?.bill_info != "" &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "bill_type")} value={result?.params?.bill_info} />
+                    }
+                  </>
+                }
+                {
+                  (result?.type_code == "bpjs" || result?.type_code == "bpjs_penalty" || result?.type_code == "bpjs_employment") && result?.params?.bill_paid && result?.params?.bill_paid != "" &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "date_paid")} value={result?.params?.bill_paid} />
+                }
+                {
+                  result?.params?.bill_meter_usage != '' && result?.params?.bill_meter_usage != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "total_usage")} value={result?.params?.bill_meter_usage.includes("m3") ? result?.params?.bill_meter_usage : LibUtils.number(result?.params?.bill_meter_usage) + " m3"} />
+                }
+                {
+                  result?.params?.bill_detail?.length > 0 &&
+                  <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderTopWidth: 0.5, borderTopColor: PpobStyle.borderColor, padding: 15 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 12, color: PpobStyle.textColorPrimary }}>{esp.lang("ppob/transaction_detail", "use_detail")}</Text>
+                    <Pressable onPress={() => {
+                      LibNavigation.navigate('ppob/bill_usage', { result: result?.params })
+                    }}>
+                      <Text allowFontScaling={false} style={{ fontSize: 12, color: "blue" }}>{esp.lang("ppob/transaction_detail", "detail")}</Text>
+                    </Pressable>
+                  </View>
+                }
+                {
+                  result?.params?.bill_meter_start != '' && result?.params?.bill_meter_start != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_start")} value={result?.params?.bill_meter_start} />
+                }
+                {
+                  result?.params?.bill_meter_end != '' && result?.params?.bill_meter_end != null &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_end")} value={result?.params?.bill_meter_end} />
+                }
+                {
+                  (result?.type_id == 6 || result?.type_id == 1) &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "text_price")} value={LibUtils.money((Number(result?.price) + Number(result?.markup)))} valueStyle={{ color: '#EA5668' }} />
+                }
+
+                {
+                  result?.product_code == "pdam-dki-aetra-new" &&
+                  <>
+                    {
+                      result?.params?.bill_bill &&
+                      <RenderRow title={esp.lang("ppob/transaction_detail", "bill")} value={LibUtils.money(result?.params?.bill_bill)} />
+                    }
+                    <RenderRow title={esp.lang("ppob/transaction_detail", "bill_total")} value={LibUtils.money(result?.params?.bill_total)} />
+                  </>
+                }
+
+                {
+                  result?.params?.bill_penalty &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "bill_penalty")} value={LibUtils.money(result?.params?.bill_penalty)} />
+                }
+                {result?.params?.bill_standmeter &&
+                  < RenderRow title={esp.lang("ppob/transaction_detail", "stand_meter")} value={result?.params?.bill_standmeter} />
+                }
+                {result?.params?.bill_fine &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "bill_fine")} value={LibUtils.money(result?.params?.bill_fine)} />
+                }
+                {result?.params?.bill_due && result?.type_code != "pbb" &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "bill_due")} value={result?.params?.bill_due} />
+                }
+                {result?.params?.bill_this_month &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "bill_month")} value={LibUtils.money(result?.params?.bill_this_month)} />
+                }
+                {result?.params?.bill_open_close_fee &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "admin_open")} value={LibUtils.money(result?.params?.bill_open_close_fee)} />
+                }
+                {result?.params?.bill_retribution &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "retribusi")} value={LibUtils.money(result?.params?.bill_retribution)} />
+                }
+                {result?.params?.bill_fare_class &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "golongan")} value={result?.params?.bill_fare_class} />
+                }
+                {
+                  result?.params?.bill_period_count &&
+                  <RenderRow title={esp.lang("ppob/transaction_detail", "total_periode")} value={LibUtils.number(result?.params?.bill_period_count)} />
+                }
+
+                <RenderRow title={esp.lang("ppob/transaction_detail", "text_time")} value={moment(result?.created).localeFormat('DD-MM-YYYY HH:mm ')} />
+                {
+                  // listrik prepaid 17 || pospaid 18 || product_code pln-non-taglis
+                  (result?.type_id == "17" || result?.type_id == "18" || result?.product_code == "pln-non-taglis") && result?.params?.bill_info != null &&
+                  <View style={{ flexDirection: 'row', alignItems: 'center', borderTopWidth: 0.5, borderTopColor: PpobStyle.borderColor, padding: 15 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 12, color: PpobStyle.textColorPrimary, textAlign: 'center' }}>{result?.params?.bill_info}</Text>
+                  </View>
+                }
+              </View>
+              {
+                result?.status == "1" && result?.params == null &&
+                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderWidth: 1, borderRadius: 5, padding: 10, alignItems: 'center', justifyContent: 'center', marginHorizontal: 15, marginVertical: 10 }} >
+                  <LibIcon name='check-circle-outline' />
+                  <Text allowFontScaling={false} style={{ paddingLeft: 5, fontSize: 14 }} >{esp.lang("ppob/transaction_detail", "order_wait")}</Text>
+                </View>
+              }
+              <View style={{ backgroundColor: PpobStyle.backgroundColor, marginTop: 10 }}>
+                <View style={{ flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 15, alignItems: 'center', borderBottomWidth: 0.5, borderBottomColor: PpobStyle.borderColor }} >
+                  <View style={{ width: 18, height: 18, borderRadius: 9, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderWidth: 1.5, borderColor: '#EA5668' }}>
+                    <LibIcon name="currency-usd" size={14} color="#EA5668" />
+                  </View>
+                  <Text allowFontScaling={false} style={{ fontSize: 12, paddingLeft: 5, color: PpobStyle.textColorPrimary }} >{esp.lang("ppob/transaction_detail", "pay_info")}</Text>
+                </View>
+                <RenderRow
+                  containerStyle={{ padding: 0, paddingHorizontal: 15, paddingTop: 10, paddingBottom: 5 }}
+                  title={esp.lang("ppob/transaction_detail", "pay_price")}
+                  value={result?.type_id == "17" ? LibUtils.money(PpobElectricityProperty.getNumber(result?.product_title)) : LibUtils.money((Number(result?.price) + Number(result?.markup)))} />
+                <RenderRow
+                  borderLess
+                  containerStyle={{ padding: 0, paddingHorizontal: 15, paddingTop: 5, paddingBottom: 5 }}
+                  title={esp.lang("ppob/transaction_detail", "pay_fee")}
+                  value={
+                    result?.type_id == "17" ? //listrik token
+                      LibUtils.money(result?.total - PpobElectricityProperty.getNumber(result?.product_title))
+                      :
+                      result?.type_id == "14" ?
+                        LibUtils.money(Number(result?.total || 0) - Number(result.price || 0))
+                        :
+                        LibUtils.money(result?.fee)
+                  }
+                />
+                {
+                  result?.fee_payment && result?.fee_payment != 0 && result?.type_id != "17" &&
+                  <RenderRow
+                    borderLess
+                    containerStyle={{ padding: 0, paddingHorizontal: 15, paddingTop: 5, paddingBottom: 5 }}
+                    title={esp.lang("ppob/transaction_detail", "pay_charge")}
+                    value={LibUtils.money(result?.fee_payment)}
+                  />
+                }
+                <RenderRow
+                  borderLess
+                  containerStyle={{ padding: 0, paddingHorizontal: 15, paddingTop: 5, paddingBottom: 10 }}
+                  title={esp.lang("ppob/transaction_detail", "pay_total")}
+                  value={LibUtils.money(result?.total)}
+                />
+
+                {
+                  result?.cashback != "0" &&
+                  <RenderRow
+                    borderLess
+                    containerStyle={{ padding: 0, paddingHorizontal: 15, paddingBottom: 15 }}
+                    title={esp.lang("ppob/transaction_detail", "cashback")}
+                    value={LibUtils.money(result?.cashback)}
+                  />
+                }
+              </View>
+
+              <View style={{ backgroundColor: PpobStyle.backgroundColor, marginTop: 10, marginBottom: 10 }}>
+                <RenderRow
+                  borderLess
+                  title={esp.lang("ppob/transaction_detail", "pay_method")}
+                  value={result?.payment_title}
+                />
+                {
+                  result?.params?.error && result?.params?.error != "" &&
+                  <View style={{ marginHorizontal: 15, backgroundColor: LibUtils.hexToRgba("#dc143c", 0.1) }}>
+                    <View style={{ height: 3, backgroundColor: "#dc143c" }} />
+                    <View style={{ padding: 10, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon name='information-outline' size={18} />
+                      <Text allowFontScaling={false} style={{ marginHorizontal: 10, fontSize: 12, lineHeight: 14, letterSpacing: 0.5, }}>{result?.params?.error}</Text>
+                    </View>
+                  </View>
+                }
+              </View>
+
+
+              {
+                result?.status == 0 && result?.payment_id == 2 &&
+                <>
+                  <PpobTransaction_detail_button
+                    title={esp.lang("ppob/transaction_detail", "btn_pay")}
+                    onPress={() => {
+                      LibDialog.warningConfirm(esp.lang("ppob/transaction_detail", "alert_pay_title"), esp.lang("ppob/transaction_detail", "alert_pay_msg"), esp.lang("ppob/transaction_detail", "alert_pay_confirm"), () => {
+                        doPay(true, result?.id)
+                      }, esp.lang("ppob/transaction_detail", "alert_pay_cancel"), () => { })
+                    }}
+                  />
+                  <PpobTransaction_detail_button
+                    title={esp.lang("ppob/transaction_detail", "btn_cancel")}
+                    onPress={() => {
+                      LibDialog.warningConfirm(esp.lang("ppob/transaction_detail", "warning_pay_title"), esp.lang("ppob/transaction_detail", "warning_pay_msg"), esp.lang("ppob/transaction_detail", "warning_pay_confirm"), () => {
+                        doPay(false, result?.id)
+                      }, esp.lang("ppob/transaction_detail", "warning_pay_cancel"), () => { })
+                    }}
+                  />
+                </>
+              }
+
+              {
+                result?.status == 0 && result?.payment_id != 3 && result?.params?.expired &&
+                <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingBottom: 10 }} >
+                  <LibTextstyle textStyle={"footnote"} text={result?.params?.va_no ? esp.lang("ppob/transaction_detail", "text_va") : esp.lang("ppob/transaction_detail", "text_no")} style={{ marginTop: 10, color: PpobStyle.textColorPrimary }} />
+                  <View style={{ flexDirection: "row", alignItems: "center", marginTop: 10 }} >
+                    <Text allowFontScaling={false} style={{ flex: 1, fontSize: 20, fontWeight: "bold" }} >{result?.params?.va_no || result?.params?.cvs_no}</Text>
+                    <TouchableOpacity activeOpacity={1} style={{ alignItems: "center", justifyContent: 'center', flexDirection: "row" }}
+                      onPress={() => {
+                        LibUtils.copyToClipboard(result?.params?.va_no || result?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("ppob/transaction_detail", "text_copied")))
+                      }} >
+                      <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
+                      <LibTextstyle textStyle={"footnote"} text={esp.lang("ppob/transaction_detail", "text_copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
+                    </TouchableOpacity>
+                  </View>
+                  <LibTextstyle textStyle={"footnote"} text={esp.lang("ppob/transaction_detail", "text_info_pay")} style={{ marginTop: 10, fontSize: 12, color: PpobStyle.textColorPrimary }} />
+                  <TouchableOpacity onPress={() => { LibNavigation.navigate('ppob/transaction_payment_hint', { data: result }) }} style={{ marginTop: 5 }} >
+                    <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#16a085" }} >{esp.lang("ppob/transaction_detail", "text_tutor")}</Text>
+                  </TouchableOpacity>
+                </View>
+              }
+
+              {
+                result?.status == "2" && (result?.type_id == "18" || result?.type_id == "11" || result?.type_id == "4") &&
+                <>
+                  <PpobTransaction_detail_button
+                    title={esp.lang("ppob/transaction_detail", "text_print_label")}
+                    onPress={() => { LibNavigation.navigate('ppob/receipt', { result: result }) }} />
+                </>
+              }
+
+            </LibScroll>
+
+
+            {
+              //tombol batal untuk metode pembayaran bank / cc
+              result?.status == 0 && result?.payment?.payment_type == 1 && result?.exp_payment > moment().localeFormat("YYYY-MM-DD HH:mm:ss") &&
+              <PpobTransaction_detail_button
+                title={esp.lang("ppob/transaction_detail", "btn_cancel")}
+                onPress={() => {
+                  LibDialog.warningConfirm(esp.lang("ppob/transaction_detail", "warning_pay_title"), esp.lang("ppob/transaction_detail", "warning_pay_msg"), esp.lang("ppob/transaction_detail", "warning_pay_confirm"), () => {
+                    doPay(false, result?.id)
+                  }, esp.lang("ppob/transaction_detail", "warning_pay_cancel"), () => { })
+                }}
+              />
+            }
+
+            {
+              result?.status == 2 &&
+              <>
+                {//reorder
+                  result && result?.hasOwnProperty('reorder') &&
+                  (result?.type_id == 1 || result?.type_id == 3 || result?.type_id == 4 ||
+                    result?.type_id == 5 || result?.type_id == 6 || result?.type_id == 7 ||
+                    result?.type_id == 9 || result?.type_id == 11 || result?.type_id == 12 ||
+                    result?.type_id == 13 || result?.type_id == 14 || result?.type_id == 16 ||
+                    result?.type_id == 17 || result?.type_id == 18) &&
+
+                  <PpobTransaction_detail_button
+                    title={esp.lang("ppob/transaction_detail", "text_reorder")}
+                    onPress={() => {
+                      const detail: any = {
+                        1: {
+                          title: esp.lang("ppob/transaction_detail", "text_data"),
+                          module: 'ppob/data',
+                        },
+                        3: {
+                          title: result?.product_title,
+                          module: 'ppob/game_detail',
+                        },
+                        4: {
+                          title: result?.product_title,
+                          module: 'ppob/water2',
+                        },
+                        5: {
+                          title: getFirstWord(result?.product_title),
+                          module: 'ppob/voucher_detail',
+                        },
+                        6: {
+                          title: esp.lang("ppob/transaction_detail", "text_pulsa"),
+                          module: 'ppob/pulsa',
+                        },
+                        7: {
+                          title: String(result?.product_title).replace(/.?[0-9]/g, ''),
+                          module: 'ppob/bpjs',
+                        },
+                        9: {
+                          title: esp.lang("ppob/transaction_detail", "text_ewallet"),
+                          module: 'ppob/ewallet_detail',
+                        },
+                        11: {
+                          title: esp.lang("ppob/transaction_detail", "text_internet"),
+                          module: 'ppob/internet_payment',
+                        },
+                        12: {
+                          title: result?.product_title,
+                          module: 'ppob/cable_tv_payment',
+                        },
+                        13: {
+                          title: String(result?.product_title).replace(/.?[0-9]/g, ''),
+                          module: 'ppob/emoney_detail',
+                        },
+                        14: {
+                          title: esp.lang("ppob/transaction_detail", "text_postpaid"),
+                          module: 'ppob/postpaid',
+                        },
+                        16: {
+                          title: esp.lang("ppob/transaction_detail", "text_gs"),
+                          module: 'ppob/gas',
+                        },
+                        17: {
+                          title: esp.lang("ppob/transaction_detail", "text_electric"),
+                          module: 'ppob/electricity',
+                        },
+                        18: {
+                          title: esp.lang("ppob/transaction_detail", "text_electric1"),
+                          module: 'ppob/electricity',
+                        },
+                      }
+                      LibNavigation.back(2)
+                      LibNavigation.navigate('ppob/reorder_check', { module: detail?.[result?.type_id]?.module, id: result?.customer_code, url: result?.reorder, title: detail?.[result?.type_id]?.title, image: result?.image, operator_id: result?.operator_id, product_id: result?.product_id })
+                    }}
+                  />
+                }
+              </>
+            }
+
+          </>
+      }
+    </PpobContainer>
+
+  )
+}