esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/invoice/input.tsx

@@ -0,0 +1,513 @@
+// withHooks
+import { BigbangLoading_pageProperty } from 'esoftplay/cache/bigbang/loading_page/import';
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentCoupon } from 'esoftplay/cache/component/coupon/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentPending_trx } from 'esoftplay/cache/component/pending_trx/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketNotice } from 'esoftplay/cache/market/notice/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { ActivityIndicator, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+export interface InvoiceInputProps {
+  navigation: any
+}
+export default function m(props: InvoiceInputProps): any {
+
+  const inputAmount = useRef<LibInput>(null)
+  const data = LibNavigation.getArgs(props, 'url')
+  const is_free = LibNavigation.getArgs(props, 'is_free')
+  const urlCoupon = LibNavigation.getArgs(props, 'urlCoupon')
+  const userData = UserClass.state().get()
+
+  const [cashier, setCashier] = useSafeState<any>()
+  const [merchant, setMerchant] = useSafeState<any>()
+  let [merchant_id, cashier_id, invoice_id] = data && data.split('-')
+  merchant_id = merchant_id.replace("P", "")
+  const [validMinValue, setValidMinValue] = useSafeState(false)
+  const [coupon, setCoupon] = useSafeState<any>()
+  const [totalBill, setTotalBill] = useSafeState<any>(0)
+  const [amount, setAmount] = useSafeState<any>(0)
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+  const [pendingData] = BigbangLoading_pageProperty.state().useState()
+  const [qty, setQty] = useSafeState<number>(1)
+  const [loading, setLoading] = useSafeState(false)
+
+  useEffect(() => {
+    if (invoice_id) {
+      let url = 'merchant_cashier_invoice_member/' + invoice_id
+
+      LibNavigation.replace("invoice/detail", { url: url })
+    } else {
+      loadDataCoupon()
+      loadDataMerchant()
+      loadDataCashier()
+    }
+  }, [])
+
+  function loadDataCoupon() {
+    new LibCurl(urlCoupon, null,
+      (res) => {
+        setCoupon(res)
+      },
+      (msg) => {
+        LibDialog.warning(esp.lang("invoice/input", "failed_merchant"), msg?.message)
+      }, 1)
+  }
+
+  function loadDataMerchant() {
+    new LibCurl('shop/merchant_detail/' + merchant_id, null,
+      (res) => {
+        setMerchant(res)
+      },
+      (msg) => {
+        LibDialog.warning(esp.lang("invoice/input", "failed_merchant"), msg?.message)
+      }, 1)
+  }
+
+  function loadDataCashier() {
+    new LibCurl('user', { cashier_id: cashier_id },
+      (res, msg) => {
+        setCashier(res)
+      },
+      (msg) => {
+        LibDialog.warning(esp.lang("invoice/input", "failed_user"), msg?.message)
+      })
+  }
+
+  function pay(pin: string, isDeals?: boolean, payment_id?: string): void {
+    let post = {}
+    if (isDeals) {
+      post = {
+        sale_id: coupon?.sale_id,
+        trx_id: trxId,
+        sale_price_id: coupon?.sale_price_id,
+        merchant_id: merchant_id,
+        total: LibUtils.numberAbsolute(inputAmount.current!.getText()),
+        pin: pin
+      }
+    } else {
+      post = {
+        amount: LibUtils.numberAbsolute(totalBill),
+        coupon_total: Number(amount) - Number(totalBill),
+        trx_id: trxId,
+        merchant_id: merchant_id,
+        cashier_id: cashier_id,
+        pin: pin || '',
+        payment_id: payment_id,
+        coupon_id: coupon?.id || 0
+      }
+    }
+
+    let url = isDeals ? 'shop/deals_redeem' : 'user_pay'
+    let _url = esp.isDebug('deals') ? url : 'user_pay'
+
+
+    LibNavigation.navigateForResult('bigbang/loading_page', {
+      title: esp.lang("invoice/input", "pay_to", merchant.title),
+      url: _url,
+      post: post,
+      isSecure: 0,
+      amount: LibUtils.numberAbsolute(totalBill),
+      receive_image: merchant?.image,
+      receive_name: merchant?.title,
+      send_image: userData?.image,
+      send_name: userData?.name,
+    }, 660).then((value) => {
+
+      LibNavigation.backToRoot()
+      LibNavigation.push(isDeals ? 'user/transaction_detail' : 'market/payment_offline_detail', {
+        ...value,
+        url: value?.url,
+        title: esp.lang("bigbang/loading_page", "success")
+      })
+    })
+  }
+
+  function checkTotalBill(item: any) {
+    let post = {
+      amount: LibUtils.numberAbsolute(inputAmount.current!.getText()),
+      discount: item?.amount || item?.price
+    }
+
+    // LibProgress.show(esp.lang("invoice/input", "check_bill_wait"))
+    new LibCurl('user_pay_discount', post, (result, msg) => {
+      if (result < 0) {
+        setTotalBill(0)
+      } else {
+        setTotalBill(result)
+      }
+      LibProgress.hide()
+    }, (error) => {
+      LibProgress.hide()
+    })
+  }
+
+  function redeemCoupon() {
+    LibDialog.confirm(esp.lang("invoice/input", "redeem_title"), esp.lang("invoice/input", "redeem_msg"), esp.lang("invoice/input", "redeem_ok"), () => {
+      let post = {
+        trx_id: trxId,
+        merchant_id: merchant_id,
+        cashier_id: cashier_id,
+        qty: qty,
+        coupon_id: coupon?.id
+      }
+
+      setLoading(true)
+      new LibCurl('coupon_redeem', post, (res, msg) => {
+        esp.log({ res, msg });
+        LibDialog.confirm(esp.lang("invoice/input", "res_ok"), msg, esp.lang("invoice/input", "dialog_ok"), () => {
+          LibNavigation.backToRoot()
+          LibNavigation.navigate('market/payment_offline_detail', { url: res?.url })
+        }, "", () => { })
+        setLoading(false)
+      }, (error) => {
+        LibDialog.warning("Oops", error?.message)
+        esp.log({ error });
+        setLoading(false)
+      }, 1)
+    }, esp.lang("invoice/input", "redeem_cancel"), () => { })
+  }
+
+  function add(): void {
+    if (qty != coupon?.total_left) {
+      setQty(qty + 1)
+    }
+  }
+
+  function min(): void {
+    setQty(qty == 1 ? 1 : qty - 1)
+  }
+
+
+  if (invoice_id) {
+    return <View style={{ flex: 1, backgroundColor: '#fff' }} />
+  }
+
+  if (!cashier || !merchant || !data) {
+    return <LibLoading />
+  }
+
+  if (urlCoupon && coupon?.merchant_id != merchant?.id) {
+    LibNavigation.back()
+    LibDialog.warning(esp.lang("invoice/input", "warn_title"), esp.lang("invoice/input", "warn_msg"))
+  }
+
+  if (is_free == 1) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }} >
+        <ComponentHeader title={esp.lang("invoice/input", "header")} subtitle={coupon?.title} />
+        <ScrollView>
+          <View style={{ flexDirection: 'row', margin: 10 }} >
+            <View style={[{ flex: 1, alignItems: 'center', margin: 10, backgroundColor: 'white', borderRadius: 5, padding: 10 }, LibStyle.elevation(2)]} >
+              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 11, color: '#999', textAlign: 'center' }} >{esp.lang("invoice/input", "merchant")}</Text>
+              <LibPicture style={{ height: 50, width: 50, borderRadius: 25, margin: 20 }} source={merchant.image == '' ? esp.assets('icons/ic_no_image_merchant.png') : { uri: merchant.image }} />
+              <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: 'ArialBold', fontSize: 13, color: '#4a4a4a' }} >{(merchant.title)}</Text>
+            </View>
+            <View style={[{ flex: 1, alignItems: 'center', margin: 10, backgroundColor: 'white', borderRadius: 5, padding: 10 }, LibStyle.elevation(2)]}>
+              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 11, color: '#999', textAlign: 'center' }} >{esp.lang("invoice/input", "cashier")}</Text>
+              <LibPicture style={{ height: 50, width: 50, borderRadius: 25, margin: 20 }} source={cashier.image == '' ? esp.assets('icons/ic_no_image_merchant.png') : { uri: cashier.image }} />
+              <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: 'ArialBold', fontSize: 13, color: '#4a4a4a' }} >{(cashier.name)}</Text>
+            </View>
+          </View>
+
+          <ComponentCoupon
+            image={coupon?.image}
+            onPress={() => { }}
+            countTicket={esp.lang("event/order_detail", "finished")}
+            bgBadge="#988F97"
+            amount={coupon?.amount}
+            event_name={coupon?.event_name}
+            view={
+              <View style={{ padding: 10, paddingTop: 0 }}>
+                <Text allowFontScaling={false} ellipsizeMode="tail" style={{ marginBottom: 7, alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1 }}>{coupon?.title}</Text>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="ticket-confirmation" size={20} color={LibStyle.colorRed} />
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <Text allowFontScaling={false} style={{ marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("cashier/list_coupon", "used_coupon")}</Text>
+                      <Text allowFontScaling={false} style={{ marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{coupon?.total_used}</Text>
+                    </View>
+                  </View>
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="ticket-account" size={20} color={LibStyle.colorBlue} />
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <Text allowFontScaling={false} style={{ marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("cashier/list_coupon", "remaining_coupon")}</Text>
+                      <Text allowFontScaling={false} style={{ marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{coupon?.total_left == 0 ? 0 : coupon?.total_left}</Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            }
+
+          />
+        </ScrollView>
+        <View style={{ padding: 10 }} >
+          <View style={{ flexDirection: 'row', marginVertical: 10, alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
+            <ComponentTouchable onPress={min}>
+              <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="minus" color="#e74c3c" />
+              </View>
+            </ComponentTouchable>
+            <View>
+              <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 15, marginRight: 15 }}>{qty}</Text>
+            </View>
+            <ComponentTouchable onPress={() => { add() }}>
+              <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="plus" color="#16a085" />
+              </View>
+            </ComponentTouchable>
+          </View>
+          {
+            loading ?
+              <View style={{ width: LibStyle.width - 30, height: 40, borderRadius: 17, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9, padding: 10, backgroundColor: LibStyle.colorGreen }}>
+                <ActivityIndicator size={50} color="#fff" />
+              </View>
+              :
+              <ComponentButton label={esp.lang("invoice/input", "next")} onPress={redeemCoupon} style={{ backgroundColor: LibStyle.colorGreen }} />
+          }
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }} >
+      <ComponentHeader title={esp.lang("invoice/input", "header_title")} />
+      {
+        Object.values(pendingData).filter((item: any) => item?.order_type == "merchant_offline").length > 0 &&
+        <ComponentPending_trx
+          onPress={() => {
+            LibNavigation.navigate('bigbang/loading_page_list', {
+              order_type: 'merchant_offline'
+            })
+          }}
+          order_type="merchant_offline"
+          title={esp.lang("invoice/input", "pending", String(Object.values(pendingData).filter((item: any) => item?.order_type == "merchant_offline").length))}
+        />
+      }
+      <LibKeyboard_avoid style={{ flex: 1 }} >
+        <LibScroll>
+          <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#121212", marginTop: 15 }}>{esp.lang("invoice/input", "balance")}</Text>
+          <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#121212", marginTop: 4 }}>{LibUtils.money(userData?.saldo, "IDR")}</Text>
+
+          <View style={{ flexDirection: 'row', margin: 10, marginTop: 0 }} >
+            <View style={[{ flex: 1, alignItems: 'center', margin: 10, backgroundColor: 'white', borderRadius: 5, padding: 10 }, LibStyle.elevation(1)]} >
+              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 11, color: '#999', textAlign: 'center' }} >{esp.lang("invoice/input", "merchant")}</Text>
+              <LibPicture style={{ height: 50, width: 50, borderRadius: 25, margin: 20 }} source={merchant.image == '' ? esp.assets('icons/ic_no_image_merchant.png') : { uri: merchant.image }} />
+              <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: 'ArialBold', fontSize: 13, color: '#4a4a4a' }} >{(merchant.title)}</Text>
+            </View>
+            <View style={[{ flex: 1, alignItems: 'center', margin: 10, backgroundColor: 'white', borderRadius: 5, padding: 10 }, LibStyle.elevation(1)]}>
+              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 11, color: '#999', textAlign: 'center' }} >{esp.lang("invoice/input", "cashier")}</Text>
+              <LibPicture style={{ height: 50, width: 50, borderRadius: 25, margin: 20 }} source={cashier.image == '' ? esp.assets('icons/ic_no_image_merchant.png') : { uri: cashier.image }} />
+              <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: 'ArialBold', fontSize: 13, color: '#4a4a4a' }} >{(cashier.name)}</Text>
+            </View>
+          </View>
+
+          <View style={{ marginHorizontal: 10 }}>
+            <Text allowFontScaling={false} style={{ padding: 15, paddingBottom: 0, paddingTop: 0, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("invoice/input", "payment_totla")}</Text>
+            <LibInput
+              ref={inputAmount}
+              label=""
+              maskFrom="end"
+              mask={'###.###.###.###.###.###.###'}
+              placeholder="0"
+              keyboardType="numeric"
+              blurOnSubmit
+              returnKeyType="go"
+              onSubmitEditing={() => {
+                // if (validMinValue) {
+                //   LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                //     if (p) {
+                //       pay(p, !!coupon?.sale_id)
+                //     }
+                //   })
+                // }
+              }}
+              onChangeText={(t) => {
+                if ((inputAmount.current!.getText() == '') || (parseInt(inputAmount.current!.getText()) == 0)) {
+                  setValidMinValue(false)
+                } else {
+                  setValidMinValue(true)
+                  LibUtils.debounce(() => {
+                    setTotalBill(parseInt(inputAmount.current!.getText()))
+                    setAmount(parseInt(inputAmount.current!.getText()))
+                    if (coupon) {
+                      checkTotalBill(coupon)
+                    }
+                  }, 100)
+                }
+              }}
+              style={{ letterSpacing: 0, fontSize: 30, color: LibStyle.colorTextPrimary }} />
+          </View>
+          <Text allowFontScaling={false} style={{ marginLeft: 10, padding: 15, paddingBottom: 0, paddingTop: 0, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("invoice/input", "coupon")}</Text>
+          {
+            coupon ?
+              <>
+                <TouchableOpacity onPress={() => {
+                  if ((inputAmount.current!.getText() == '') || (parseInt(inputAmount.current!.getText()) == 0)) {
+                    LibToastProperty.show(esp.lang("invoice/input", "empty_payment_method"))
+                    inputAmount.current!.focus()
+                    inputAmount.current!.setError(esp.lang("invoice/input", "empty_payment_method"))
+                  } else {
+                    LibNavigation.navigateForResult('cashier/list_coupon', {
+                      total_pay: inputAmount?.current?.getText?.(),
+                      from: 'invoice/input',
+                      merchant_id: merchant_id
+                    }).then((item) => {
+                      setCoupon(item)
+                      if (item) {
+                        checkTotalBill(item)
+                      }
+                    })
+                  }
+                }} >
+                  <View style={[{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 20, marginBottom: 10, marginTop: 10, paddingVertical: 13, paddingHorizontal: 19, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen }, LibStyle.elevation(2)]} >
+                    {
+                      coupon?.amount ?
+                        <View style={{ flex: 1 }}>
+                          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 15, fontWeight: "bold", color: "#4a4a4a" }} >{coupon?.title}</Text>
+                          {
+                            coupon?.description != '' &&
+                            <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a" }} >{coupon?.description}</Text>
+                          }
+                        </View>
+                        :
+                        <View style={{ flex: 1 }}>
+                          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 15, fontWeight: "bold", color: "#4a4a4a" }} >{coupon?.deals_title}</Text>
+                          <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a" }} >{coupon?.price_title} {LibUtils.money(coupon?.price)}</Text>
+                        </View>
+                    }
+                    <View style={{ marginTop: -13, marginBottom: -13, marginRight: -19, borderTopRightRadius: 4, borderBottomRightRadius: 4, width: 50, backgroundColor: LibStyle.colorRed, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                      <ComponentTouchable onPress={() => {
+                        setCoupon(undefined)
+                        setTotalBill(inputAmount.current!.getText())
+                      }}>
+                        <LibIcon name="trash-can-outline" color="#fff" />
+                      </ComponentTouchable>
+                    </View>
+                  </View>
+                </TouchableOpacity>
+                {
+                  // deals lebih besar dari nominal pembayaran
+                  coupon?.price && (Number(coupon?.price) > Number(amount)) &&
+                  <>
+                    <MarketNotice mode='danger' text={esp.lang("invoice/input", "notice_lebih")} />
+                    <MarketNotice mode='danger' text={esp.lang("invoice/input", "notice_sisa")} />
+                  </>
+                }
+              </>
+              :
+              <TouchableOpacity onPress={() => {
+                if ((inputAmount.current!.getText() == '') || (parseInt(inputAmount.current!.getText()) == 0)) {
+                  LibToastProperty.show(esp.lang("invoice/input", "empty_nominal"))
+                  inputAmount.current!.focus()
+                  inputAmount.current!.setError(esp.lang("invoice/input", "empty_payment_method"))
+                } else {
+                  LibNavigation.navigateForResult('cashier/list_coupon', { total_pay: inputAmount?.current?.getText?.(), from: 'invoice/input', merchant_id: merchant_id }).then((item) => {
+                    setCoupon(item)
+                    if (item) {
+                      checkTotalBill(item)
+                    }
+                  })
+                }
+              }} >
+                <View style={[{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 20, marginTop: 10, paddingVertical: 13, paddingHorizontal: 19, marginBottom: 10 }, LibStyle.elevation(2)]} >
+                  <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, flex: 1 }} >{esp.lang("invoice/input", "use_coupon")}</Text>
+                  <LibIcon name="chevron-right" color={"#999"} />
+                </View>
+              </TouchableOpacity>
+          }
+
+        </LibScroll>
+
+        <View style={[{ backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }, LibStyle.elevation(2)]}>
+          <View style={{ margin: 10, flex: 1 }}>
+            <View style={{ flexDirection: 'row' }}>
+              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 12, color: '#4a4a4a' }} >{esp.lang("invoice/input", "total_bill")}</Text>
+              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 13, color: LibStyle.colorBrown }} >{LibUtils.money(amount)}</Text>
+            </View>
+            {
+              coupon &&
+              <View style={{ flexDirection: 'row' }}>
+                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 12, color: '#4a4a4a' }} >{esp.lang("invoice/input", "discount")}</Text>
+                {
+                  coupon?.amount ?
+                    <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 13, color: LibStyle.colorRed }} >{(coupon.amount.includes("%") ? coupon.amount : LibUtils.money(coupon.amount))}</Text>
+                    :
+                    <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 13, color: LibStyle.colorRed }} >{LibUtils.money(coupon?.price)}</Text>
+                }
+              </View>
+            }
+            <View style={{ flexDirection: 'row' }}>
+              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 12, color: '#4a4a4a' }} >{esp.lang("invoice/input", "total_pay")}</Text>
+              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'ArialBold', fontSize: 13, color: LibStyle.colorPrimary }} >{LibUtils.money(totalBill)}</Text>
+            </View>
+            {
+              totalBill > parseInt(userData?.saldo) &&
+              <Text allowFontScaling={false} style={{ fontSize: 11, color: LibStyle.colorRed, marginTop: 4 }} >{esp.lang("invoice/input", "not_enought_saldo")}</Text>
+            }
+          </View>
+          {
+            totalBill > parseInt(userData?.saldo) ?
+              <ComponentTouchable onPress={() => { LibNavigation.navigate('topup/payment') }}>
+                <View style={{ margin: 10, width: 100, height: 35, borderRadius: 3, backgroundColor: LibStyle.colorPrimary, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 13, color: '#fff' }} >{esp.lang("invoice/input", "text_topup")}</Text>
+                </View>
+              </ComponentTouchable>
+              :
+              <ComponentTouchable onPress={() => {
+                if (validMinValue) {
+                  if (coupon?.sale_id) {
+                    LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                      if (p) {
+                        pay(p, !!coupon?.sale_id)
+                      }
+                    })
+                  } else {
+                    if (Number(amount) < Number(coupon?.amount)) {
+                      LibToastProperty.show(esp.lang("invoice/input", "alert"))
+                      return
+                    } else {
+                      LibNavigation.navigateForResult('invoice/payment_list', {
+                        price: LibUtils.numberAbsolute(inputAmount.current!.getText()),
+                        discount: coupon?.amount || 0,
+                      }).then((dt) => {
+                        if (dt) {
+                          pay(dt?.pin, !!coupon?.sale_id, dt?.id)
+                        }
+                      })
+                    }
+                  }
+                }
+              }}>
+                <View style={{ margin: 10, width: 100, height: 35, borderRadius: 3, backgroundColor: validMinValue ? "#6c432c" : LibStyle.colorLightGrey, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 13, color: '#fff' }} >{esp.lang("invoice/input", "btn_pay")}</Text>
+                </View>
+              </ComponentTouchable>
+          }
+        </View>
+      </LibKeyboard_avoid>
+    </View >
+
+  )
+}

