esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/market/order_detail.tsx

@@ -0,0 +1,670 @@
+//[moved] adjustment payment
+// withHooks
+
+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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketButton } from 'esoftplay/cache/market/button/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import { MarketHeader } from 'esoftplay/cache/market/header/import';
+import { MarketOrder_detail_buttons } from 'esoftplay/cache/market/order_detail_buttons/import';
+import { MarketOrder_detail_item } from 'esoftplay/cache/market/order_detail_item/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import { MarketStyle } from 'esoftplay/cache/market/style/import';
+import esp from 'esoftplay/esp';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import { useEffect, useRef } from 'react';
+import { Animated, Dimensions, Linking, RefreshControl, Text, TouchableOpacity, View } from 'react-native';
+
+moment().locale('id')
+
+export interface MarketOrder_detailArgs {
+  url: string,
+  shipping_resi?: string,
+  from?: string,
+}
+
+export interface MarketOrder_detailProps {
+
+}
+
+export function extendShippingForMerchant(sale_id: string, merchant_id: string, onSuccess: () => void) {
+  const marketConfig = BboConfigProperty.state().get()
+
+  LibDialog.custom(
+    <View style={{ margin: -10, marginBottom: -20 }}>
+      <View style={{ padding: 15 }} >
+        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }} >Perpanjang Masa Garansi?</Text>
+        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: 'Arial', fontSize: 14, lineHeight: 20 }} >{esp.lang("market/order_detail", "guarantee_extend", marketConfig?.shop?.extension_packing_time)}</Text>
+      </View>
+      <View style={{ flexDirection: 'row', marginTop: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
+        <TouchableOpacity style={{ flex: 1, alignItems: 'center', padding: 15 }} onPress={() => { LibDialog.hide() }} >
+          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >Batal</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={{ flex: 1, alignItems: 'center', padding: 15 }} onPress={() => {
+          LibDialog.hide()
+          LibProgress.show(esp.lang("market/order_detail", "extend_wait"))
+          new LibCurl("shop/order_detail_extended?sale_id=" + sale_id, { merchant_id: merchant_id },
+            (res) => {
+              onSuccess()
+              LibDialog.info(esp.lang("market/order_detail", "extend_ok"), res)
+              LibProgress.hide()
+            }, (err) => {
+              LibProgress.hide()
+              LibToastProperty.show(err?.message)
+            }, 1
+          )
+        }}>
+          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, color: MarketStyle.colorPrimaryMarket }} >Lanjutkan</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const { height } = Dimensions.get('screen');
+
+const DEVICE_HEIGHT = Dimensions.get('screen').height;
+const WINDOW_HEIGHT = Dimensions.get('window').height;
+const STATUS_BAR = LibStyle.STATUSBAR_HEIGHT
+const navHeight = DEVICE_HEIGHT - WINDOW_HEIGHT - STATUS_BAR
+
+const _navHeight = navHeight > STATUS_BAR ? navHeight : navHeight < 10 ? navHeight + 40 : navHeight + 32
+
+const NAVIGATION_HEIGHT = DEVICE_HEIGHT - WINDOW_HEIGHT > 0 ? _navHeight : 0
+
+export default function m(props: MarketOrder_detailProps): any {
+  const { url, from, shipping_resi } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useSafeState<any>()
+  const [paymentDetail, setPaymentDetail] = useSafeState<any>({})
+  const marketConfig = BboConfigProperty.state().get()
+
+  let scrollY = useRef(new Animated.Value(0)).current
+
+  const headerHeight = 56 + LibStyle.STATUSBAR_HEIGHT
+
+  const [bottomAction, setBottomAction] = useSafeState<any>()
+  const topEdge = bottomAction?.y - height + bottomAction?.height + headerHeight + NAVIGATION_HEIGHT + (LibStyle.isIphoneX ? 35 : 0) + LibStyle.STATUSBAR_HEIGHT
+
+  useEffect(() => {
+    getAll()
+  }, [])
+
+  function getAll() {
+    new LibCurl(url, null,
+      (res, msg) => {
+        setData(res)
+        new LibCurl(res.payment_url, null,
+          (result) => {
+            setPaymentDetail(result)
+          }, (err) => {
+
+          })
+      },
+      (msg) => {
+        LibToastProperty.show(msg?.message)
+      }, 1
+    )
+  }
+
+  if (!data) {
+    return (
+      <View style={{ flex: 1 }} >
+        <MarketHeader leftIcon={{ name: "close", onPress: () => LibNavigation.back() }} title={esp.lang("market/order_detail", "header_title")} subtitle={esp.lang("market/order_detail", "header_subtitle")} />
+        <LibSkeleton>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
+            <View style={{ flex: 1 }}>
+              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+              <View style={{ width: '40%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+            </View>
+            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
+            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
+            <View style={{ flex: 1 }}>
+              <View style={{ width: '30%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+              <View style={{ width: '50%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+            </View>
+            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
+            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", borderBottomWidth: 0.5 }} >
+            <View style={{ flex: 1 }}>
+              <View style={{ width: '70%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+            </View>
+            <View style={{ width: '30%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
+            <View style={{ flex: 1 }}>
+              <View style={{ width: '65%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
+            </View>
+            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
+            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center' }} >
+            <View style={{ width: 15, height: 15, borderRadius: 7.5, backgroundColor: 'white' }} />
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <View style={{ width: '60%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
+              <View style={{ width: '60%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
+              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
+            </View>
+            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
+            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
+            <View style={{ width: 30, height: 30, borderRadius: 5, backgroundColor: 'white' }} />
+            <View style={{ flex: 1 }} >
+              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white", marginLeft: 10 }} />
+            </View>
+            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white", marginLeft: 10 }} />
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
+            <View style={{ width: 40, height: 40, borderRadius: 5, backgroundColor: 'white' }} />
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <View style={{ width: '80%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
+              <View style={{ flexDirection: 'row' }}>
+                <View style={{ flex: 1 }}>
+                  <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+                </View>
+                <View style={{ width: '30%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+              </View>
+            </View>
+          </View>
+          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
+            <View style={{ flex: 1 }}>
+              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+            </View>
+            <View style={{ width: '25%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ marginHorizontal: 20, borderWidth: 1, borderRadius: 10, padding: 10, alignItems: 'center', marginVertical: 10 }}>
+            <View style={{ width: '60%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
+          </View>
+          <View style={{ height: 20, backgroundColor: 'white' }} />
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+
+  // @ts-ignore
+  const address = data && data?.merchant && Object.values(data.merchant)[0].shipping_address
+  const merchant: any = data && data?.merchant && Object.values(data.merchant)[0]
+
+  return (
+    <View style={{ flex: 1 }} >
+      <View style={{ zIndex: 99, backgroundColor: 'white', height: headerHeight }} >
+        <MarketHeader
+          leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
+          title={esp.lang("market/order_detail", "header_title1")}
+          subtitle={esp.lang("market/order_detail", "header_subtitle1")}
+        />
+      </View>
+      <Animated.ScrollView
+        refreshControl={<RefreshControl onRefresh={getAll} refreshing={false} />}
+        showsVerticalScrollIndicator={false}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })} >
+        <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", }} >
+          <View style={{ flex: 1 }} >
+            <LibTextstyle textStyle="caption1" text={esp.lang("market/order_detail", "order_status")} style={{}} />
+            <LibTextstyle textStyle="title1" text={data.status_title} style={{ fontWeight: 'bold', fontSize: 18 }} />
+            {/* {
+                    from != 'market/merchant_order' && data.status == 3 &&
+                    <LibTextstyle textStyle="callout" text="Pesanan anda telah diteruskan dan menunggu approval merchant" style={{ fontSize: 14 }} />
+                  } */}
+            {
+              merchant.info != '' &&
+              <LibTextstyle textStyle="callout" text={merchant?.info} style={{ fontSize: 13, color: MarketStyle.colorPrimaryMarket }} />
+            }
+
+
+            {
+              (data.status == 2 || data.status == 8) && LibUtils.checkUndefined(merchant, 'status_detail.0') &&
+              <View style={{ flex: 1 }}  >
+                <LibTextstyle textStyle="callout" text={merchant?.status_detail[0]?.title} style={{ fontSize: 14 }} />
+              </View>
+            }
+          </View>
+          {
+            LibUtils.checkUndefined(merchant, 'status_detail') &&
+            <TouchableOpacity onPress={() => LibNavigation.navigate('market/order_status_detail', { status: merchant?.status, status_detail: merchant?.status_detail, data: data })} >
+              <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "show_detail")} style={{ color: MarketStyle.colorPrimaryMarket }} />
+            </TouchableOpacity>
+          }
+        </View>
+        {
+          (data.status == 3 || data.status == 4) &&
+          <View style={{ paddingVertical: 10, flexDirection: 'row', alignItems: 'center', paddingBottom: 10, marginHorizontal: 17 }} >
+            <LibTextstyle textStyle="callout" text={esp.lang("market/order_detail", "cancel_auto")} style={{ fontSize: 13, flex: 1 }} />
+            <MarketCountdown expired={moment(merchant?.time_limit).localeFormat('YYYY-MM-DD HH:mm:ss')}
+              onlyDay
+              style={{ fontFamily: 'ArialBold', color: 'white', fontSize: 12 }}
+              containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.7), paddingHorizontal: 15, borderRadius: 20 }} />
+          </View>
+        }
+
+        {
+          data.status == 4 && data.is_merchant == 0 && (merchant.extension == '' || merchant.extension == null) &&
+          <>
+            <MarketSection_menu size={"small"} />
+            <TouchableOpacity onPress={() => { extendShippingForMerchant(data.id, merchant.merchant_id, getAll) }} style={{ paddingHorizontal: 17, paddingVertical: 10 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket }} >{esp.lang("market/order_detail", "order_not_send")}</Text>
+              <View style={{ flexDirection: 'row', marginTop: 8 }} >
+                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14, lineHeight: 20 }} >{esp.lang("market/order_detail", "extend")}</Text>
+                <LibIcon name="chevron-right" size={28} />
+              </View>
+            </TouchableOpacity>
+          </>
+        }
+
+        <MarketSection_menu title={esp.lang("market/order_detail", "address")} />
+        <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row" }} >
+          <View style={{ flex: 1 }} >
+            {
+              // data?.is_merchant != 1 &&
+              <LibTextstyle textStyle="callout" text={address.recipient || address.name} />
+            }
+            <LibTextstyle textStyle="footnote" text={address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone} style={{ marginTop: 5, color: "#888" }} />
+          </View>
+          <TouchableOpacity onPress={() => {
+            // data.is_merchant == 1 ?
+            //   LibUtils.copyToClipboard(address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone).then(() => LibToastProperty.show("BERHASIL DISALIN"))
+            //   :
+            LibUtils.copyToClipboard((address.recipient || address.name) + '\n' + address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone).then(() => LibToastProperty.show(esp.lang("market/order_detail", "copied")))
+          }} >
+            <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "copy")} style={{ color: MarketStyle.colorPrimaryMarket }} />
+          </TouchableOpacity>
+        </View>
+        {
+          //kondisi jika merchant dan status order sudah dikemas
+          data.is_merchant == 1 && data.status > 3 && merchant.shipping_resi != '' && merchant.shipping_resi != '' && merchant.shipping_ref != '' &&
+          <>
+            {
+              merchant.shipping_code == 'gosend' ?
+                < MarketButton onPress={() => { LibNavigation.navigate('market/order_detail_label_print', { url: merchant.shipping_label }) }}
+                  text={esp.lang("market/order_detail", "label_print")}
+                  colorBackground={"white"}
+                  colorBorder={MarketStyle.colorPrimaryMarket}
+                  color={MarketStyle.colorPrimaryMarket}
+                  buttonStyle={{ marginHorizontal: 17, marginBottom: 10 }}
+                />
+                :
+                merchant.shipping_method != 0 ?
+                  <MarketButton onPress={() => { LibNavigation.navigate('market/order_detail_label_print', { url: merchant.shipping_label }) }}
+                    text={esp.lang("market/order_detail", "label_print1")}
+                    colorBackground={"white"}
+                    colorBorder={MarketStyle.colorPrimaryMarket}
+                    color={MarketStyle.colorPrimaryMarket}
+                    buttonStyle={{ marginHorizontal: 17, marginBottom: 10 }}
+                  />
+                  : null
+            }
+          </>
+        }
+        <MarketSection_menu title={esp.lang("market/order_detail", "detail_order")} />
+        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#eee" }} >
+          <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 10 }} >
+            <LibTextstyle text={esp.lang("market/order_detail", "order_date")} textStyle="footnote" style={{}} />
+            <View style={{ flex: 1 }} />
+            <LibTextstyle text={merchant?.created} textStyle="footnote" style={{}} />
+          </View>
+          <MarketSection_menu size={"line"} />
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }} >
+            <View style={{ alignItems: "center", flexDirection: "row" }} >
+              <LibTextstyle text={data.status >= '3' ? merchant?.invoice_merchant : data?.invoice} textStyle="footnote" style={{}} />
+              <TouchableOpacity onPress={() => {
+                LibUtils.copyToClipboard(data.status >= '3' ? merchant?.invoice_merchant : data?.invoice)
+                LibToastProperty.show(esp.lang("market/order_detail", "invoice_copy"))
+              }} style={{ marginLeft: 5 }} >
+                <LibIcon name="content-copy" size={16} />
+              </TouchableOpacity>
+            </View>
+            <View style={{ flex: 1 }} />
+            <TouchableOpacity onPress={() => LibNavigation.navigate('market/order_detail_invoice', { url: merchant?.invoice_url, invoice: data.status >= '3' ? merchant?.invoice_merchant : data?.invoice })} >
+              <LibTextstyle text={esp.lang("market/order_detail", "show")} textStyle="footnote" style={{ color: MarketStyle.colorPrimaryMarket }} />
+            </TouchableOpacity>
+          </View>
+        </View>
+        {
+          data?.status > 3 && merchant && merchant.shipping_resi != '' &&
+          <>
+            <MarketSection_menu title={esp.lang("market/order_detail", "shipping_Status")} rightView={
+              <>
+                {
+                  merchant?.shipping_live_url != "" &&
+                  <TouchableOpacity onPress={() => {
+                    if (!!Linking.canOpenURL(merchant.shipping_live_url)) {
+                      Linking.openURL(merchant.shipping_live_url)
+                    }
+                  }} style={{ alignItems: 'center', justifyContent: 'center', marginTop: -5 }} >
+                    <LibTextstyle text={esp.lang("market/order_detail", "live_tracking")} textStyle="footnote" style={{ color: MarketStyle.colorPrimaryMarket }} />
+                  </TouchableOpacity>
+                }
+              </>
+            } />
+            <View style={{ paddingHorizontal: 17, paddingVertical: 10 }} >
+              <View style={{ flexDirection: 'row', alignItems: "center" }} >
+                <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 10 }} />
+                <View style={{ flex: 1 }}  >
+                  {
+                    data?.status == 4 ?
+                      <LibTextstyle textStyle="callout" text={esp.lang("market/order_detail", "waiting_send")} style={{ fontSize: 14 }} />
+                      :
+                      <LibTextstyle textStyle="callout" text={merchant?.shipping_waybill?.title} style={{ fontSize: 14 }} />
+                  }
+                  <LibTextstyle textStyle="footnote" text={merchant?.shipping_courier + " : " + merchant?.shipping_resi} style={{ color: "#888", fontSize: 12 }} />
+                  <LibTextstyle textStyle="footnote" text={moment(merchant?.shipping_waybill?.created).localeFormat('YYYY-MM-DD HH:mm')} style={{ color: "#888", fontSize: 12 }} />
+                </View>
+                {
+                  data?.status > 4 &&
+                  <TouchableOpacity style={{}} onPress={() => LibNavigation.navigate("market/order_tracing", { order_id: data.id, merchant: merchant })} >
+                    <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "detail")} style={{ color: MarketStyle.colorPrimaryMarket }} />
+                  </TouchableOpacity>
+                }
+              </View>
+              <View style={{ height: 40, width: 1, backgroundColor: MarketStyle.colorPrimaryMarket, position: "absolute", bottom: 0, left: 21.5 }} />
+            </View>
+          </>
+        }
+        <MarketSection_menu title={esp.lang("market/order_detail", "product")} />
+        {
+          Object.values(data?.merchant).map((merchant: any, i: number) => <MarketOrder_detail_item key={i} buyer_user_id={data?.buyer_user_id} {...merchant} />)
+        }
+        <MarketSection_menu size={"small"} />
+        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#eee" }} >
+          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+            <LibTextstyle text={esp.lang("market/order_detail", "bill_total")} textStyle="footnote" style={{}} />
+            <View style={{ flex: 1 }} />
+            {
+              data.status >= 3 ?
+                <LibTextstyle text={LibUtils.money(merchant?.total)} textStyle="footnote" style={{}} />
+                :
+                <LibTextstyle text={LibUtils.money(data?.total)} textStyle="footnote" style={{}} />
+            }
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+            <LibTextstyle text={esp.lang("market/order_detail", "shipping_total")} textStyle="footnote" style={{}} />
+            <View style={{ flex: 1 }} />
+            {
+              data.status >= 3 ?
+                <LibTextstyle text={LibUtils.money(merchant?.shipping)} textStyle="footnote" style={{}} />
+                :
+                <LibTextstyle text={LibUtils.money(data?.shipping)} textStyle="footnote" style={{}} />
+            }
+          </View>
+          {
+            data.status >= 3 && merchant?.shipping_fee_list?.insurance &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "insurance")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(merchant?.shipping_fee_list?.insurance)} textStyle="footnote" style={{}} />
+            </View>
+          }
+          {
+            data.status >= 3 && merchant?.shipping_fee_list?.cod &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "cod")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(merchant?.shipping_fee_list?.cod)} textStyle="footnote" style={{}} />
+            </View>
+          }
+          {
+            data?.v_code > 0 &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "payment_verif")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(data?.v_code)} textStyle="footnote" style={{}} />
+            </View>
+          }
+          {
+            data?.fee > 0 &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "charge")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(Number(data?.fee))} textStyle="footnote" style={{}} />
+            </View>
+          }
+          {
+            data?.shipping_voucher > 0 &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "freeong")} textStyle="footnote" style={{ flex: 1, flexWrap: 'wrap' }} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={"- " + LibUtils.money(Number(data?.shipping_voucher))} textStyle="footnote" style={{}} />
+            </View>
+          }
+          {
+            data?.vouchers?.length > 0 && data?.vouchers?.map((item: any, i: number) => {
+              return (
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+                  <LibTextstyle text={item?.voucher_title} textStyle="footnote" style={{ flex: 1, flexWrap: 'wrap' }} />
+                  <View style={{ flex: 1 }} />
+                  <LibTextstyle text={"- " + LibUtils.money(Number(item?.amount))} textStyle="footnote" style={{}} />
+                </View>
+              )
+            })
+          }
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+            <LibTextstyle text={esp.lang("market/order_detail", "total_bill")} textStyle="footnote" style={{}} />
+            <View style={{ flex: 1 }} />
+            {
+              data.status >= 3 ?
+                <LibTextstyle text={LibUtils.money((Number(merchant?.shipping) + Number(merchant?.total) + Number(data?.fee) + Number(merchant?.shipping_fee)) - (Number(data?.voucher) + Number(data?.shipping_voucher)))} textStyle="footnote" style={{}} />
+                :
+                <LibTextstyle text={LibUtils.money((Number(data?.shipping) + Number(data?.total) + Number(data?.fee) + Number(data?.v_code) - (Number(data?.voucher) + Number(data?.shipping_voucher))))} textStyle="footnote" style={{}} />
+            }
+          </View>
+          {
+            data?.is_merchant == 0 && data?.total_complaint != 0 &&
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "total_complaint")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={'+' + LibUtils.money(Number(data?.total_complaint))} textStyle="footnote" style={{ color: MarketStyle.colorGreen }} />
+            </View>
+          }
+
+          {
+            data?.is_merchant == 1 &&
+            <>
+              {
+                merchant?.fee_service != 0 &&
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+                  <LibTextstyle text={esp.lang("market/order_detail", "fee")} textStyle="footnote" style={{}} />
+                  <View style={{ flex: 1 }} />
+                  <LibTextstyle text={LibUtils.money(Number(merchant.fee_service))} textStyle="footnote" style={{}} />
+                </View>
+              }
+              {
+                data?.total_complaint != 0 &&
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+                  <LibTextstyle text={esp.lang("market/order_detail", "compaint_total")} textStyle="footnote" style={{}} />
+                  <View style={{ flex: 1 }} />
+                  <LibTextstyle text={'-' + LibUtils.money(Number(data?.total_complaint))} textStyle="footnote" style={{ color: LibStyle.colorRed }} />
+                </View>
+              }
+              <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+                {
+                  data?.status >= 7 ?
+                    <LibTextstyle text={esp.lang("market/order_detail", "received")} textStyle="footnote" style={{}} />
+                    :
+                    <LibTextstyle text={esp.lang("market/order_detail", "receiving")} textStyle="footnote" style={{}} />
+                }
+                <View style={{ flex: 1 }} />
+                {
+                  data.status >= 3 ?
+                    merchant.shipping_cashless == 1 ?
+                      <LibTextstyle text={LibUtils.money((Number(merchant?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
+                      :
+                      <LibTextstyle text={LibUtils.money((Number(merchant?.shipping) + Number(merchant?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
+                    :
+                    merchant.shipping_cashless == 1 ?
+                      <LibTextstyle text={LibUtils.money((Number(data?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
+                      :
+                      <LibTextstyle text={LibUtils.money((Number(data?.shipping) + Number(data?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
+                }
+              </View>
+            </>
+          }
+        </View>
+        <MarketSection_menu title={esp.lang("market/order_detail", "payment_method")} />
+        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 12 }} >
+          <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }} >
+            {
+              LibUtils.checkUndefined(paymentDetail, "payment.payment_id") &&
+              <LibPicture source={{ uri: paymentDetail?.payment?.image }} style={{ width: 55.7, height: 40, marginRight: 5 }} resizeMode="contain" />
+            }
+            <LibTextstyle textStyle={"callout"} text={data?.payment_title} />
+          </View>
+          {
+            data?.payment_id != 3 && LibUtils.checkUndefined(paymentDetail, "params.expired") && data.is_merchant != 1 && data.status == 1 &&
+            <>
+              <LibTextstyle textStyle={"footnote"} text={paymentDetail?.params?.va_no ? esp.lang("market/order_detail", "va_number") : esp.lang("market/order_detail", "bill_number")} style={{ marginTop: 10 }} />
+              <View style={{ flexDirection: "row", alignItems: "center", marginTop: 10 }} >
+                <Text allowFontScaling={false} style={{ flex: 1, fontSize: 20, fontWeight: "bold" }} >{paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no}</Text>
+                <TouchableOpacity activeOpacity={1} style={{ alignItems: "center", justifyContent: 'center', flexDirection: "row" }}
+                  onPress={() => {
+                    LibUtils.copyToClipboard(paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("market/order_detail", "va_copied")))
+                  }} >
+                  <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
+                  <LibTextstyle textStyle={"footnote"} text={esp.lang("market/order_detail", "va_copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
+                </TouchableOpacity>
+              </View>
+              <LibTextstyle textStyle={"footnote"} text={esp.lang("market/order_detail", "time_check")} style={{ marginTop: 10, fontSize: 12 }} />
+              <TouchableOpacity onPress={() => { LibNavigation.navigate("market/order_detail_payment_hint", { data: paymentDetail }) }} style={{ marginTop: 5 }} >
+                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#16a085" }} >{esp.lang("market/order_detail", "how_to_pay")}</Text>
+              </TouchableOpacity>
+            </>
+          }
+          {
+            data.status == 1 && data.exp_payment &&
+            <View style={{ marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("market/order_detail", "expired_payment")} textStyle="footnote" style={{ fontSize: 12 }} />
+              <MarketCountdown
+                expired={moment(data?.exp_payment).localeFormat('YYYY-MM-DD HH:mm:ss')}
+                onExpired={getAll}
+                style={{ fontSize: 18, fontWeight: 'bold', color: MarketStyle.colorPrimaryMart }}
+              />
+            </View>
+          }
+        </View>
+
+        {/* {
+          esp.isDebug() && data.is_merchant ?
+            <>
+              {
+                (data.status == 3 || (data.status == 4 && merchant.shipping_method == 0) || (data.status == 5 && merchant.shipping_method_change == 1)) &&
+                <View
+                  onLayout={ev => setBottomAction(ev.nativeEvent.layout)}
+                  style={{ height: 50, backgroundColor: 'white' }}
+                />
+              }
+            </>
+            :
+            <>
+              {
+                (data.status == 5) &&
+                <View
+                  onLayout={ev => setBottomAction(ev.nativeEvent.layout)}
+                  style={{ height: 50, backgroundColor: 'white' }}
+                />
+              }
+            </>
+
+        } */}
+
+        <MarketOrder_detail_buttons data={data} price={Number(data?.shipping) + Number(data?.total)} config={marketConfig} shipping_resi={shipping_resi} order_url={url} />
+      </Animated.ScrollView>
+
+      {/* {
+        esp.isDebug() && bottomAction &&
+        <Animated.View style={{
+          height: 50,
+          position: 'absolute', bottom: 0, left: 0, right: 0,
+          paddingHorizontal: 17,
+          backgroundColor: 'white',
+          transform: [{
+            translateY: scrollY.interpolate({
+              inputRange: [-1, 0, topEdge - 1, topEdge, topEdge + 1],
+              outputRange: [0, 0, 0, 0, -1]
+            })
+          }]
+        }}>
+          {
+            data.is_merchant ?
+              <>
+                {
+                  data.status == 3 &&
+                  <MarketButton
+                    text={esp.lang("market/order_detail", "btn_process")}
+                    textStyle={{ color: '#f1f1f1' }}
+                    buttonStyle={{ marginVertical: 5 }}
+                    onPress={() => { MarketOrder_detail_buttonsProperty.approveOrder(data.id) }} />
+                }
+                {
+                  data.status == 4 && merchant.shipping_method == 0 &&
+                  <MarketButton
+                    text={esp.lang("market/order_detail", "btn_set_shipping")}
+                    textStyle={{ color: '#f1f1f1' }}
+                    buttonStyle={{ marginVertical: 5 }}
+                    onPress={() => {
+                      LibNavigation.navigate<MarketMerchant_sending_methodArgs>('market/merchant_sending_method', { order_id: data.id, shipping_code: merchant.shipping_code, shipping_label: merchant.shipping_label })
+                    }} />
+                }
+                {
+                  data.status == 5 && merchant.shipping_method_change == 1 &&
+                  <MarketButton
+                    text={esp.lang("market/order_detail", "btn_re_shipping")}
+                    textStyle={{ color: '#f1f1f1' }}
+                    buttonStyle={{ marginVertical: 5 }}
+                    onPress={() => { MarketOrder_detail_buttonsProperty.reSettingShipping(data.id, merchant) }} />
+                }
+              </>
+              :
+              <>
+                {
+                  data.status == 5 &&
+                  <>
+                    {
+                      merchant.delivered == 0 &&
+                      <MarketButton
+                        text={esp.lang("market/order_detail", "btn_track")}
+                        textStyle={{ color: '#f1f1f1' }}
+                        buttonStyle={{ marginVertical: 5 }}
+                        onPress={() => {
+                          LibNavigation.navigate<MarketOrder_tracingArgs>("market/order_tracing", { order_id: data.id, merchant: merchant })
+                        }} />
+                      ||
+                      <MarketButton
+                        text={esp.lang("market/order_detail", "btn_product_received")}
+                        textStyle={{ color: '#f1f1f1' }}
+                        buttonStyle={{ marginVertical: 5 }}
+                        onPress={() => { MarketOrder_detail_buttonsProperty.finishOrder(merchant, data) }} />
+                    }
+                  </>
+                }
+              </>
+          }
+        </Animated.View>
+      } */}
+    </View >
+  )
+}