esoftplay-event 0.0.0-o → 0.0.0-p

package/_templates/payment/list.tsx

@@ -0,0 +1,425 @@
+// withHooks
+import { memo } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentText } from 'esoftplay/cache/component/text/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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PaymentListArgs {
+
+}
+export interface PaymentListProps {
+
+}
+function m(props: PaymentListProps): any {
+  const [payment, setPayment] = useSafeState()
+  const [mycards, setMycard] = useLazyState<any>([])
+
+  useEffect(() => {
+    loadData()
+    loadCards()
+  }, [])
+
+  function loadCards() {
+    new LibCurl('user_cc', null, (res, msg) => {
+      setMycard(res)()
+    }, (err) => {
+    })
+  }
+
+  function loadData(): void {
+    // LibProgress.show(esp.lang("bigbang/payment_list", "progress_wait"))
+    let post = {
+      event_id: "334"
+    }
+    new LibCurl('payment?order_type=1' /* + props.order_type */, /* props.order_type == 1 ? */ post /* : null */, (res) => {
+      // let _pay: any = []
+      // if (!props.supportCod) {
+      //   _pay = res.filter((itm: any) => itm.type != 6)
+      // } else {
+      //   _pay = res
+      // }
+      // LibProgress.hide()
+      setPayment(res.filter((itm: any) => itm.type != 6))
+
+    }, (error) => {
+
+      // LibProgress.hide()
+      // LibNavigation.back()
+      // LibToastProperty.show(error?.message)
+    })
+  }
+
+  let listLength = new Array(10).fill('')
+
+  if (!payment) {
+    return (
+      <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
+        {
+          listLength?.map((item: any, i: number) => {
+            return (
+              <View key={i} style={{ borderBottomWidth: 1, borderBottomColor: LibStyle.colorBrown, padding: 10, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                <View style={{ flexDirection: 'row' }}>
+                  <View style={{ backgroundColor: '#fff', height: 42, width: 42, borderRadius: 3, marginRight: 10 }} />
+                  <View style={{ justifyContent: 'center', alignContent: 'center', width: '60%' }}>
+                    <View style={{ backgroundColor: '#fff', height: 20, width: '70%' }} />
+                  </View>
+                </View>
+                <View style={{ backgroundColor: '#fff', height: 20, width: '7%' }} />
+              </View>
+            )
+          })
+        }
+      </LibSkeleton>
+    )
+  }
+
+  function renderListPayment(item: any, i: number) {
+    if (item.type == '4') { // BBO PAY
+      return (
+        <View key={i}>
+          <ComponentText.Subtitle bold color='#4a4a4a' style={{ margin: 15, marginBottom: 5 }}>{item.title}</ComponentText.Subtitle>
+          <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"))
+            // }
+          }} 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 })} />
+                <ComponentText.Subtitle bold color='#4a4a4a' style={{ marginLeft: 15 }}>{item.title}</ComponentText.Subtitle>
+              </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>
+                } */}
+              <ComponentText.Subtitle bold color='#4a4a4a' style={{ textAlign: 'right' }}>{LibUtils.money("1000000"/* user.saldo */)}</ComponentText.Subtitle>
+              <LibIcon name={/* item.id == props.paymentId ? "checkbox-marked-circle" : */ "checkbox-blank-circle-outline"} size={20} color={/* item.id == props.paymentId ? LibStyle.colorGreen : */ "#BDBDBD"} />
+              {/* {
+                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 style={{ padding: 5, marginTop: 5 }} />
+                } */}
+            </View>
+            <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>
+          </TouchableOpacity>
+        </View>
+      )
+    }
+    else if (item.type == '9')  /* BBO Wallet */ {
+      return (
+        <View key={i}>
+          <ComponentText.Subtitle bold color='#4a4a4a' style={{ margin: 15, marginBottom: 5 }}>{item.title}</ComponentText.Subtitle>
+          <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"))
+            // }
+          }} style={applyStyle({ 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 })} />
+                <ComponentText.Subtitle bold color='#4a4a4a' style={{ marginLeft: 15 }}>{item.title}</ComponentText.Subtitle>
+              </View>
+              <ComponentText.Subtitle bold color='#4a4a4a' style={{ textAlign: 'right' }}>{LibUtils.money("1000000"/* user.saldo */)}</ComponentText.Subtitle>
+              <LibIcon name={/* item.id == props.paymentId ? "checkbox-marked-circle" : */ "checkbox-blank-circle-outline"} size={20} color={/* item.id == props.paymentId ? LibStyle.colorGreen : */ "#BDBDBD"} />
+            </View>
+          </TouchableOpacity>
+        </View>
+      )
+    }
+    else if (item.type == '3') { // Credit Card
+      return (
+        <View key={i} style={{ marginBottom: 10 }}>
+          <ComponentText.Subtitle bold color='#4a4a4a' style={{ margin: 15, marginBottom: 5 }}>{item.title}</ComponentText.Subtitle>
+          {
+            renderItemPayment(item, 0)
+          }
+        </View>
+      )
+    }
+    else {
+      return ( // BANK
+        <View key={i}>
+          {
+            LibUtils.checkUndefined(item, 'list.0') &&
+            <ComponentText.Subtitle bold color='#4a4a4a' style={{ margin: 15, marginBottom: 5 }}>{item.title}</ComponentText.Subtitle>
+          }
+          {
+            item.list && item.list.map(renderItemPayment)
+          }
+        </View>
+      )
+    }
+  }
+
+  function renderItemPayment(item: any, i: number) {
+    return (
+      <View key={i} style={{}}>
+
+        <UseCondition
+          if={item.type == '3'} // view CC
+          fallback={
+            <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)
+              // }
+
+            }} 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 }} style={applyStyle({ width: 35, height: 35 })} />
+                  <ComponentText.Subtitle bold color='#4a4a4a' style={{ marginLeft: 15 }}>{item.title}</ComponentText.Subtitle>
+                </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" &&
+                <ComponentText.Small color={LibStyle.colorRed} style={{ marginTop: 4 }}>{item.info}</ComponentText.Small>
+              }
+            </TouchableOpacity>
+          }
+        >
+          <View>
+            {/* {
+              lessThanMinAmount ?
+                <Pressable onPress={() => {
+                  LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item?.minimum_amount))
+                }} style={applyStyle({ marginTop: 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: 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>
+                  </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>
+                  }
+                </Pressable>
+                : */}
+            <LibCollaps
+              show={false}
+              onToggle={(x) => {
+                // if (x) props?.onToggleCC?.()
+              }}
+              header={(show) =>
+                <View style={applyStyle({ borderRadius: 5, marginTop: 5, marginLeft: 15, marginRight: 15, padding: 7, backgroundColor: (/* 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 }} style={applyStyle({ width: 35, height: 35 })} />
+                      <ComponentText.Subtitle bold color='#4a4a4a' style={{ marginLeft: 15 }}>{item.title}</ComponentText.Subtitle>
+                    </View>
+                    <LibIcon name={show ? "chevron-up" : "chevron-down"} size={28} color={"#BDBDBD"} />
+                  </View>
+                  {
+                    item.active && item.active == "0" &&
+                    <ComponentText.Small color={LibStyle.colorRed} style={{ marginTop: 4 }}>{item.info}</ComponentText.Small>
+                  }
+                </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 (lessThanMinAmount) {
+                        //   LibToastProperty.show(esp.lang("bigbang/payment_list", "min_amount") + LibUtils.money(item?.minimum_amount))
+                        // } else {
+                        //   if (data?.card_id != item?.id) {
+                        //     setTextInput('')
+                        //     setSelected({ card_id: item.id, ...item, ...item })
+                        //     setSelectedModePay(undefined)
+                        //     MarketSlidingupProperty.show()
+                        //   }
+                        // }
+                      }} style={{ marginBottom: 10 }} >
+                        <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={/* (item.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: /* (item.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "") ? LibStyle.colorGreen : */ LibStyle.colorBrown }} size={24} />
+                        </LibGradient>
+                      </Pressable>
+
+                      {/* <UseCondition if={item.id == props.paymentId && data?.card_id == item?.id && data?.card_cvv != "" && listInstallment && listInstallment?.result?.length > 0}
+                        fallback={
+                          item.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(fullPay)
+                              props.onPressPayment({ ...data, card_installment_count: 0 })
+                            }} 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(fullPay)
+                              props.onPressPayment({ ...data, card_installment_count: 0 })
+                            }} 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(fullPay?.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(item?.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, ...item })
+                  //     props.onPressPayment({ ...post, ...item })
+                  //     LibUtils.debounce(() => {
+                  //       ccInstallment(post?.card_id, post?.card_number)
+                  //     }, 300)
+                  //   }
+                  // }
+                }} />
+
+              </View>
+            </LibCollaps>
+            {/* } */}
+          </View>
+        </UseCondition>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{}}>
+      {
+        LibUtils.checkUndefined(payment, '0') && payment.map(renderListPayment)
+      }
+    </View>
+  )
+}
+export default memo(m);