package/modules/invoice/payment_list.tsx

@@ -0,0 +1,93 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { BigbangPayment_list } from 'esoftplay/cache/bigbang/payment_list/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, View } from 'react-native';
+
+
+export interface InvoicePayment_listArgs {
+  price: number,
+  id?: number,
+  from?: string,
+  order_id?: number,
+  fee?: number
+  codSupport?: boolean,
+  containPromo?: boolean
+  discount?: number
+}
+export interface InvoicePayment_listProps {
+
+}
+export default function m(props: InvoicePayment_listProps): any {
+  const [bboConfig] = BboConfigProperty.state().useState()
+  const { price, discount } = LibNavigation.getArgsAll(props)
+  const [selectedPayment, setSelectedPayment] = useSafeState<any>()
+  const scrollRef = useRef<ScrollView>(null)
+
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_order_type')
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("invoice/payment_list", "header")} />
+      <View style={applyStyle({ backgroundColor: 'white', marginHorizontal: 17, marginVertical: 10, borderRadius: 6, padding: 12, ...LibStyle.elevation(2) })} >
+        <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between' })} >
+          <LibTextstyle textStyle='callout' text={esp.lang("invoice/payment_list", "nominal")} />
+          <LibTextstyle textStyle='callout' text={LibUtils.money(price)} />
+        </View>
+        {
+          discount != 0 &&
+          <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between' })} >
+            <LibTextstyle textStyle='callout' text={esp.lang("invoice/payment_list", "disc")} />
+            <LibTextstyle textStyle='callout' text={"-" + LibUtils.money(discount)} />
+          </View>
+        }
+        <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between' })} >
+          <LibTextstyle textStyle='callout' text={esp.lang("invoice/payment_list", "charge")} />
+          <LibTextstyle textStyle='callout' text={LibUtils.money(selectedPayment?.charge || 0)} />
+        </View>
+        <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderTopColor: '#ccc', paddingTop: 10, marginTop: 10 })} >
+          <LibTextstyle textStyle='callout' text={esp.lang("market/checkout_payment_method", "payment_total")} />
+          <LibTextstyle textStyle='callout' text={LibUtils.money((Number(price) - Number(discount)) + Number(selectedPayment?.charge || 0))} style={applyStyle({ fontWeight: 'bold' })} />
+        </View>
+      </View>
+      <ScrollView ref={scrollRef}>
+        <BigbangPayment_list
+          onToggleCC={() => {
+            scrollRef.current?.scrollToEnd({ animated: true })
+          }}
+          order_type={bboConfig?.order_type?.payment_offline}
+          onPressPayment={(d) => {
+            setSelectedPayment(d)
+          }}
+          paymentId={selectedPayment?.id}
+          priceTotal={price}
+          supportCod={true}
+        />
+        <View />
+      </ScrollView>
+      <ComponentButton label={esp.lang("invoice/payment_list", "btn_pay")} style={{ marginHorizontal: 15, marginBottom: 10 }} onPress={() => {
+        if (selectedPayment?.type == 4) {
+          LibNavigation.navigateForResult('bigbang/payment_pin', null, 1504).then((p) => {
+            LibNavigation.sendBackResult({ ...selectedPayment, pin: p }, LibNavigation.getResultKey(props))
+          })
+        } else {
+          LibNavigation.sendBackResult(selectedPayment, LibNavigation.getResultKey(props))
+        }
+      }} />
+    </View>
+  )
+}

