esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/bigbang/payment_list.tsx

@@ -0,0 +1,706 @@
+// withHooks
+// noPage
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/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 { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCurl_view } from 'esoftplay/cache/lib/curl_view/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import React, { useEffect, useRef } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import WebView from 'react-native-webview';
+
+
+
+export interface BigbangPayment_listProps {
+  onPressPayment: (item: any) => void
+  chargeTotal?: any
+  priceTotal: any
+  paymentId: any
+  // bboPay?: boolean,
+  discount?: any
+  voucher_amount?: number,
+  supportCod?: boolean
+  eventId?: any
+  order_type?: any  //1_Booking_Ticket_2_PPOB_3_Booking_Talent_4_TokoBBO_5_Pembelian_CV_
+  url_payment?: any
+  onToggleCC?: (data?: any) => void
+  currency?: string
+}
+
+
+function isAllowedPayment(order_type: string, allowed_payment_ids: string[]) {
+  return allowed_payment_ids.map((x: any) => String(x.id)).includes(String(order_type))
+}
+
+const stateData = useGlobalState<any>(undefined)
+
+export default function m(props: BigbangPayment_listProps): any {
+  const [mycards, setMycard] = useLazyState<any>([])
+  const user = UserClass.state().useSelector((state: any) => state)
+  const _discount = props.discount || 0
+  const voucherAmount = props.voucher_amount || 0
+  const ccvInput = useRef<LibInput>(null)
+  const [textInput, setTextInput, getTextInput] = useLazyState('')
+  const [selected, setSelected, getSelected] = useSafeState<any>()
+  const [data] = stateData.useState()
+
+  // for installment
+  const [activeTab, setActiveTab] = useSafeState(1)
+  const [urlInstallment, setUrlInstallment] = useSafeState()
+  const [listInstallment, setListInstallment] = useSafeState()
+  const [showShimmer, setShowShimmer] = useSafeState(false)
+  const [counter, setCounter] = useSafeState(1)
+  const [counterRetry, setCounterRetry] = useSafeState(1)
+
+  const [selectedModePay, setSelectedModePay] = useSafeState()
+  const [postInstallment, setPostInstallment, getPostInstallment] = useLazyState<any>()
+
+  let curr = props?.currency ? props?.currency : ''
+
+  const [, setFullPay, getFullPay] = useSafeState({
+    "count": 0,
+    "currency": curr,
+    "installment_amount": props.priceTotal,
+    "fee": 0,
+    "fee_percent": 0
+  })
+
+  useEffect(() => {
+    loadCards()
+    return () => stateData.reset()
+  }, [])
+
+
+  function loadCards() {
+    let post = {
+      event_id: props.eventId
+    }
+    new LibCurl('user_cc', post, (res, msg) => {
+      setMycard(res)()
+    }, (err) => {
+    })
+  }
+
+  let post = {
+    event_id: props.eventId
+  }
+
+  function hideNumber(card: string): string {
+    let hideNum = [];
+    for (let i = 0; i < card.length; i++) {
+      if (i < card.length - 4) {
+        hideNum.push("*");
+      } else {
+        hideNum.push(card[i]);
+      }
+    }
+    const _val = hideNum.join("");
+    const value = _val.match(/.{1,4}/g) || []
+    return value.join(' ')
+  }
+
+  function ccInstallment(card_id?: any, number?: any) {
+    let charge_total = props.chargeTotal
+    let post: any = {
+      amount: charge_total ? props.priceTotal - charge_total : props.priceTotal,
+      currency: curr,
+    }
+
+    if (props.eventId) {
+      post.event_id = props.eventId
+    }
+
+    if (card_id == 0) {
+      post.number = number
+    } else {
+      post.card_id = card_id
+    }
+
+    setShowShimmer(true)
+    new LibCurl('user_cc_installment?fee=1', post, (res, msg) => {
+      let update_amount = LibObject.set(getFullPay(), props.priceTotal)('installment_amount')
+      let update_fee = LibObject.set(update_amount, res?.fee)('fee')
+      let update_fee_percent = LibObject.set(update_fee, res?.fee_percent)('fee_percent')
+      setFullPay(update_fee_percent)
+      props.onPressPayment({ ...selected, card_installment_count: 0, charge: res?.fee, charge_percent: res?.fee_percent, card_cvv: textInput })
+
+      setUrlInstallment(res?.url)
+    }, (err) => {
+      setShowShimmer(false)
+      LibToastProperty?.show(err?.message)
+      if (err?.status_code == "GE042") {
+        props.onPressPayment(undefined)
+        stateData?.reset()
+      }
+    }, 1)
+  }
+
+  useEffect(() => {
+    if (getPostInstallment()?.card_id) {
+      ccInstallment(getPostInstallment()?.card_id)
+      setPostInstallment(undefined)
+    }
+  }, [props.priceTotal, postInstallment?.card_id])
+
+  const viewDialogCVV = (cardNumber: string) => {
+    return (
+      <View style={{ backgroundColor: "white", padding: 15, borderTopLeftRadius: 15, borderTopRightRadius: 15 }}>
+        <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: 'bold', fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" })}>{esp.lang("bigbang/payment_list", "input_cvv")}</Text>
+        <Text allowFontScaling={false} style={applyStyle({ marginTop: 15, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" })}>{esp.lang("bigbang/payment_list", "input_cvv_msg")}</Text>
+        <Text allowFontScaling={false} style={applyStyle({ marginTop: 10, fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" })}>{esp.lang("bigbang/payment_list", "card_number", cardNumber)}</Text>
+        <View style={{ marginVertical: 30 }} >
+          <LibInput
+            autoFocus
+            ref={ccvInput}
+            base
+            mask='###'
+            keyboardType='numeric'
+            secureTextEntry
+            placeholder='000'
+            style={{ fontFamily: 'Arial', textAlign: 'center', fontSize: 30, fontWeight: "bold", color: LibStyle.colorPrimary }}
+            onChangeText={(text) => {
+              if (text.length == 3)
+                setTextInput(text)
+            }}
+          />
+        </View>
+        <ComponentButton label={esp.lang("bigbang/payment_list", "btn_next")}
+          onPress={() => {
+            if (getTextInput().length == 3) {
+              let post = {
+                card_id: getSelected()?.card_id || 0,
+                card_cvv: getTextInput()
+              }
+              setPostInstallment(post)
+              stateData.set({ ...getSelected(), ...post })
+              props.onPressPayment({ ...getSelected(), ...post })
+              LibDialog.hide()
+            } else {
+              LibToastProperty.show("Silahkan masukkan CVV anda dahulu")
+            }
+          }} />
+
+        <TouchableOpacity onPress={() => {
+          LibDialog.hide()
+        }} style={{ position: 'absolute', top: -10, right: -10, padding: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <LibIcon name='close-circle-outline' />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  function renderItemCC(item2: any, i2: number) {
+    let lessThanMinAmount = Number(props.priceTotal) < item2?.minimum_amount
+    return (
+      <View key={i2} style={{ marginBottom: 5 }}>
+        <View>
+          {
+            lessThanMinAmount ?
+              <Pressable onPress={() => {
+                LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item2?.minimum_amount))
+              }} style={applyStyle({ marginTop: 5, borderRadius: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: lessThanMinAmount ? LibStyle.colorBgGrey : "#fff", ...LibStyle.elevation(2) })} >
+                <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' })}>
+                  <View style={applyStyle({ alignContent: 'center', alignItems: 'center', flexDirection: 'row' })}>
+                    <LibPicture source={{ uri: item2.image }} style={applyStyle({ width: 35, height: 35 })} />
+                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{item2.title}</Text>
+                  </View>
+                </View>
+                {
+                  item2.active && item2.active == "0" &&
+                  <Text allowFontScaling={false} style={applyStyle({ marginTop: 4, fontFamily: "Arial", fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item2.info}</Text>
+                }
+              </Pressable>
+              :
+              <LibCollaps
+                show={false}
+                onToggle={(x) => {
+                  if (x) props?.onToggleCC?.()
+                }}
+                header={(show) =>
+                  <View style={applyStyle({ marginTop: 5, borderRadius: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: (item2.id == props.paymentId ? '#f6f6f6' : item2.active == '0' ? '#e6e6e6' : '#FFF'), ...LibStyle.elevation(2) })} >
+                    <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' })}>
+                      <View style={applyStyle({ alignContent: 'center', alignItems: 'center', flexDirection: 'row' })}>
+                        <LibPicture source={{ uri: item2.image }} style={applyStyle({ width: 35, height: 35 })} />
+                        <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{item2.title}</Text>
+                      </View>
+                      <LibIcon name={show ? "chevron-up" : "chevron-down"} size={28} color={"#BDBDBD"} />
+                    </View>
+                    {
+                      item2.active && item2.active == "0" &&
+                      <Text allowFontScaling={false} style={applyStyle({ marginTop: 4, fontFamily: "Arial", fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item2.info}</Text>
+                    }
+                  </View>
+                } >
+                <View style={{ marginHorizontal: 16, backgroundColor: '#fff', borderBottomLeftRadius: 5, borderBottomRightRadius: 5, padding: 12, paddingBottom: 0, ...LibStyle.elevation(2) }}>
+                  {
+                    mycards?.length > 0 && mycards.map((item: any, i: number) => (
+                      <View key={i}>
+                        <Pressable onPress={() => {
+                          if (item.enabled == 0) {
+                            LibDialog.warning("Oops", item.message)
+                          } else {
+                            if (lessThanMinAmount) {
+                              LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item2?.minimum_amount))
+                            } else {
+                              if (data?.card_id != item?.id) {
+                                setTextInput('')
+                                setSelected({ card_id: item.id, ...item, ...item2 })
+                                setSelectedModePay(undefined)
+
+                                LibUtils.debounce(() => {
+                                  LibDialog.custom(viewDialogCVV(item.number))
+                                }, 200)
+
+                              }
+                            }
+                          }
+                        }} style={{ marginBottom: 10 }} >
+
+                          <UseCondition if={item.enabled == 0}
+                            fallback={
+                              <LibGradient
+                                colors={["#FCFA86", "#EEC632", "#FCFA86", "#EEC632"]}
+                                direction='top-right-to-bottom-left'
+                                style={{ backgroundColor: "white", padding: 16, flexDirection: 'row', alignItems: 'center', borderRadius: 10 }} >
+                                {
+                                  Boolean(item?.brand) ?
+                                    <LibPicture source={{ uri: item?.brand?.image }} style={{ height: 30, width: 60, marginRight: 10 }} resizeMode='contain' />
+                                    :
+                                    <LibIcon.SimpleLineIcons name='credit-card' color="#A47920" size={30} style={{ marginRight: 10 }} />
+                                }
+                                <View style={{ flex: 1 }} >
+                                  <Text style={{ color: '#A47920', fontFamily: 'digital', fontSize: 22 }} >{item.number}</Text>
+                                  {
+                                    (item?.card_id == 0 || item?.id == 0) &&
+                                    <Text style={{ color: '#dc3545', fontFamily: 'Arial', fontSize: 12 }} >{esp.lang("bigbang/payment_list", "not_saved")}</Text>
+                                  }
+                                </View>
+                                <LibIcon name={(item2.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "") ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} style={{ opacity: lessThanMinAmount ? 0.3 : 1, color: (item2.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "") ? LibStyle.colorGreen : LibStyle.colorBrown }} size={24} />
+                              </LibGradient>
+                            }
+                          >
+                            <View style={{ backgroundColor: LibStyle.colorBgGrey, padding: 16, flexDirection: 'row', alignItems: 'center', borderRadius: 10 }}>
+                              {
+                                Boolean(item?.brand) ?
+                                  <LibPicture source={{ uri: item?.brand?.image }} style={{ opacity: 0.3, height: 30, width: 60, marginRight: 10 }} resizeMode='contain' />
+                                  :
+                                  <LibIcon.SimpleLineIcons name='credit-card' color="#A47920" size={30} style={{ opacity: 0.3, marginRight: 10 }} />
+                              }
+                              <View style={{ flex: 1 }} >
+                                <Text style={{ opacity: 0.3, color: '#A47920', fontFamily: 'digital', fontSize: 22 }} >{item.number}</Text>
+                                {
+                                  (item?.card_id == 0 || item?.id == 0) &&
+                                  <Text style={{ opacity: 0.3, color: '#dc3545', fontFamily: 'Arial', fontSize: 12 }} >{esp.lang("bigbang/payment_list", "not_saved")}</Text>
+                                }
+                              </View>
+                              <LibIcon name={"checkbox-blank-circle-outline"} style={{ opacity: 0.3, color: LibStyle.colorBrown }} size={24} />
+
+                            </View>
+                          </UseCondition>
+
+                        </Pressable>
+
+                        <UseCondition if={item2.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "" && listInstallment && listInstallment?.result?.length > 0}
+                          fallback={
+                            item2.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "" && showShimmer &&
+                            <View style={{ marginTop: 10, height: 100, flex: 1 }}>
+                              <LibSkeleton>
+                                <View style={{ marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                  <View style={{ width: '45%', height: 15, backgroundColor: 'white' }} />
+                                  <View style={{ width: '45%', height: 15, backgroundColor: 'white' }} />
+                                </View>
+                                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                                  <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                                    <View style={{ height: 20, width: 20, borderRadius: 10, backgroundColor: 'white' }} />
+                                    <View style={{ marginLeft: 10, width: '60%' }}>
+                                      <View style={{ width: '50%', height: 25, backgroundColor: 'white' }} />
+                                      <View style={{ marginTop: 10, width: '35%', height: 10, backgroundColor: 'white' }} />
+                                    </View>
+                                  </View>
+                                  <View style={{ width: '20%', height: 15, backgroundColor: 'white' }} />
+                                </View>
+                              </LibSkeleton>
+                            </View>
+                          } >
+                          <View style={{ padding: 10, paddingTop: 0, marginBottom: 10 }}>
+                            <View style={{ marginBottom: 15, flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                              <TouchableOpacity onPress={() => {
+                                setActiveTab(1)
+                                setSelectedModePay(getFullPay())
+                                props.onPressPayment({ ...data, card_installment_count: 0, charge: getFullPay()?.fee, charge_percent: getFullPay()?.fee_percent })
+                              }} style={{ flex: 1, marginVertical: 10 }}>
+                                <Text allowFontScaling={false} style={{ opacity: activeTab == 1 ? 1 : 0.3, fontWeight: activeTab == 1 ? 'bold' : 'normal', fontSize: 14 }}>{esp.lang("bigbang/payment_list", "full_payment")}</Text>
+                                <View style={{ marginTop: 3, width: 30, height: 3, borderRadius: 3, backgroundColor: activeTab == 1 ? LibStyle.colorPrimary : '#fff' }} />
+                              </TouchableOpacity>
+                              <TouchableOpacity onPress={() => {
+                                setActiveTab(2)
+                                if (listInstallment?.result?.length > 0) {
+                                  let firstIndex = listInstallment?.result?.[0]
+                                  setSelectedModePay(firstIndex)
+                                  props.onPressPayment({ ...data, card_installment_count: firstIndex?.count, card_installment_interval: firstIndex?.interval, charge: firstIndex?.installment_fee, charge_percent: firstIndex?.installment_fee_percent })
+                                }
+                              }} style={{ flex: 1, marginVertical: 10, }}>
+                                <Text allowFontScaling={false} style={{ opacity: activeTab == 2 ? 1 : 0.3, fontWeight: activeTab == 2 ? 'bold' : 'normal', fontSize: 14 }}>{esp.lang("bigbang/payment_list", "installment")}</Text>
+                                <View style={{ marginTop: 3, width: 30, height: 3, borderRadius: 3, backgroundColor: activeTab == 2 ? LibStyle.colorPrimary : '#fff' }} />
+                              </TouchableOpacity>
+                            </View>
+
+                            <UseCondition if={activeTab == 1}
+                              fallback={
+                                listInstallment?.result?.map((it: any, ii: number) => {
+                                  let selected = selectedModePay?.count == it?.count
+                                  return (
+                                    <TouchableOpacity onPress={() => {
+                                      setSelectedModePay(it)
+                                      props.onPressPayment({ ...data, card_installment_count: it?.count, card_installment_interval: it?.interval, charge: it?.installment_fee, charge_percent: it?.installment_fee_percent })
+                                    }} key={ii} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', flex: 1, marginBottom: 5, paddingBottom: 5, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+                                      <View style={{ flex: 1 }}>
+                                        <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: selected ? 'bold' : 'normal' }}>{LibUtils.money(Math.ceil(it.installment_amount), it?.currency)}</Text>
+                                        <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" })}>{it?.interval}</Text>
+                                      </View>
+                                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+                                        <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, fontStyle: "normal", letterSpacing: 0 })}>{it?.count} x {it.interval}</Text>
+                                        <LibIcon name={selected ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} style={{ marginLeft: 15, color: selected ? LibStyle.colorGreen : LibStyle.colorBrown }} size={20} />
+                                      </View>
+                                    </TouchableOpacity>
+                                  )
+                                })
+                              }>
+                              <TouchableOpacity onPress={() => {
+                                setSelectedModePay(getFullPay())
+                                props.onPressPayment({ ...data, card_installment_count: 0, charge: getFullPay()?.fee, charge_percent: getFullPay()?.fee_percent })
+                              }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', flex: 1, marginBottom: 5, paddingBottom: 5, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+                                <Text allowFontScaling={false} style={{ flex: 1, fontSize: 16, fontWeight: selectedModePay && selectedModePay?.count == 0 ? 'bold' : 'normal' }}>{LibUtils.money(getFullPay()?.installment_amount, props.currency)}</Text>
+                                <LibIcon name={selectedModePay && selectedModePay?.count == 0 ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} style={{ marginLeft: 15, color: selectedModePay && selectedModePay?.count == 0 ? LibStyle.colorGreen : LibStyle.colorBrown }} size={20} />
+                              </TouchableOpacity>
+                            </UseCondition>
+
+                          </View>
+                        </UseCondition>
+
+                      </View>
+                    ))
+                  }
+
+
+                  <ComponentButton label={mycards?.length > 0 ? esp.lang("bigbang/payment_list", "manage_card") : esp.lang("bigbang/payment_list", "add_new")} style={{ opacity: lessThanMinAmount ? 0.3 : 1, marginBottom: 10 }} backgroundColor='white' borderColor={"#6c432c"} fontColor={"#6c432c"} onPress={() => {
+                    if (lessThanMinAmount) {
+                      LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item2?.minimum_amount))
+                    } else {
+                      if (mycards?.length > 0) {
+                        //manage cc
+                        LibNavigation.navigateForResult('payment/cc', { manage: 1 }, 997).then((x) => {
+                          executeResult(x)
+                        })
+                      } else {
+                        //add cc
+                        LibNavigation.navigateForResult('payment/cc_edit', undefined, 997).then((x) => {
+                          executeResult(x)
+                        })
+                      }
+                      const executeResult = (x: any) => {
+                        const post = { ...x, id: x?.card_id || 0, card_id: x?.card_id || 0, number: hideNumber(x.card_number) }
+                        const findZeroIdIndx = mycards?.findIndex((t: any) => t.id == 0)
+                        if (findZeroIdIndx > -1) {
+                          setMycard((d: any) => LibObject.splice(d, findZeroIdIndx, 1, post)())
+                        } else {
+                          setMycard((d: any) => LibObject.push(d, post)())
+                        }
+                        stateData.set({ ...post, ...item2 })
+                        props.onPressPayment({ ...post, ...item2 })
+                        LibUtils.debounce(() => {
+                          ccInstallment(post?.card_id, post?.card_number)
+                        }, 300)
+                      }
+                    }
+                  }} />
+
+                </View>
+              </LibCollaps>
+          }
+        </View>
+      </View>
+    )
+  }
+
+  function renderItemGeneral(item: any, i: number) {
+    let lessThanMinAmount = Number(props.priceTotal) < Number(item?.minimum_amount)
+    let post = {
+      payment_id: Number(item.id),
+      total: Number(props.priceTotal)
+    }
+    return (
+      <View key={i}>
+        <TouchableOpacity activeOpacity={lessThanMinAmount ? 1 : 0} testID='payment_item' disabled={item && item.active == "0"} key={i} onPress={() => {
+          if (lessThanMinAmount) {
+            LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item?.minimum_amount))
+          } else {
+            stateData.reset()
+            props.onPressPayment(item)
+          }
+
+        }} >
+          <View style={applyStyle({ borderRadius: 5, marginVertical: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: lessThanMinAmount ? LibStyle.colorBgGrey : (item.id == props.paymentId ? '#f6f6f6' : item.active == '0' ? '#e6e6e6' : '#FFF'), ...LibStyle.elevation(2) })} >
+            <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' })}>
+              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', flexDirection: 'row' })}>
+                <LibPicture source={{ uri: item.image }} resizeMode='contain' style={applyStyle({ width: 35, height: 35 })} />
+                <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{item.title}</Text>
+              </View>
+              <LibIcon name={item.id == props.paymentId ? "checkbox-marked-circle" : item.id == '3' ? "chevron-right" : "checkbox-blank-circle-outline"} size={20} color={item.id == props.paymentId ? LibStyle.colorGreen : "#BDBDBD"} />
+            </View>
+            {
+              item.active && item.active == "0" &&
+              <Text allowFontScaling={false} style={applyStyle({ marginTop: 4, fontFamily: "Arial", fontSize: 10, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item.info}</Text>
+            }
+          </View>
+        </TouchableOpacity>
+
+        {
+          item.type == "12" && props.paymentId == item.id &&
+          <LibCurl_view
+            key={counter}
+            url={"payment_paylater"}
+            post={post}
+            onSuccess={(res, msg) => {
+              return (
+                <View style={{ margin: 15, marginTop: 0 }}>
+                  <Text allowFontScaling={false} style={{ marginVertical: 10, fontSize: 14, fontWeight: 'bold' }}>{res?.info?.label}</Text>
+                  <View style={{ flexDirection: 'row', borderWidth: 1, borderColor: LibStyle.colorBgGrey, backgroundColor: LibStyle.colorBgGrey, alignContent: 'center', alignItems: 'center' }}>
+                    <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{esp.lang("bigbang/payment_list", "tenor")}</Text>
+                    </View>
+                    <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{esp.lang("bigbang/payment_list", "installment_nominal")}</Text>
+                    </View>
+                    <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{esp.lang("bigbang/payment_list", "nominal_total")}</Text>
+                    </View>
+                  </View>
+                  {
+                    res?.options?.length > 0 && res?.options?.map((item: any, i: number) => {
+                      return (
+                        <View key={i + 1 + "ii"} style={{ backgroundColor: '#f6f6f6', flexDirection: 'row', borderWidth: 1, borderColor: LibStyle.colorBgGrey, alignContent: 'center', alignItems: 'center' }}>
+                          <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{item.total_recurrence} {item.interval}</Text>
+                            <Text allowFontScaling={false} style={{ opacity: 0.7, fontSize: 9 }}>{esp.lang("bigbang/payment_list", "interest_rate") + item.interest_rate + "%"}</Text>
+                          </View>
+                          <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{LibUtils.money(item?.installment_amount)}</Text>
+                          </View>
+                          <View style={{ alignContent: 'center', paddingLeft: 10, justifyContent: 'center', height: 45, borderWidth: 1, borderColor: "#fff", flex: 1 }}>
+                            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 12 }}>{LibUtils.money(item?.total_amount)}</Text>
+                          </View>
+                        </View>
+                      )
+                    })
+                  }
+
+                  <Text allowFontScaling={false} style={{ opacity: 0.7, letterSpacing: 0.5, marginBottom: 0, marginVertical: 10, fontSize: 12 }}>{res?.info?.description}</Text>
+
+                </View>
+              )
+            }}
+            onError={(err) => {
+              return (
+                <ComponentMessage
+                  message={err?.message}
+                  children={
+                    <ComponentButton
+                      label={esp.lang("bigbang/payment_list", "try_again")}
+                      style={{ marginHorizontal: 40 }}
+                      onPress={() => setCounter(counter + 1)}
+                    />
+                  }
+                />
+              )
+            }}
+            onLoading={
+              <LibLoading />
+            }
+          />
+        }
+
+      </View>
+    )
+  }
+
+  function renderItem(item: any, i: number) {
+    if (item.type == '4' && isAllowedPayment(props.order_type, item.allowed_payment)) { /* bbo pay */
+      return (
+        <View key={i}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={applyStyle({ margin: 15, marginBottom: 5, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
+          <TouchableOpacity onPress={() => {
+            stateData.reset()
+            if (Number(user.saldo) >= (Number(props.priceTotal) - Number(props.chargeTotal || 0) - Number(_discount) - Number(voucherAmount))) {
+              props.onPressPayment(item)
+            } else {
+              LibToastProperty.show(esp.lang("bigbang/payment_list", "alert_saldo"))
+            }
+          }} >
+            <View style={applyStyle({ borderRadius: 5, marginVertical: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: user.saldo < ((Number(props.priceTotal) - Number(props.chargeTotal || 0) - Number(_discount) - Number(voucherAmount))) ? '#f6f6f6' : item.id == props.paymentId ? '#f6f6f6' : '#FFF', ...LibStyle.elevation(2) })}>
+              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' })} >
+                <View style={applyStyle({ alignContent: 'center', alignItems: 'center', flexDirection: 'row' })}>
+                  <LibPicture source={{ uri: item.image }} style={applyStyle({ width: 35, height: 35 })} />
+                  <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{item.title}</Text>
+                </View>
+                {
+                  user?.config?.can_topup != 0 && Number(user.saldo) < ((Number(props.priceTotal) - Number(props.chargeTotal || 0) - Number(_discount) - Number(voucherAmount))) &&
+                  <ComponentTouchable onPress={() => {
+                    stateData.reset()
+                    LibNavigation.navigate('topup/payment')
+                  }} >
+                    <View style={applyStyle({ width: 75, height: 20, borderRadius: 11, backgroundColor: '#fff', borderStyle: "solid", borderWidth: 0.5, borderColor: "#04b995", justifyContent: 'center' })}>
+                      <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#04b995" })}>{esp.lang("bigbang/payment", "topup_btn")}</Text>
+                    </View>
+                  </ComponentTouchable>
+                }
+                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{LibUtils.money(user.saldo)}</Text>
+                <LibIcon name={item.id == props.paymentId ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} size={20} color={item.id == props.paymentId ? LibStyle.colorGreen : "#BDBDBD"} />
+              </View>
+              {
+                props.order_type != 5 && props.priceTotal > 0 &&
+                <View style={applyStyle({ borderColor: '#FC9722', backgroundColor: '#FDF1DE', borderWidth: 1, borderRadius: 5, padding: 5, marginTop: 5 })} >
+                  <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{esp.lang("bigbang/payment_list", "text_pay_less")}</Text>
+                </View>
+              }
+            </View>
+          </TouchableOpacity>
+        </View>
+      )
+    } else if (item.type == '9' && user?.is_open_wallet == 1 && isAllowedPayment(props.order_type, item.allowed_payment)) { /* bbo wallet */
+      return (
+        <View key={i}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={applyStyle({ margin: 15, marginBottom: 5, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
+          <TouchableOpacity onPress={() => {
+            stateData.reset()
+            if (Number(user.saldo_wallet) >= (Number(props.priceTotal) - Number(_discount))) {
+              props.onPressPayment(item)
+            } else {
+              LibToastProperty.show(esp.lang("bigbang/payment_list", "alert_saldo"))
+            }
+          }} >
+            <View style={applyStyle({ borderRadius: 5, marginVertical: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: user.saldo < ((Number(props.priceTotal) - Number(_discount))) ? '#f6f6f6' : item.id == props.paymentId ? '#f6f6f6' : '#FFF', ...LibStyle.elevation(2) })}>
+              <View style={applyStyle({ alignContent: 'center', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' })} >
+                <View style={applyStyle({ alignContent: 'center', alignItems: 'center', flexDirection: 'row' })}>
+                  <LibPicture source={{ uri: item.image }} style={applyStyle({ width: 35, height: 35 })} />
+                  <Text allowFontScaling={false} style={applyStyle({ marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{item.title}</Text>
+                </View>
+                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" })}>{LibUtils.money(user.saldo_wallet)}</Text>
+                <LibIcon name={item.id == props.paymentId ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} size={20} color={item.id == props.paymentId ? LibStyle.colorGreen : "#BDBDBD"} />
+              </View>
+            </View>
+          </TouchableOpacity>
+        </View>
+      )
+
+    } else if (item.type == '3' && isAllowedPayment(props.order_type, item.allowed_payment)) { /* cc */
+      return (
+        <View key={i}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={applyStyle({ margin: 15, marginBottom: 5, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
+          {
+            renderItemCC(item, 0)
+          }
+        </View>
+      )
+    } else if (item.type == "1" || item.type == "12" || item.type == "13" && props.priceTotal > 0 && isAllowedPayment(props.order_type, item.allowed_payment)) { /* bank & paylater & ewallet */
+      return (
+        <View key={i}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={applyStyle({ margin: 15, marginBottom: 5, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
+          {
+            item?.list && item?.list?.filter((x: any) => x.publish == 1)?.map(renderItemGeneral)
+          }
+        </View>
+      )
+    } else if (item.type != "5" && props.priceTotal > 0 && isAllowedPayment(props.order_type, item.allowed_payment)) { // selain voucher
+      return (
+        <View key={i}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={applyStyle({ margin: 15, marginBottom: 5, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
+
+          {
+            renderItemGeneral(item, 0)
+          }
+
+        </View>
+      )
+    } else {
+      return null
+    }
+  }
+
+
+  return (
+    <View>
+      <UseCondition if={urlInstallment}>
+        <WebView source={{ uri: urlInstallment }} onMessage={(e) => {
+          setShowShimmer(false)
+          let result = JSON.parse(e.nativeEvent.data)
+          setSelectedModePay(getFullPay())
+          setListInstallment(result);
+        }} style={{ height: 0, width: 0 }} />
+      </UseCondition>
+
+      <LibCurl_view
+        key={counterRetry}
+        url={props.url_payment ? props.url_payment : 'payment?order_type=' + props.order_type}
+        post={props.url_payment?.startsWith("http") ? null : (props.order_type == 1 || props.order_type == 14 ? post : null)}
+        onSuccess={(res, msg) => {
+          let _pay: any = []
+          if (!props.supportCod) {
+            _pay = res?.filter((itm: any) => itm.type != 6)
+          } else {
+            _pay = res
+          }
+
+          return (
+            <View>
+              {
+                LibUtils.checkUndefined(_pay, '0') && _pay?.filter((x: any) => x.publish == 1)?.map(renderItem)
+              }
+            </View>
+          )
+        }}
+        onError={(err) => {
+          return (
+            <ComponentMessage
+              message={err?.message}
+              children={
+                <ComponentButton
+                  label={esp.lang("bigbang/payment_list", "try_again")}
+                  style={{ marginHorizontal: 40 }}
+                  onPress={() => {
+                    setCounterRetry(counterRetry + 1)
+                  }}
+                />
+              }
+            />
+          )
+        }}
+        onLoading={
+          <LibLoading />
+        }
+      />
+
+    </View>
+  )
+}