package/_templates/payment/summary.tsx

@@ -0,0 +1,142 @@
+// withHooks
+import { ComponentText } from 'esoftplay/cache/component/text/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/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 { memo } from 'react';
+
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+
+export interface PaymentSummaryArgs {
+
+}
+export interface PaymentSummaryProps {
+
+}
+function m(props: PaymentSummaryProps): any {
+  const totalPrice: any = 10000000
+  const discount = 100000
+  const curr = "IDR"
+  const event_name = "Arcane Alley"
+  const [show, setShow] = /* stateShow.useState() */ useSafeState()
+
+  return (
+    <View>
+      {
+        totalPrice == 0 ?
+          <View style={{ marginTop: 16, marginLeft: 15, marginRight: 15, marginBottom: 5, padding: 10, justifyContent: 'space-between', flexDirection: 'row', borderRadius: 5, backgroundColor: '#fff', ...LibStyle.elevation(2), alignContent: 'center', alignItems: 'center' }}>
+            <View style={{ flex: 1 }}>
+              <ComponentText.Subtitle bold color='#4a4a4a'>{"props.title"}</ComponentText.Subtitle>
+              {
+                event_name &&
+                <ComponentText.Caption color='#4a4a4a'>{event_name}</ComponentText.Caption>
+              }
+            </View>
+            <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+              <View style={{ marginRight: 15, alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                <ComponentText.Subtitle bold> {esp.lang("bigbang/payment_detail", "text_free")} </ComponentText.Subtitle>
+              </View>
+            </View>
+          </View>
+          :
+          <>
+            <Pressable onPress={() => { setShow(show ? false : true) }} style={{ marginTop: 16, marginLeft: 15, marginRight: 15, marginBottom: 5, padding: 10, justifyContent: 'space-between', flexDirection: 'row', borderRadius: 5, backgroundColor: '#fff', ...LibStyle.elevation(2), alignContent: 'center', alignItems: 'center' }}>
+              <View style={{ flex: 1 }}>
+                <ComponentText.Subtitle bold color='#4a4a4a'>{'props.title'}</ComponentText.Subtitle>
+                {
+                  event_name &&
+                  <ComponentText.Caption color='#4a4a4a'>{event_name}</ComponentText.Caption>
+                }
+              </View>
+              <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+                <View style={{ marginRight: 15, alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                  <ComponentText.Subtitle bold> {LibUtils.money(totalPrice, curr)} </ComponentText.Subtitle>
+                </View>
+                <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
+              </View>
+            </Pressable>
+            {
+              show &&
+              <View style={[{ marginLeft: 22, borderBottomLeftRadius: 5, borderBottomRightRadius: 5, marginRight: 22, padding: 7, backgroundColor: '#FFF', marginBottom: 5 }, LibStyle.elevation(2)]}>
+                <View>
+                  {/* view untuk item nya */}
+
+                  <View style={{ height: 1, opacity: 0.3, backgroundColor: '#000' }} />
+                  <View style={{ marginTop: 5, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                    <View style={{ flex: 2 }} />
+                    <View style={{}} />
+                    <ComponentText.Subtitle color='#4a4a4a' style={{ textAlign: 'right' }}>{LibUtils.money(totalPrice, curr)}</ComponentText.Subtitle>
+                  </View>
+                </View>
+
+                {
+                  discount > 0 &&
+                  <View style={{ marginTop: 8, justifyContent: 'space-between', flexDirection: 'row', marginBottom: 5 }}>
+                    <ComponentText.Subtitle color='#4a4a4a'>{esp.lang("bigbang/payment_detail", "text_discount")}</ComponentText.Subtitle>
+                    <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                      <ComponentText.Subtitle color='#4a4a4a' style={{ textAlign: 'right' }}>- {LibUtils.money(discount, curr)}</ComponentText.Subtitle>
+                    </View>
+                  </View>
+                }
+
+                {/* {
+                  voucher && totalAmountVoucher != 0 && */}
+                <View testID='voucher_used' style={{ marginTop: 8, justifyContent: 'space-between', flexDirection: 'row', marginBottom: 5 }}>
+                  <ComponentText.Subtitle color='#4a4a4a'>{esp.lang("bigbang/payment_detail", "text_discount_voucher")}</ComponentText.Subtitle>
+                  <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                    <ComponentText.Subtitle color='#4a4a4a' style={{ textAlign: 'right' }}>- {LibUtils.money(12500, curr)}</ComponentText.Subtitle>
+                  </View>
+                </View>
+                {/* } */}
+
+                {/* {
+                  !!fee_platform_type && fee_platform_type != "NONE" && */}
+                <View style={{ marginTop: 8, justifyContent: 'space-between', flexDirection: 'row' }}>
+                  <View style={{ alignItems: 'center', flexDirection: 'row', flex: 1 }}>
+                    <ComponentText.Subtitle color='#4a4a4a'>{esp.lang("bigbang/payment_detail", "fee_apps")}</ComponentText.Subtitle>
+
+                    {/* {
+                      !!fee_platform_type && fee_platform_type == "PERCENTAGE" &&
+                      <Text style={{ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" }}> {"(" + fee_platform_amount + "%)"} </Text>
+                    } */}
+                  </View>
+                  <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
+                    <ComponentText.Subtitle color='#4a4a4a' style={{ textAlign: 'right' }}>{LibUtils.money(5000, curr)}</ComponentText.Subtitle>
+                  </View>
+                </View>
+                {/* } */}
+
+                <View style={{ marginTop: 8, justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center' }}>
+                  <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', flex: 1 }}>
+                    <ComponentText.Subtitle color='#4a4a4a'>{esp.lang("bigbang/payment_detail", "admin_fee")}</ComponentText.Subtitle>
+                    {/* {
+                      !!chargePercent && Number(chargePercent) != 0 &&
+                      <Text style={{ fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#999" }}> {
+                        chargePercent != 0 && charge != 0 ?
+                          "(" + chargePercent + "% + " + LibUtils.money(charge, curr) + ")"
+                          :
+                          charge == 0 ?
+                            "(" + chargePercent + "%)"
+                            :
+                            ""
+                      } </Text>
+                    } */}
+                  </View>
+                  <ComponentText.Subtitle color='#4a4a4a' style={{ textAlign: 'right' }}>{LibUtils.money(15000, curr)}</ComponentText.Subtitle>
+
+                </View>
+                <ComponentText.Caption color='#999' style={{ marginTop: 8 }}>{esp.lang("bigbang/payment_detail", "info")}</ComponentText.Caption>
+
+              </View>
+            }
+          </>
+      }
+
+    </View>
+  )
+}
+export default memo(m);