package/modules/lib/autosync.ts

@@ -0,0 +1,50 @@
+// useLibs
+// noPage
+import { LibCurl } from "esoftplay/cache/lib/curl/import"
+import { useGlobalReturn } from "esoftplay/global"
+import useLazyState from "esoftplay/lazy"
+
+const config = {
+  sync: {
+    url: 'url_sync',
+    post: {},
+    deleteIf: (item: any) => { }
+  }
+}
+
+export interface LibAutosyncProps {
+  state: useGlobalReturn<any>,
+  delay?: number
+}
+const statusType = {
+  0: 'BELUM SYNCRON',
+  1: 'SEDANG SYNCRON',
+  2: 'SELESAI SYNCRON',
+}
+
+export default function m(props: LibAutosyncProps): any {
+  const [status, setStatus] = useLazyState(statusType[0])
+
+  function sync() {
+    if (status == statusType[0]) {
+      setStatus(status[1])
+      const data = props.state.get()
+      if (data.length > 0) {
+        let hasNext = false;
+        if (data.length > 1) {
+          hasNext = true;
+        }
+        new LibCurl(config.sync.url, config.sync.post, (res, msg) => {
+          
+        }, (err) => {
+
+        })
+      }
+    }
+  }
+
+
+
+
+  return null
+}