esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/pos/cashier_report_detail.tsx

@@ -0,0 +1,88 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+
+export interface PosCashier_report_detailArgs {
+
+}
+export interface PosCashier_report_detailProps {
+
+}
+export default function m(props: PosCashier_report_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (err) => {
+      LibToastProperty.show(err?.msg)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/cashier_report_detail", "header")} />
+
+      <LibScroll>
+        <MarketSection_menu smooth title={esp.lang("cashier/report_detail", "text_section_nominal")} />
+        <LibTextstyle text={LibUtils.money(result?.amount)} textStyle="largeTitle" style={{ textAlign: 'center', paddingVertical: 30, fontWeight: "bold" }} />
+        <MarketSection_menu size="line" />
+        <MarketSection_menu smooth title={esp.lang("cashier/report_detail", "text_section_charge")} />
+        <View style={{ paddingHorizontal: 17, paddingBottom: 10 }} >
+          <LibTextstyle textStyle="body" text={result?.charge > 0 ? ("-" + LibUtils.money(result?.charge)) : esp.lang("pos/cashier_report_detail", "charge")} style={{ color: result?.charge > 0 ? LibStyle.colorRed : '#333' }} />
+        </View>
+        <MarketSection_menu size="line" />
+        <MarketSection_menu smooth title={esp.lang("cashier/report_detail", "text_section_cashier")} />
+        <View style={{ paddingHorizontal: 17, paddingBottom: 10 }} >
+          <LibTextstyle textStyle="body" text={result?.name} />
+        </View>
+        <MarketSection_menu size="line" />
+        <MarketSection_menu smooth title={esp.lang("cashier/report_detail", "text_section_store")} />
+        <View style={{ paddingHorizontal: 17, paddingBottom: 10 }} >
+          <LibTextstyle textStyle="body" text={result?.merchant_name} />
+        </View>
+        <MarketSection_menu size="line" />
+        <MarketSection_menu smooth title={esp.lang("cashier/report_detail", "text_section_id")} />
+        <View style={{ paddingHorizontal: 17, paddingBottom: 10, flexDirection: "row" }} >
+          <View style={{ flex: 1 }} >
+            <LibTextstyle textStyle="body" text={"#" + result?.invoice_code} style={{ color: LibStyle.colorBlue }} />
+            <LibTextstyle textStyle="caption1"
+              style={{ color: "#aaa" }}
+              text={LibUtils.moment(result?.created).serverFormat("dddd, DD MMMM YYYY HH:mm:ss")} />
+          </View>
+          <TouchableOpacity onPress={() => { LibUtils.copyToClipboard(result?.invoice_code).then(() => LibToastProperty.show(esp.lang("cashier/report_detail", "toast_success"))) }} >
+            <LibIcon.AntDesign name="copy1" />
+          </TouchableOpacity>
+        </View>
+        <MarketSection_menu size="line" />
+      </LibScroll>
+
+    </View>
+  )
+}

package/modules/pos/cashier_report_item.tsx

