esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/market/checkout.tsx

@@ -0,0 +1,600 @@
+// withHooks
+import { BigbangTransaction } from 'esoftplay/cache/bigbang/transaction/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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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 { MarketButton } from 'esoftplay/cache/market/button/import';
+import { MarketCheckout_item } from 'esoftplay/cache/market/checkout_item/import';
+import { MarketHeader } from 'esoftplay/cache/market/header/import';
+import { MarketInfo } from 'esoftplay/cache/market/info/import';
+import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
+import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MarketCheckoutProps {
+
+}
+interface shippingCod {
+  cod: boolean,
+  cod_fee: number,
+  cod_fee_insurance: number
+}
+interface shippingInsurance {
+  insurance: boolean,
+  insurance_fee: number
+}
+
+
+const dropshipParam = useGlobalState({ name: '', phone: '' })
+
+
+export default function m(props: MarketCheckoutProps): any {
+  const { data, url, cart_ids } = LibNavigation.getArgsAll(props)
+  const [checkoutData, setCheckoutData, getCheckoutData] = useSafeState(data)
+  const [address, setAddress, getAddress] = useSafeState(checkoutData.shipping_address)
+  const [dropship, setDropship, getDropship] = useSafeState(false)
+  const [disabledFromShipping, setdisabledFromShipping] = useSafeState(true)
+  let shippings = useRef<any>({}).current
+  const dropshipName = useRef<LibInput>(null)
+  const dropshipPhone = useRef<LibInput>(null)
+  const [shippingTotal, setShippingTotal, getShippingTotal] = useSafeState(0)
+  const [payMethod, setPayMethod, getPayMethod] = useSafeState<any>({ title: esp.lang("market/checkout", "select_pay_method"), method: '' })
+  const [shippingCod, setShippingCod, getShippingCod] = useSafeState<shippingCod>({ cod: false, cod_fee: 0, cod_fee_insurance: 0 })
+  const [shippingInsurance, setShippingInsurance, getShippingInsurance] = useSafeState<shippingInsurance>({ insurance: false, insurance_fee: 0 })
+  const [voucherUsed, setVoucherUsed, getVoucherUsed] = useSafeState<any>()
+
+  const [usePoint, setUsePoint, getUsePoint] = useSafeState(false)
+
+  const user = UserClass.state().useSelector((state: any) => state)
+  const donationInfo = useRef<LibSlidingup>(null)
+  const products = checkoutData.cart_data.map((item: any) => item.products)
+  const newData = Object.values(products).map((variant: any) => Object.values(variant))
+  const newDatas = newData.reduce((acc, val) => acc.concat(val), []).map((val: any) => Object.values(val))
+  const containPromo = newDatas.reduce((acc, val) => acc.concat(val), []).some((item: any) => item.promo_list_id > 0)
+  const [trxId] = useSafeState(BigbangTransaction().getTrxId())
+
+
+  useEffect(() => {
+    new LibCurl('shop/member_point_config', null,
+      (res, msg) => {
+
+      },
+      (msg) => {
+        LibProgress.hide()
+        // LibDialog.warning('Oops..!', msg)
+      }, 1)
+  }, [])
+
+  useEffect(() => {
+    LibProgress.show(esp.lang("market/checkout", "load_wait"))
+    new LibCurl(url, { cart_ids: cart_ids, address_id: address.id },
+      (res, msg) => {
+        setCheckoutData(res)
+        // setCartData(res.cart_data)
+        LibProgress.hide()
+      },
+      (msg) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("market/checkout", "load_failed"), msg?.message)
+      }, 1
+    )
+  }, [address])
+
+  useEffect(() => {
+    dropshipName.current?.setText('')
+    dropshipPhone.current?.setText('')
+    dropshipParam.set({ name: '', phone: '' })
+  }, [dropship])
+
+  useEffect(() => {
+    if (!shippingCod.cod && payMethod?.type == 6) {
+      setPayMethod({ title: esp.lang("market/checkout", "select_pay_method1"), method: '' })
+    }
+  }, [shippingCod])
+
+  function selectPayMethod() {
+    LibNavigation.navigateForResult("market/checkout_payment_method", { price: Number(data?.bill_total) + Number(getShippingTotal()) + Number(getShippingInsurance()?.insurance_fee), id: getPayMethod()?.id, fee: Number(getPayMethod()?.charge), codSupport: getShippingCod()?.cod, containPromo: containPromo }).then(setPayMethod)
+  }
+
+  function changeNotes(indexMerchant: number, indexProduct: number, notes: string) {
+    let data = LibObject.assign({}, getCheckoutData())()
+    let cartData = data?.cart_data?.[indexMerchant]
+
+    if (cartData.products[indexProduct][0]) {
+      cartData.products[indexProduct][0].notes = notes
+      data.cart_data[indexMerchant] = cartData
+    } else {
+      cartData.products[indexProduct][Object.keys(cartData.products[indexProduct])[0]].notes = notes
+      data.cart_data[indexMerchant] = cartData
+    }
+
+    let merchant = data.cart_data[indexMerchant]
+    let product: any = {}
+
+    if (merchant.products[indexProduct][0]) {
+      product = merchant.products[indexProduct][0]
+    } else {
+      product = merchant.products[indexProduct][Object.keys(cartData.products[indexProduct])[0]]
+    }
+    edit(product.cart_id, product.qty, product.notes, data)
+  }
+
+
+  function edit(cart_id: number, qty: number, notes: string, data?: any) {
+    new LibCurl('shop/product_cart_update', { id: cart_id, qty, notes },
+      (res, msg) => {
+        if (data) {
+          setCheckoutData(data)
+        }
+      },
+      (msg) => {
+        LibToastProperty.show(msg?.message)
+      }, 1
+    )
+  }
+
+  function doCheckout(pin?: string) {
+    let voucherIds = getVoucherUsed()?.voucher_selected?.map((it: any) => it.id)
+    if (getPayMethod().id == 2 && !pin) {
+      LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+        if (p) {
+          doCheckout(p)
+        }
+      })
+      return
+    }
+
+    const hasGosend = Object.values(shippings).some((x: any) => x.code == 'gosend')
+    if (hasGosend && getDropship()) {
+      LibDialog.info(esp.lang("market/checkout", "gosend_title"), esp.lang("market/checkout", "gosend_msg"))
+      return
+    }
+
+    if (getDropship()) {
+      if (dropshipName?.current?.getText().trim() == '') {
+        LibToastProperty.show(esp.lang("market/checkout", "empty_dropsip_name"))
+        return
+      }
+      if (dropshipPhone?.current?.getText().trim() == '') {
+        LibToastProperty.show(esp.lang("market/checkout", "empty_dropsip_phone"))
+        return
+      }
+    }
+
+    let _post: any = {
+      ...getPayMethod(),
+      cart_ids: cart_ids,
+      address_id: getAddress().id,
+      dropship_name: dropshipName?.current?.getText?.() || '',
+      dropship_phone: dropshipPhone?.current?.getText?.() || '',
+      shipping: JSON.stringify(Object.values(shippings)),
+      payment_id: getPayMethod().id,
+      pin: pin || '',
+      use_point: getUsePoint() == true ? 1 : 0,
+      trx_id: trxId,
+      // _DEBUG_: '1' // ini untuk testing biar tidak lolos saat checkout
+    }
+
+    if (getVoucherUsed()) {
+      _post['voucher_ids'] = JSON.stringify(voucherIds)
+    }
+
+    let total = getPayMethod()?.type == 6 ?
+      (usePoint ? (totalPayCod - displayPointCod) : totalPayCod)
+      :
+      (usePoint ? (totalPay - displayPoint) : totalPay)
+
+    LibNavigation.navigateForResult('bigbang/loading_page', {
+      isSecure: 1,
+      post: _post,
+      title: esp.lang("market/checkout", "paymenttokoBBO"),
+      url: 'shop/product_cart_order',
+      amount: total,
+      receive_name: "BBO",
+      receive_image: 'https://bbo.co.id/images/uploads/logo-bbo-tagline_1.png',
+      secureParam: 'shop/get_token',
+      send_name: user?.name,
+      send_image: user?.image,
+
+    }, 660).then((value) => {
+      LibNavigation.backToRoot()
+
+      if (payMethod?.id == 3) /* credit card */ {
+        LibNavigation.navigateForResult('payment/cc_web', {
+          ...value,
+          statusSuccess: [3]
+        }).then((res) => {
+          LibNavigation.push('market/order_detail_payment', {
+            ...res,
+            url: res?.url,
+            title: esp.lang("bigbang/loading_page", "success")
+          })
+        })
+      } else {
+        LibNavigation.push('market/order_detail_payment', {
+          ...value,
+          url: value?.url,
+          title: esp.lang("bigbang/loading_page", "success")
+        })
+      }
+    })
+
+  }
+
+  let discPrice = voucherUsed ? Number(voucherUsed?.voucher_amount?.voucher_cashback_total) + Number(voucherUsed?.voucher_amount?.voucher_discount_total) + Number(voucherUsed?.voucher_amount?.voucher_postage_total) : 0
+  let totalPayCod = Number(checkoutData?.bill_total) + Number(shippingTotal) + Number(payMethod?.charge || 0) + Number(shippingInsurance?.insurance ? shippingInsurance?.insurance_fee : 0) + Number(shippingInsurance?.insurance ? shippingCod?.cod_fee_insurance : shippingCod?.cod_fee) - discPrice
+  let totalPay = Number(checkoutData?.bill_total) + Number(shippingTotal) + Number(payMethod?.charge || 0) + Number(shippingInsurance.insurance ? shippingInsurance.insurance_fee : 0) - discPrice
+
+  let displayPointCod = Number(user?.point) > Number(totalPayCod) ? totalPayCod : user?.point
+  let displayPoint = Number(user?.point) > Number(totalPay) ? totalPay : user?.point
+
+  return (
+    <View style={styleId_ZcMJmd} >
+      <MarketHeader onlyBack title={esp.lang("market/checkout", "header_title")} />
+      <LibKeyboard_avoid style={styleId_ZcMJmd} >
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {
+            (address?.address == "" || address?.is_valid == 0) &&
+            <MarketInfo mode="danger"
+              text={address?.address == "" ? esp.lang("market/checkout", "address_empty") : esp.lang("market/checkout", "address_invalid")}
+              disabled={false}
+              onPress={() => {
+                LibNavigation.navigateForResult("market/address", null, 3213).then((e) => { setAddress(e) })
+              }}
+              iconRight={"chevron-right"}
+              style={{ marginBottom: 3 }}
+            />
+          }
+          <View style={styleId_1BmnSr} />
+          <View style={styleId_Zj4EL6}>
+            <Text allowFontScaling={false} style={styleId_Z1BTNvU}>{esp.lang("market/checkout", "text_address")}</Text>
+            {
+              address && !Array.isArray(address) &&
+              <TouchableOpacity onPress={() => LibNavigation.navigateForResult("market/address", null, 3213).then((e) => { setAddress(e) })} >
+                <Text allowFontScaling={false} style={styleId_Z2jIMhh}>{esp.lang("market/checkout", "text_other_address")}</Text>
+              </TouchableOpacity>
+            }
+          </View>
+          {
+            address && !Array.isArray(address) &&
+            <>
+              <Text allowFontScaling={false} style={styleId_24Ez4n}>{address.name}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1h7cw0}>{address?.recipient}</Text>
+              <Text allowFontScaling={false} style={styleId_Nc1n}>{address.address + '\n' + address.location_name + ", " + address?.zipcode + '\n' + address.phone}</Text>
+            </>
+          }
+
+          {
+            address && Array.isArray(address) &&
+            <TouchableOpacity activeOpacity={1} onPress={() => LibNavigation.navigateForResult("market/address", null, 3213).then((e) => { setAddress(e) })} style={styleId_Z2vNsd1}>
+              <Text allowFontScaling={false} style={styleId_1S6TkT}>{esp.lang("market/checkout", "text_add_address")}</Text>
+              <LibIcon name="chevron-right" style={styleId_1hgMHT} />
+            </TouchableOpacity>
+          }
+
+          {/* <View style={styleId_Z27zEN} /> */}
+
+          {/* item permerchant */}
+          {
+            checkoutData?.cart_data?.map?.((cart: any, idx: number) => (
+              <>
+                {/* {idx > 0 &&
+                  <MarketSection_menu size="small" />
+                } */}
+                <MarketCheckout_item {...cart} key={idx}
+                  onChageDisabled={(isValid) => {
+                    setdisabledFromShipping(isValid)
+                  }}
+                  onChangeShipping={(id, data) => {
+                    shippings[id] = data
+                    let cod = Object.values(shippings).some((itm: any) => itm.cod == 0)
+                    let cod_fee = Object.values(shippings).map((s: any) => s.cod_fee).reduce((acc, cur) => acc + Number(cur), 0)
+                    let cod_fee_insurance = Object.values(shippings).map((s: any) => s.cod_fee_insurance).reduce((acc, cur) => acc + Number(cur), 0)
+                    let insurance = Object.values(shippings).some((itm: any) => itm.insurance == 1)
+                    let insurance_fee = Object.values(shippings).map((s: any) => s.insurance_fee).reduce((acc, cur) => acc + Number(cur), 0)
+
+                    setShippingInsurance({ insurance: insurance, insurance_fee: insurance_fee })
+                    setShippingCod({ cod: !cod, cod_fee: cod_fee, cod_fee_insurance: cod_fee_insurance })
+                    setShippingTotal(Object.values(shippings).map((s: any) => s.price).reduce((acc, cur) => acc + Number(cur), 0))
+                  }}
+                  changeNotes={(i, c, q, n) => changeNotes(idx, i, n)}
+                />
+              </>
+            ))
+          }
+          {
+            payMethod?.id &&
+            <>
+              <View style={styleId_Z27zEN} />
+              <View style={styleId_1eAReB} >
+                <Text allowFontScaling={false} style={styleId_2TdeN}>{esp.lang("market/checkout", "payment_method")}</Text>
+                <TouchableOpacity onPress={() => selectPayMethod()} style={styleId_1hgMHT} >
+                  <Text allowFontScaling={false} style={styleId_Z2jIMhh}>{esp.lang("market/checkout", "change_payment")}</Text>
+                </TouchableOpacity>
+              </View>
+              <Text allowFontScaling={false} style={styleId_ZtKfMs}>{(payMethod?.method || '') + payMethod?.title}</Text>
+            </>
+            ||
+            !disabledFromShipping &&
+            <MarketButton
+              buttonStyle={styleId_29iAqi}
+              colorBackground={(Array.isArray(address) || address?.address == "") ? "#fff" : LibStyle.colorPrimaryMarket}
+              textStyle={{ color: (Array.isArray(address) || address?.address == "") ? "#a5a5a5" : "#fff", fontSize: 14, fontFamily: 'ArialBold' }}
+              colorBorder={(Array.isArray(address) || address?.address == "") ? "#a5a5a5" : undefined}
+              onPress={() => {
+                if (!Array.isArray(address)) {
+                  if (address?.address != "") {
+                    selectPayMethod()
+                  } else {
+                    LibToastProperty.show(esp.lang("market/checkout", "address_empty1"), 2000)
+                  }
+                } else {
+                  LibToastProperty.show(esp.lang("market/checkout", "empty_pay_method1"))
+                }
+              }} text={Array.isArray(address) ? esp.lang("market/checkout", "empty_address") : address?.address == "" ? esp.lang("market/checkout", "full_address_empty") : esp.lang("market/checkout", "empty_pay_method")} />
+
+          }
+          <View style={{ marginTop: 10 }} />
+
+          <View style={styleId_Z27zEN} />
+
+          {/* Voucher */}
+          {
+            // esp.isDebug("") &&
+            <>
+              <TouchableOpacity onPress={() => {
+                if (payMethod?.id) {
+                  let b: any = {};
+                  for (let c in shippings) {
+                    b[c] = shippings[c].courier_id
+                  }
+                  LibNavigation.navigateForResult('market/checkout_voucher', { shipping: shippings, address_id: address?.id, bill_total: checkoutData?.bill_total, url: checkoutData?.url_voucher, cart_ids: cart_ids, courier_ids: b, payment_id: payMethod.id, selectedVoucher: voucherUsed }).then((item) => {
+                    setVoucherUsed(item)
+                  })
+                } else {
+                  LibToastProperty.show(esp.lang("market/checkout", "empty_pay_method2"))
+                }
+              }} style={{ flex: 1, borderRadius: 20, borderColor: LibStyle.colorBrown, borderWidth: 1, backgroundColor: '#fff', padding: 7, marginLeft: 25, marginRight: 25, margin: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                {
+                  voucherUsed ?
+                    <>
+                      <View style={styleId_ZcMJmd}>
+                        <Text allowFontScaling={false} style={styleId_ZkCphl}>{esp.lang("market/checkout", "save_up_to", LibUtils.money(discPrice))}</Text>
+                        <Text allowFontScaling={false} style={styleId_10l0ya}>{esp.lang("market/checkout", "voucher_used", voucherUsed?.voucher_selected?.length)}</Text>
+                      </View>
+                      <LibIcon name="chevron-right" />
+                    </>
+                    :
+                    <>
+                      <Text allowFontScaling={false} style={styleId_Z1ty7gM}>{esp.lang("market/checkout", "more_save")}</Text>
+                      <LibIcon name="chevron-right" />
+                    </>
+                }
+              </TouchableOpacity>
+
+              <View style={styleId_1BmnSr} />
+            </>
+          }
+
+          {/* bbo point */}
+          {
+            esp.isDebug("") && user?.point > 0 &&
+            <>
+              <View style={styleId_29Dfit}>
+                <View>
+                  <Text allowFontScaling={false} style={styleId_Z1lr4rt}>{esp.lang("market/checkout", "use_point")}</Text>
+                  <Text allowFontScaling={false} style={styleId_ZGyH7V}>{esp.lang("market/checkout", "total_poin", LibUtils.number(user?.point))}</Text>
+                </View>
+                <MarketToggle type="success" value={usePoint} onChangeValue={() => setUsePoint(usePoint == false ? true : false)} />
+              </View>
+
+              <View style={styleId_1BmnSr} />
+            </>
+          }
+
+          {/* Ringkasan Belanja */}
+          <Text allowFontScaling={false} style={styleId_ZU0vT6}>{esp.lang("market/checkout", "shop_summary")}</Text>
+          {
+            payMethod.type == 6 && shippingCod.cod &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "cod_fee")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{LibUtils.money(shippingInsurance.insurance ? shippingCod.cod_fee_insurance : shippingCod?.cod_fee)}</Text>
+            </View>
+          }
+
+          {
+            (checkoutData?.bill_discount_total && checkoutData?.bill_discount_total != 0) ?
+              <>
+                <View style={styleId_Zj4EL6}>
+                  <Text allowFontScaling={false} style={styleId_17z0ot}>{esp.lang("market/checkout", "bill_full_total")}</Text>
+                  <Text allowFontScaling={false} style={styleId_17z0ot}>{LibUtils.money(checkoutData?.bill_full_total)}</Text>
+                </View>
+                <View style={styleId_Zj4EL6}>
+                  <Text allowFontScaling={false} style={styleId_3d9jg}>{esp.lang("market/checkout", "total_discount")}</Text>
+                  <Text allowFontScaling={false} style={styleId_3d9jg}>-{LibUtils.money(checkoutData?.bill_discount_total)}</Text>
+                </View>
+              </>
+              : null
+          }
+
+          <View style={styleId_Zj4EL6}>
+            <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "shop_total")}</Text>
+            <Text allowFontScaling={false} style={styleId_Z1CSQby}>{LibUtils.money(checkoutData?.bill_total)}</Text>
+          </View>
+          <View style={styleId_Zj4EL6}>
+            <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "shipping_total")}</Text>
+            <Text allowFontScaling={false} style={styleId_Z1CSQby}>{LibUtils.money(shippingTotal)}</Text>
+          </View>
+          {
+            payMethod?.charge > 0 &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "pay_charge")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{LibUtils.money(payMethod?.charge)}</Text>
+            </View>
+          }
+
+          {
+            voucherUsed && Number(voucherUsed?.voucher_amount?.voucher_cashback_total) > 0 &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "vc_cashbank")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>- {LibUtils.money(voucherUsed?.voucher_amount?.voucher_cashback_total)}</Text>
+            </View>
+          }
+
+          {
+            voucherUsed && Number(voucherUsed?.voucher_amount?.voucher_discount_total) > 0 &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "vc_discount")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>- {LibUtils.money(voucherUsed?.voucher_amount?.voucher_discount_total)}</Text>
+            </View>
+          }
+          {
+            voucherUsed && Number(voucherUsed?.voucher_amount?.voucher_postage_total) > 0 &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "vc_free_shipping")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>- {LibUtils.money(voucherUsed?.voucher_amount?.voucher_postage_total)}</Text>
+            </View>
+          }
+          {
+            esp.isDebug("") && usePoint &&
+            <View style={styleId_Zj4EL6}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "bbo_point")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>- {LibUtils.number(payMethod.type == 6 ? displayPointCod : displayPoint)}</Text>
+            </View>
+          }
+          {
+            shippingInsurance?.insurance &&
+            <View style={styleId_1Npo05}>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{esp.lang("market/checkout", "insurance_fee")}</Text>
+              <Text allowFontScaling={false} style={styleId_Z1CSQby}>{LibUtils.money(shippingInsurance?.insurance_fee)}</Text>
+            </View>
+          }
+
+          <View style={styleId_ZOXS44}>
+            <Text allowFontScaling={false} style={styleId_ZoBGJl}>{esp.lang("market/checkout", "bill_total")}</Text>
+            {
+              payMethod.type == 6 ?
+                <Text allowFontScaling={false} style={styleId_ZoBGJl}>{LibUtils.money(usePoint ? (totalPayCod - displayPointCod) : totalPayCod)}</Text>
+                :
+                <Text allowFontScaling={false} style={styleId_ZoBGJl}>{LibUtils.money(usePoint ? (totalPay - displayPoint) : totalPay)}</Text>
+            }
+          </View>
+          <View style={styleId_Z27zEN} />
+          <TouchableOpacity
+            onPress={() => setDropship(!dropship)}
+            style={styleId_Z32DMz} >
+            <Text allowFontScaling={false} style={styleId_112hMi}>{esp.lang("market/checkout", "dropship_checkbox")}</Text>
+            <LibIcon name={dropship ? 'checkbox-marked-outline' : 'checkbox-blank-outline'} />
+          </TouchableOpacity>
+          {
+            dropship &&
+            <>
+              <MarketInput_square
+                _ref={dropshipName}
+                containerStyle={styleId_2tpQSR}
+                placeholder={esp.lang("market/checkout", "dropship_name")}
+                onChangeText={(text) => dropshipParam.set(LibObject.set(dropshipParam.get(), text)('name'))} />
+              <MarketInput_square
+                _ref={dropshipPhone}
+                placeholder={esp.lang("market/checkout", "dropship_phone")}
+                mask={"#### #### #### ####"}
+                keyboardType='phone-pad'
+                maskFrom='start'
+                onChangeText={(text) => dropshipParam.set(LibObject.set(dropshipParam.get(), text)('phone'))} />
+            </>
+          }
+          <View style={styleId_Z27zEN} />
+
+          <View style={styleId_ZSLzu6}>
+            {
+              payMethod?.id && address?.id && !disabledFromShipping &&
+              <MarketButton
+                buttonStyle={{ borderRadius: 20 }}
+                textStyle={{ fontSize: 14, fontFamily: 'ArialBold' }}
+                onPress={() => {
+                  doCheckout()
+                }} text={esp.lang("market/checkout", "btn_checkout")} />
+            }
+            {
+              disabledFromShipping && <Text allowFontScaling={false} style={styleId_ZJgW4V}>{esp.lang("market/checkout", "check_courier")}</Text>
+            }
+          </View>
+        </ScrollView>
+        <LibSlidingup ref={donationInfo}>
+          <View style={styleId_Z13bNlT}>
+            <View style={styleId_1fmvBo} >
+              <View style={styleId_ZcMJmd} />
+              <TouchableOpacity onPress={() => donationInfo.current!.hide()} >
+                <LibIcon name='close' size={26} />
+              </TouchableOpacity>
+            </View>
+            <View style={styleId_rjRjJ} >
+              <Text allowFontScaling={false} style={styleId_usDs2} >{'Donasi Rp5000 Bantu Pendidikan Adik Panti'}</Text>
+              <View style={styleId_tpSM1} >
+                <Text style={styleId_ZctPPv} >{'Bantu adik-adik panti dan prasejahtera untuk pelatihan bahasa inggris dan pelatihan keterampilan lainnya bersana aa.com'}</Text>
+                <LibIcon name='hand-heart' size={40} style={styleId_Zktt4p} />
+              </View>
+            </View>
+          </View>
+        </LibSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}
+const styleId_ZcMJmd: any = { flex: 1 }
+const styleId_1BmnSr: any = { height: 8, flex: 1, backgroundColor: '#F5F5F5' }
+const styleId_Zj4EL6: any = { marginTop: 15, marginLeft: 25, marginRight: 25, flexDirection: 'row', justifyContent: 'space-between' }
+const styleId_Z1BTNvU: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }
+const styleId_Z2jIMhh: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#724225" }
+const styleId_24Ez4n: any = { marginTop: 15, marginLeft: 25, marginRight: 25, fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }
+const styleId_Z1h7cw0: any = { marginTop: 5, marginLeft: 25, marginRight: 25, fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }
+const styleId_Nc1n: any = { marginTop: 5, marginLeft: 25, marginRight: 25, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }
+const styleId_Z2vNsd1: any = { alignContent: 'center', alignItems: 'center', marginTop: 15, marginLeft: 25, marginRight: 25, flexDirection: 'row', justifyContent: 'space-between', height: 40, borderRadius: 18, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#a5a5a5" }
+const styleId_1S6TkT: any = { marginLeft: 25, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#a5a5a5" }
+const styleId_1hgMHT: any = { marginRight: 20 }
+const styleId_Z27zEN: any = { marginTop: 15, height: 8, flex: 1, backgroundColor: '#F5F5F5' }
+const styleId_1eAReB: any = { flexDirection: 'row', alignItems: 'center', marginTop: 20 }
+const styleId_2TdeN: any = { marginLeft: 25, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a", flex: 1 }
+const styleId_ZtKfMs: any = { marginLeft: 25, marginTop: 10, fontFamily: "Arial", fontSize: 17, fontWeight: "bold", fontStyle: "normal", lineHeight: 20, letterSpacing: 0, textAlign: "left", color: LibStyle.colorBrown }
+const styleId_29iAqi: any = { marginHorizontal: 20, marginTop: 20, borderRadius: 20 }
+const styleId_ZkCphl: any = { marginLeft: 15, flex: 1, flexWrap: 'wrap', fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#724225" }
+const styleId_10l0ya: any = { flex: 1, marginLeft: 15, marginTop: 3, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#a5a5a5" }
+const styleId_Z1ty7gM: any = { marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }
+const styleId_29Dfit: any = { flex: 1, backgroundColor: '#fff', padding: 7, marginTop: 7, marginBottom: 7, paddingLeft: 25, paddingRight: 25, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
+const styleId_Z1lr4rt: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "left", color: "#03192a" }
+const styleId_ZGyH7V: any = { marginTop: 4, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }
+const styleId_ZU0vT6: any = { marginLeft: 25, marginTop: 20, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }
+const styleId_Z1CSQby: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }
+const styleId_17z0ot: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070" }
+const styleId_3d9jg: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#28a745" }
+const styleId_1Npo05: any = { marginTop: 15, marginLeft: 25, marginRight: 25, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
+const styleId_ZOXS44: any = { marginTop: 25, marginLeft: 25, marginRight: 25, flexDirection: 'row', justifyContent: 'space-between' }
+const styleId_ZoBGJl: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "left", color: "#000" }
+const styleId_Z32DMz: any = { flexDirection: 'row', marginHorizontal: 20, marginTop: 20, alignItems: 'center' }
+const styleId_112hMi: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a", flex: 1 }
+const styleId_2tpQSR: any = { marginTop: 20 }
+const styleId_ZSLzu6: any = { marginLeft: 20, marginRight: 20, marginTop: 15, marginBottom: 10 }
+const styleId_ZJgW4V: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "center", color: LibStyle.colorRed }
+const styleId_Z13bNlT: any = { backgroundColor: 'white', paddingHorizontal: 20, paddingVertical: 10, borderTopLeftRadius: 15, borderTopRightRadius: 15 }
+const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
+const styleId_rjRjJ: any = { marginBottom: 20, marginTop: 10 }
+const styleId_usDs2: any = { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold' }
+const styleId_tpSM1: any = { flexDirection: 'row', marginTop: 15 }
+const styleId_ZctPPv: any = { flex: 1, fontFamily: 'Arial', fontSize: 16, lineHeight: 22 }
+const styleId_Zktt4p: any = { marginLeft: 20 }