@@ -0,0 +1,96 @@
+// withHooks
+// noPage
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+export interface PosCashier_report_itemData {
+  amount: string,
+  cashier_id: string,
+  charge: string,
+  code: string,
+  created: string,
+  email: string,
+  expired: string,
+  fee: string,
+  fee_type: string,
+  id: string,
+  invoice_code: string,
+  invoice_id: string,
+  merchant_id: string,
+  name: string,
+  notes: string,
+  params: string,
+  payment_id: string,
+  payment_total: string,
+  phone: string,
+  ref_id: string,
+  staff_id: string,
+  status: string,
+  title: string,
+  total: string,
+  updated: string,
+  user_id: string,
+
+}
+
+export interface PosCashier_report_itemProps {
+  data: PosCashier_report_itemData[]
+}
+
+
+function getColor(status: number): string {
+  let colors: any = {
+    "0": LibUtils.hexToRgba(LibStyle.colorRed, 0.4),
+    "1": LibUtils.hexToRgba(LibStyle.colorGreen, 0.4),
+    "2": LibUtils.hexToRgba("#222", 0.4),
+  }
+  return colors[status]
+}
+
+export default function m(props: PosCashier_report_itemProps): any {
+
+  function renderItem(prop: any, i: number) {
+    return (
+      <View key={i} >
+        <TouchableOpacity
+          onPress={() => LibNavigation.navigate("pos/cashier_report_detail", { url: "partner_staff_report_detail?staff_id=" + prop.staff_id + "&id=" + prop.id })}
+          key={i} style={{ flexDirection: "row", paddingHorizontal: 17, paddingTop: 10, paddingBottom: 8 }} >
+          <View style={{ flex: 1 }} >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+              <LibTextstyle textStyle="caption1" text={"#" + prop.invoice_code} style={{ color: LibStyle.colorBlue }} />
+              <View style={{ backgroundColor: getColor(prop.status), paddingVertical: 2, marginLeft: 10, paddingHorizontal: 10, borderRadius: 5 }} >
+                <LibTextstyle textStyle="caption1" text={prop.status_title} style={{ color: 'white' }} />
+              </View>
+            </View>
+            <View style={{ flexDirection: "row", alignItems: "center" }} >
+              <LibIcon.Ionicons name="wallet" size={12} color="#888" />
+              <LibTextstyle textStyle="caption1" text={prop.name} style={{ color: "#888", marginLeft: 5 }} />
+            </View>
+            <LibTextstyle textStyle="caption1" text={LibUtils.moment(prop.created).serverFormat("DD MMMM YYYY H:mm:ss")} style={{ color: "#888" }} />
+          </View>
+          <View style={{ justifyContent: "space-around" }} >
+            <LibTextstyle textStyle="footnote" style={{ fontWeight: "bold" }} text={LibUtils.money(prop.amount)} />
+            <LibTextstyle textStyle="footnote" style={{ color: "#ccc" }} text={esp.lang("cashier/report_item", "text_detail")} />
+          </View>
+        </TouchableOpacity>
+        <MarketSection_menu size="line" key={i + 'x'} />
+      </View>
+    )
+  }
+
+  return (
+    <>
+      {
+        props.data.map(renderItem)
+      }
+    </>
+  )
+}

package/modules/pos/comingsoon.tsx

@@ -0,0 +1,23 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface PosComingsoonArgs {
+
+}
+export interface PosComingsoonProps {
+
+}
+export default function m(props: PosComingsoonProps): any {
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("pos/comingsoon", "coming")} />
+      <ComponentMessage message={esp.lang("pos/comingsoon", "coming_1")} />
+    </View>
+  )
+}

package/modules/pos/index.tsx

@@ -0,0 +1,114 @@
+// withHooks
+
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface PosIndexArgs {
+
+}
+export interface PosIndexProps {
+
+}
+
+export default function m(props: PosIndexProps): any {
+  const widthImg = LibStyle?.width - 30
+  const sliderHeight = widthImg / 3
+  const [result, setResult] = useSafeState<any>()
+  const [badge, setBadge] = useSafeState<number>(0)
+
+  useEffect(() => {
+    new LibCurl('pos_business?active=0', null, (res, msg) => {
+      setBadge(res?.total)
+    }, (err) => {
+      setBadge(0)
+    })
+  }, [])
+
+  function renderItem(item: any, i: number) {
+    return (
+      <Pressable onPress={() => {
+        LibNavigation.navigate('pos/business_detail', { data: item })
+      }} style={{ ...LibStyle.elevation(2), margin: 15, borderRadius: 5, backgroundColor: '#fff', }}>
+        <View style={{ height: sliderHeight, width: widthImg, borderRadius: 5, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, backgroundColor: LibStyle.colorBgGrey }}>
+          <LibPicture source={{ uri: item.image }} style={{ height: sliderHeight, width: widthImg, borderRadius: 5, borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }} />
+          {
+            item?.active == 0 &&
+            <View style={{ padding: 5, borderRadius: 5, backgroundColor: 'rgba(0, 0, 0, 0.3)', position: 'absolute', alignContent: 'center', alignItems: 'center', justifyContent: 'center', top: 10, left: 10, flexDirection: 'row', }}>
+              <LibIcon name='radiobox-marked' color={LibStyle.colorRed} size={14} />
+              <Text allowFontScaling={false} style={{ marginLeft: 7, fontSize: 10, color: "#fff", letterSpacing: 1 }}>{esp.lang("pos/index", "waiting")}</Text>
+            </View>
+          }
+        </View>
+        <View style={{ padding: 10 }}>
+          <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 16, marginBottom: 3, fontWeight: "bold", color: "#4a4a4a", }}>{item?.business_name}</Text>
+          <Text allowFontScaling={false} style={{ fontSize: 12, marginBottom: 5, color: "#9b9b9b", letterSpacing: 1 }}>{item?.type_name}</Text>
+        </View>
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/index", "header")} />
+
+      <LibInfinite
+        // isDebug={1}
+        url='pos_business'
+        renderItem={renderItem}
+        onResult={(res: any) => setResult(res)}
+        ListHeaderComponent={
+          badge != 0 &&
+          <Pressable onPress={() => {
+            LibNavigation.navigate('pos/waiting_payment')
+          }} style={{ padding: 7, margin: 15, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{esp.lang("event/order", "wawit")}</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {
+                badge != 0 &&
+                <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{badge > 99 ? "99+" : LibUtils.number(badge)}</Text>
+                </View>
+              }
+              <LibIcon name='chevron-right' />
+            </View>
+          </Pressable>
+        }
+        errorView={(err: any) => {
+          return (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 10 }}>
+              <LibPicture source={esp.assets('ic_empty.png')} style={{ width: LibStyle.width * 0.8, height: 200, resizeMode: 'contain' }} />
+              <View style={{ width: LibStyle.width - 40, justifyContent: 'center', alignItems: 'center', padding: 15, borderRadius: 10, marginTop: 20 }}>
+                <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, lineHeight: 20, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{err}</Text>
+              </View>
+              <ComponentButton
+                label={esp.lang("pos/index", "btn_register")}
+                style={{ marginTop: 20, width: LibStyle.width / 2, alignSelf: 'center' }}
+                onPress={() => LibNavigation.navigate('pos/pricing')}
+                backgroundColor={LibStyle.colorBlue}
+                fontColor={"#fff"}
+              />
+            </View>
+          )
+        }}
+      />
+      {
+        result &&
+        <Pressable onPress={() => LibNavigation.navigate('pos/pricing')} style={{ position: 'absolute', right: 15, bottom: 15, height: 50, width: 50, borderRadius: 25, backgroundColor: LibStyle.colorBlue, ...LibStyle.elevation(2), alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <LibIcon name='plus' color='#fff' size={24} />
+        </Pressable>
+      }
+    </View>
+  )
+}

package/modules/pos/outlet_list.tsx

@@ -0,0 +1,100 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PosOutlet_listArgs {
+
+}
+export interface PosOutlet_listProps {
+
+}
+export default function m(props: PosOutlet_listProps): any {
+  const { business_data } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useSafeState(undefined)
+  const [error, setError] = useSafeState('')
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl("partner_outlet?business_id=" + business_data.id, null, (res, msg) => {
+      setData(res)
+    }, (err) => {
+      setError(err?.message)
+    }, 1)
+  }
+
+  function makeInitials(name: string) {
+    let words = name.trim().split(' ');
+    if (words.length == 0) {
+      return 'UN';
+    }
+
+    if (words.length == 1) {
+      return words[0][0].toUpperCase();
+    }
+
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  }
+
+  function bgColor(r: any) {
+    let o, e, n, f = [-680876936, -389564586, 606105819, -1044525330, -176418897, 1200080426, -1473231341, -45705983, 1770035416, -1958414417, -42063, -1990404162, 1804603682, -40341101, -1502002290, 1236535329, -165796510, -1069501632, 643717713, -373897302, -701558691, 38016083, -660478335, -405537848, 568446438, -1019803690, -187363961, 1163531501, -1444681467, -51403784, 1735328473, -1926607734, -378558, -2022574463, 1839030562, -35309556, -1530992060, 1272893353, -155497632, -1094730640, 681279174, -358537222, -722521979, 76029189, -640364487, -421815835, 530742520, -995338651, -198630844, 1126891415, -1416354905, -57434055, 1700485571, -1894986606, -1051523, -2054922799, 1873313359, -30611744, -1560198380, 1309151649, -145523070, -1120210379, 718787259, -343485551], t = [o = 1732584193, e = 4023233417, ~o, ~e], c = [], a: any = unescape(encodeURI(r)) + "\u0080", d = a.length;
+    for (r = --d / 4 + 2 | 15, c[--r] = 8 * d; ~d;) c[d >> 2] |= a.charCodeAt(d) << 8 * d--;
+    for (let i = a = 0; i < r; i += 16) {
+      for (d = t; 64 > a; d = [n = d[3], o + ((n = d[0] + [o & e | ~o & n, n & o | ~n & e, o ^ e ^ n, e ^ (o | ~n)][d = a >> 4] + f[a] + ~~c[i | 15 & [a, 5 * a + 1, 3 * a + 5, 7 * a][d]]) << (d = [7, 12, 17, 22, 5, 9, 14, 20, 4, 11, 16, 23, 6, 10, 15, 21][4 * d + a++ % 4]) | n >>> -d), o, e]) o = 0 | d[1],
+        e = d[2];
+      for (a = 4; a;) t[--a] += d[a];
+    }
+
+    for (r = ""; 32 > a;) r += (t[a >> 3] >> 4 * (1 ^ a++) & 15).toString(16);
+    return r;
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/outlet_list", "outlet_lsit")} />
+      <LibList
+        data={data}
+        renderItem={(item: any, i: number) => {
+          return (
+            <TouchableOpacity style={applyStyle({ marginBottom: 4 })} onPress={() => {
+              LibNavigation.navigate('pos/outlet_report', { outletData: item })
+            }} key={i}>
+              <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', alignContent: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, padding: 10, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen, ...LibStyle.elevation(2) })} >
+                <View style={applyStyle({ height: 40, width: 40, borderRadius: 20, backgroundColor: '#' + bgColor(item?.name).toString(16).substr(0, 6), alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+                  <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: '#fff', fontSize: 16 }}>{makeInitials(item?.name)}</Text>
+                </View>
+                <Text allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={applyStyle({ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, marginRight: 10, flex: 1 })} >{item.name}</Text>
+              </View>
+            </TouchableOpacity>
+          )
+        }}
+        ListEmptyComponent={
+          <>
+            {
+              (!data && error == "") ?
+                <View style={{ marginTop: LibStyle.height * 0.3 }}>
+                  <LibLoading />
+                </View>
+                : error != "" ? <ComponentMessage message={error} /> : null
+            }
+          </>
+        }
+      />
+    </View>
+  )
+}

package/modules/pos/outlet_report.tsx

@@ -0,0 +1,25 @@
+// withHooks
+
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { PosCashier_report } from 'esoftplay/cache/pos/cashier_report/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface PosOutlet_reportArgs {
+
+}
+export interface PosOutlet_reportProps {
+
+}
+export default function m(props: PosOutlet_reportProps): any {
+  const { outletData } = LibNavigation.getArgsAll(props)
+  const url = "partner_outlet_report?outlet_id=" + outletData?.id
+
+  return (
+    <View>
+      <PosCashier_report headeTitle={esp.lang("pos/outlet_report", "header_title")} url={url} outletName={outletData?.name} />
+    </View>
+  )
+}

package/modules/pos/payment_detail.tsx

@@ -0,0 +1,125 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface PosPayment_detailArgs {
+
+}
+export interface PosPayment_detailProps {
+  priceTotal: any
+  charge?: any
+  charge_percent?: any
+  title: any,
+  voucher?: any,
+  fee_platform_type?: "NONE" | "PERCENTAGE" | "NOMINAL"
+  fee_platform_amount?: number
+}
+
+export default function m(props: PosPayment_detailProps): any {
+  let { priceTotal, charge, charge_percent, voucher } = props
+
+  function percentageCalculator(amount: any, percent: any) {
+    return (percent * amount) / 100
+  }
+
+  let voucherNominal = voucher?.amount_type == 1 ? Number(voucher?.amount) : percentageCalculator(priceTotal, Number(voucher?.amount || 0))
+  let subtotalWithVoucher = voucherNominal >= priceTotal ? 0 : (priceTotal - voucherNominal)
+  subtotalWithVoucher = subtotalWithVoucher >= (priceTotal) ? (priceTotal) : subtotalWithVoucher //maksimal diskon adalah total price supaya total bayar tidak minus(-)
+
+  let _charge = priceTotal == 0 ? 0 : Number(charge)
+  let _charge_percent = charge_percent == 0 ? 0 : percentageCalculator(subtotalWithVoucher, charge_percent)
+  let _charge_total = charge_percent ? _charge + _charge_percent : _charge
+
+  let _totalPrice = subtotalWithVoucher + _charge_total
+
+  let _fee_platform_type = props?.fee_platform_type
+  let _fee_platform = _fee_platform_type == "NOMINAL" ? props?.fee_platform_amount : _fee_platform_type == "PERCENTAGE" ? percentageCalculator(_totalPrice, props?.fee_platform_amount) : 0
+
+  let totalPrice = _totalPrice + (_fee_platform || 0)
+
+  return (
+    <View key={voucher}>
+      {
+        <View style={{ backgroundColor: '#FFF', marginBottom: 10 }}>
+          <View style={{ justifyContent: 'space-between', flexDirection: 'row', padding: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+            <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("pos/payment_detail", "pricing")}</Text>
+            <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{props?.title}</Text>
+            </View>
+          </View>
+          <View style={{ justifyContent: 'space-between', flexDirection: 'row', padding: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+            <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("pos/payment_detail", "nominal")}</Text>
+            <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{LibUtils.money(props?.priceTotal)}</Text>
+            </View>
+          </View>
+          {
+            props?.voucher && props.voucher?.amount != 0 &&
+            <View testID='voucher_used' style={{ justifyContent: 'space-between', flexDirection: 'row', padding: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("bigbang/payment_detail", "text_discount_voucher")}
+                {props.voucher?.amount_type == 1 ?
+                  " (" + LibUtils.money(props.voucher?.amount) + ")"
+                  :
+                  " (" + String(props.voucher?.amount) + "%)"
+                }
+              </Text>
+              <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>-{LibUtils.money(voucherNominal)}</Text>
+              </View>
+            </View>
+          }
+          <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+            <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', flex: 1 }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("bigbang/payment_detail", "admin_fee")} </Text>
+              {
+                !!charge_percent && Number(charge_percent) != 0 &&
+                <Text style={{ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" }}> {
+                  charge_percent != 0 && charge != 0 ?
+                    "(" + charge_percent + "% + " + LibUtils.money(charge) + ")"
+                    :
+                    charge == 0 ?
+                      "(" + charge_percent + "%)"
+                      :
+                      ""
+                } </Text>
+              }
+            </View>
+            <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{props.priceTotal == 0 ? 0 : LibUtils.money(_charge_total)}</Text>
+          </View>
+          <View style={{ paddingHorizontal: 10, paddingBottom: 10 }}>
+            <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" })}>{esp.lang("bigbang/payment_detail", "info")}</Text>
+          </View>
+
+          {
+            !!props?.fee_platform_type && props?.fee_platform_type != "NONE" &&
+            <View style={{ justifyContent: 'space-between', flexDirection: 'row', padding: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+              <View style={{ alignItems: 'center', flexDirection: 'row', flex: 1 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("bigbang/payment_detail", "fee_apps")}</Text>
+                {
+                  !!props?.fee_platform_type && props?.fee_platform_type == "PERCENTAGE" &&
+                  <Text style={{ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" }}> {"( " + props?.fee_platform_amount + "% )"} </Text>
+                }
+              </View>
+              <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{LibUtils.money(String(_fee_platform))}</Text>
+              </View>
+            </View>
+          }
+          <View style={{ justifyContent: 'space-between', flexDirection: 'row', padding: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+            <View style={{ alignItems: 'center', flexDirection: 'row', flex: 1 }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontFamily: 'ArialBold', fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("pos/payment_detail", "price_total")}</Text>
+            </View>
+            <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontFamily: 'ArialBold', fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{LibUtils.money(totalPrice)}</Text>
+            </View>
+          </View>
+        </View>
+      }
+    </View>
+  )
+}