esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/mart/dc_order_detail_finish_item.tsx

@@ -0,0 +1,248 @@
+// withHooks
+// noPage
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketNotice } from 'esoftplay/cache/market/notice/import';
+import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
+import { MarketToggle } from 'esoftplay/cache/market/toggle/import';
+import { MartButton } from 'esoftplay/cache/mart/button/import';
+import { MartDc_order_detail_finish_bundle_item } from 'esoftplay/cache/mart/dc_order_detail_finish_bundle_item/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+
+import React from 'react';
+import { Platform, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_order_detail_finish_itemArgs {
+
+}
+export interface MartDc_order_detail_finish_itemProps {
+  barcode: string,
+  discount: string,
+  id: string,
+  image: string,
+  name: string,
+  notes: string,
+  package: string,
+  package_label: string,
+  price: string,
+  qty: string,
+  qty_return: string,
+  total: string,
+  options: any[]
+  onSavePrice: (t: any) => void,
+  sku?: string,
+  options_bundling?: any
+  onSaveBundleItem?: (t: any, index: number) => void
+  saleByItems: 0 | 1
+  onChangeSaleByItems: (t: number) => void
+}
+const arrayPrice = useGlobalState(undefined)
+export default function m(props: MartDc_order_detail_finish_itemProps): any {
+
+  const renderOptionsBundling = (item: any, i: number) => (
+    <MartDc_order_detail_finish_bundle_item
+      key={i}
+      index={i}
+      {...item}
+      onChangePrice={(t, i) => {
+        props.onSaveBundleItem?.(t, i)
+      }} />
+  )
+
+  const renderOptions = (x: any, i: number) => (
+    <View key={i} style={styleId_1fmvBo}>
+      <Text allowFontScaling={false} style={styleId_Z1U8tI3}>{LibUtils.number(x.pcs * (props?.options[i - 1]?.pcs || 1))} </Text>
+      <Text allowFontScaling={false} style={styleId_Z1U8tI3}>{(x.pcs_label)} </Text>
+    </View>
+  )
+
+  const renderBuyPrice = (x: any, i: number) => (
+    <Text key={i} allowFontScaling={false} style={styleId_1j79ff}>{LibUtils.money(Number(props.price) / (Number(x?.pcs) * (props?.options[i - 1]?.pcs || 1)))}/{x?.pcs_label}</Text>
+  )
+
+  const renderHpp = (x: any, i: number) => (
+    <Text key={i} allowFontScaling={false} style={styleId_1j79ff}>{LibUtils.money(x?.hpp)}/{x?.pcs_label}</Text>
+  )
+
+  const renderSalePrice = (x: any, i: number) => (
+    <Text key={i} allowFontScaling={false} style={styleId_Z16b9Of}>{LibUtils.money(Number(x?.price))}/{x?.pcs_label}</Text>
+  )
+
+  const renderOptionsPrice = (x: any, index: number) => (
+    <View key={index} style={styleId_1rPRB6}>
+      <Text allowFontScaling={false} style={styleId_2hKz3I}>Harga per{String(x?.pcs_label).toLowerCase()}</Text>
+      <View style={styleId_FcJqW} >
+        <Text allowFontScaling={false} style={styleId_Z1lH1fn}>{esp.lang("mart/dc_order_detail_finish_item", "prefix_price_item")}</Text>
+        <LibInput
+          base
+          defaultValue={String(x?.price || '')}
+          placeholder={esp.lang("mart/dc_order_detail_finish_item", "price_unit", String(x?.pcs_label).toLowerCase())}
+          maskFrom="end"
+          keyboardType="phone-pad"
+          mask={'###.###.###.###.###.###.###.###'}
+          onChangeText={(t) => { setPrice(t, x) }}
+          style={styleId_2n5q9N} />
+      </View>
+      <Text allowFontScaling={false} style={styleId_1Skf0e}>{esp.lang("mart/dc_order_detail_finish_item", "Purchase_price")}{LibUtils.money(Number(props.price) / (Number(x?.pcs) * (props?.options[index - 1]?.pcs || 1)))}/{x?.pcs_label}</Text>
+      {
+        x?.hpp != 0 &&
+        <Text allowFontScaling={false} style={styleId_ZU9o1b}>{esp.lang("mart/dc_order_detail_finish_item", "average_price")}{LibUtils.money(x?.hpp)}/{x?.pcs_label}</Text>
+      }
+    </View>
+  )
+
+  function setPrice(price: string, item: any) {
+    let _price: any = arrayPrice.get() || []
+    let findIndex = _price.findIndex((x: any) => x.id == item?.id)
+
+    if (findIndex != -1) {
+      _price = LibObject.set(_price, price)(findIndex, 'price')
+    } else {
+      _price = LibObject.push(_price, { ...item, price: price })()
+    }
+    arrayPrice.set(_price)
+  }
+
+  return (
+    <View style={styleId_Zt5Qnh}>
+      <View style={styleId_1fmvBo} >
+        <LibPicture source={{ uri: props?.image }} style={styleId_Z1Qx5aC} />
+        <View style={styleId_14tcJb} >
+          <Text allowFontScaling={false} style={styleId_Z1U8tI3}>{props?.name}</Text>
+          <Text allowFontScaling={false} style={styleId_1dNs3E}>{props?.qty} x {LibUtils.money(props?.price)}</Text>
+        </View>
+      </View>
+
+      {
+        props.saleByItems == 1 ?
+          <View style={styleId_2tlMHb}>
+            <Text allowFontScaling={false} style={styleId_Z1U8tI3}>{esp.lang("mart/dc_order_detail_finish_item", "product_in_bundle")}</Text>
+            {
+              props?.options_bundling?.map?.(renderOptionsBundling)
+            }
+          </View>
+          :
+          <View style={{ marginTop: 10 }}>
+            <Text allowFontScaling={false} style={styleId_Z1U8tI3}>{esp.lang("mart/dc_order_detail_finish_item", "detail_product")}</Text>
+            <View style={styleId_1RR2V9}>
+              {
+                props?.options?.map?.(renderOptions)
+              }
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={styleId_Z1BlvCJ} >
+                <Text allowFontScaling={false} style={styleId_Z25hGrC}>{esp.lang("mart/dc_order_detail_finish_item", "purchase_price")}</Text>
+                <View style={styleId_Z1bqCSn}>
+                  {
+                    props?.options?.map?.(renderBuyPrice)
+                  }
+                </View>
+              </View>
+              {
+                props?.options?.some?.((x: any) => Number(x?.hpp) != 0) &&
+                <View style={styleId_Z1BlvCJ} >
+                  <Text allowFontScaling={false} style={styleId_Z25hGrC}>{esp.lang("mart/dc_order_detail_finish_item", "average_purchase_price")}</Text>
+                  <View style={styleId_Z1bqCSn}>
+                    {
+                      props?.options?.map?.(renderHpp)
+                    }
+                  </View>
+                </View>
+              }
+            </View>
+            {
+              props?.options?.some?.((x: any) => !x.price) ?
+                <MarketNotice mode="warning" text={esp.lang("mart/dc_order_detail_finish_item", "Sales_Price_Unregulated")} containerStyle={styleId_200b1} textStyle={styleId_Z1Ncfmd} />
+                :
+                <View style={styleId_27qjLw} >
+                  <Text allowFontScaling={false} style={styleId_Z25hGrC}>{esp.lang("mart/dc_order_detail_finish_item", "sell_price")}</Text>
+                  <View style={styleId_Z1bqCSn}>
+                    {
+                      props?.options?.map?.(renderSalePrice)
+                    }
+                  </View>
+                </View>
+            }
+          </View>
+      }
+
+      {
+        props?.sku != '' &&
+        <View style={styleId_Z1hiKpT} >
+          <View style={{ flex: 1 }} >
+            <LibTextstyle textStyle={'callout'} text={esp.lang("mart/dc_order_detail_finish_item", "sell_bundless")} style={styleId_Z2mCmbA} />
+            <LibTextstyle textStyle={'caption2'} text={esp.lang("mart/dc_order_detail_finish_item", "active_sell_bundless")} style={styleId_LyHun} />
+          </View>
+          <MarketToggle value={!props.saleByItems} onChangeValue={() => { props.onChangeSaleByItems(props.saleByItems == 1 ? 0 : 1) }} type={'success'} />
+        </View>
+      }
+      {
+        !props.saleByItems &&
+        <TouchableOpacity onPress={() => {
+          MarketSlidingupProperty.add(
+            <View style={styleId_Z1zxfOi} >
+              <View style={styleId_12lRXe} >
+                <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
+                  <LibIcon name="close" size={20} />
+                </TouchableOpacity>
+                <Text allowFontScaling={false} style={styleId_Z2qGFbg}>{esp.lang("mart/dc_order_detail_finish_item", "set_selling_price")}</Text>
+              </View>
+              <View style={styleId_Z27iAru} >
+                {
+                  props?.options?.map?.(renderOptionsPrice)
+                }
+                <MartButton textStyle={styleId_Z2mCmbA} onPress={() => {
+                  props.onSavePrice(arrayPrice.get())
+                  MarketSlidingupProperty.hide()
+                }} text={esp.lang("mart/dc_order_detail_finish_item", "save")} />
+              </View>
+            </View>
+          )
+          MarketSlidingupProperty.show()
+        }} style={styleId_Z23jhtG} >
+            <Text allowFontScaling={false} style={styleId_ZdkyNI}>{props?.options?.some?.((x: any) => !x.price) ? esp.lang("mart/dc_order_detail_finish_item", "set_selling_price") : esp.lang("mart/dc_order_detail_finish_item", "change_selling_price")}</Text>
+        </TouchableOpacity>
+      }
+    </View>
+  )
+}
+const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
+const styleId_Z1U8tI3: any = { fontSize: 12, fontFamily: 'Arial' }
+const styleId_1j79ff: any = { fontSize: 12, fontFamily: 'ArialBold', marginRight: 15, lineHeight: 16 }
+const styleId_Z16b9Of: any = { fontSize: 12, fontFamily: 'ArialBold', marginRight: 20, lineHeight: 16 }
+const styleId_1rPRB6: any = { marginVertical: 5 }
+const styleId_2hKz3I: any = { fontFamily: 'Arial', fontSize: 12, color: '#888' }
+const styleId_FcJqW: any = { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderBottomColor: '#f1f1f1', marginBottom: 10 }
+const styleId_Z1lH1fn: any = { fontFamily: 'Arial', fontSize: 16, marginRight: 10 }
+const styleId_2n5q9N: any = { flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontFamily: 'Arial', fontSize: 16 }
+const styleId_1Skf0e: any = { fontFamily: 'Arial', fontSize: 10, marginTop: -5 }
+const styleId_ZU9o1b: any = { fontFamily: 'Arial', fontSize: 10 }
+const styleId_Zt5Qnh: any = { marginHorizontal: 15, marginTop: 10, marginBottom: 5, padding: 10, borderRadius: 5, backgroundColor: 'white', ...LibStyle.elevation(3) }
+const styleId_Z1Qx5aC: any = { backgroundColor: '#f1f1f1', width: 50, height: 50, borderRadius: 5 }
+const styleId_14tcJb: any = { marginLeft: 10, flex: 1 }
+const styleId_1dNs3E: any = { fontSize: 14, fontFamily: 'ArialBold', marginTop: 5 }
+const styleId_2tlMHb: any = { marginTop: 10 }
+const styleId_1RR2V9: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5, flexWrap: 'wrap' }
+const styleId_Z1BlvCJ: any = { flex: 1, marginTop: 10, borderWidth: 1, borderStyle: 'dashed', borderColor: '#e6e6e6', padding: 6, borderRadius: 4 }
+const styleId_Z25hGrC: any = { fontSize: 10, fontFamily: 'Arial' }
+const styleId_Z1bqCSn: any = { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 5 }
+const styleId_200b1: any = { marginHorizontal: 0, marginTop: 10 }
+const styleId_Z1Ncfmd: any = { fontFamily: 'Arial' }
+const styleId_27qjLw: any = { marginTop: 10, borderWidth: 1, borderStyle: 'dashed', borderColor: '#e6e6e6', padding: 6, borderRadius: 4 }
+const styleId_Z1hiKpT: any = { flexDirection: "row", alignItems: 'center', marginHorizontal: 5, marginVertical: 10 }
+const styleId_Z2mCmbA: any = { fontSize: 14 }
+const styleId_LyHun: any = { color: "#888", lineHeight: 15 }
+const styleId_Z1zxfOi: any = { backgroundColor: "white", paddingVertical: 10, paddingHorizontal: 15, borderTopLeftRadius: 10, borderTopRightRadius: 10 }
+const styleId_12lRXe: any = { flexDirection: "row", alignItems: "center", marginBottom: 10 }
+const styleId_1hcIwd: any = { marginRight: 10 }
+const styleId_Z2qGFbg: any = { fontFamily: 'ArialBold', fontSize: 16 }
+const styleId_Z27iAru: any = { marginHorizontal: 17 }
+const styleId_Z23jhtG: any = { borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimaryMart, marginTop: 10, padding: 10, alignItems: 'center' }
+const styleId_ZdkyNI: any = { fontSize: 12, fontFamily: 'ArialBold' }

package/modules/mart/dc_order_detail_print.tsx

@@ -0,0 +1,125 @@
+// withHooks
+import { LibCapture } from 'esoftplay/cache/lib/capture/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLazy } from 'esoftplay/cache/lib/lazy/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPan } from 'esoftplay/cache/lib/pan/import';
+import { LibPrint } from 'esoftplay/cache/lib/print/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibWebview } from 'esoftplay/cache/lib/webview/import';
+import { MartButton } from 'esoftplay/cache/mart/button/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import esp from 'esoftplay/esp';
+
+import React, { useRef } from 'react';
+import { Linking, Platform, Pressable, ScrollView, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_order_detail_printArgs {
+  url: string,
+}
+export interface MartDc_order_detail_printProps {
+
+}
+export default function m(props: MartDc_order_detail_printProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const printOptions = useRef<LibSlidingup>(null)
+  const downloadView = useRef<LibWebview>(null)
+  const sizes = [
+    {
+      name: 'A4',
+      width: 680,
+      height: 963
+    },
+    {
+      name: 'A5',
+      width: 1020,
+      height: 1438
+
+    },
+    {
+      name: 'A6',
+      width: 1360,
+      height: 1917
+    }
+  ]
+
+  const renderSize = (size: any, idx: number) => (
+    <Pressable
+      key={size.name}
+      style={{ height: 70, width: 70, backgroundColor: 'white', borderRadius: 8, ...LibStyle.elevation(2), justifyContent: 'center', alignItems: 'center' }}
+      onPress={() => {
+        printOptions.current?.hide();
+        LibPrint.printAsync(url, size.width, size.height)
+      }} >
+      <LibIcon.AntDesign name={"file1"} size={30} color={'#888'} />
+      <LibTextstyle textStyle="body" text={size.name} style={{ color: '#888', marginTop: 5 }} />
+    </Pressable>
+  )
+
+  return (
+    <LibLazy>
+      <View style={{ flex: 1 }}>
+        <MartHeader
+          title={esp.lang("mart/dc_order_detail_print", "Print_Receipt_Code")}
+          rightView={() => (
+            <TouchableOpacity onPress={() => { LibCapture.capture(downloadView, esp.lang("mart/dc_order_detail_print", "Print_Receipt_Code")) }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
+              <LibIcon.AntDesign name='download' size={18} />
+            </TouchableOpacity>
+          )}
+          onlyBack
+        />
+        <ScrollView style={{ flex: 1 }} >
+          <LibPan>
+            <View pointerEvents='none' >
+              <LibWebview
+                ref={downloadView}
+                maxWidth={LibStyle.width}
+                scalesPageToFit
+                onFinishLoad={() => { }}
+                source={{ uri: url }}
+              />
+            </View>
+          </LibPan>
+        </ScrollView>
+        <MartButton text={esp.lang("mart/dc_order_detail_print", "print")}
+          icon={"printer"}
+          iconSize={24}
+          buttonStyle={{ margin: 20 }}
+          onPress={() => { printOptions.current?.show() }}
+        />
+
+        <LibSlidingup ref={printOptions} >
+          <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
+            <LibTextstyle textStyle='headline' text={esp.lang("mart/dc_order_detail_print", "paper_size")} style={{ textAlign: 'center' }} />
+            <View style={{ marginTop: 24, marginBottom: 10, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }} >
+              {
+                sizes.map(renderSize)
+              }
+            </View>
+            <View style={{ marginHorizontal: 20, borderRadius: 13, paddingVertical: 8, marginTop: 20, padding: 20, backgroundColor: '#f7f8f9' }} >
+              <LibTextstyle textStyle='caption1' text={esp.lang("mart/dc_order_detail_print", "Tips_for_printing_receipt_code")} />
+              <LibTextstyle
+                style={{ color: LibStyle.colorPrimary, marginTop: 10, textAlign: 'left' }}
+                text={esp.lang("mart/dc_order_detail_print", "tips1")}
+                textStyle="caption1" />
+              {
+                Platform.OS == 'ios' &&
+                <Pressable
+                  style={{ marginTop: 10 }}
+                  onPress={() => Linking.openURL('https://support.apple.com/id-id/HT201311')} >
+                  <LibTextstyle
+                    style={{ color: LibStyle.colorPrimary, textAlign: 'left' }}
+                    text={esp.lang("mart/dc_order_detail_print", "tips2")}
+                    textStyle="caption1" />
+                </Pressable>
+              }
+            </View>
+          </View>
+        </LibSlidingup>
+      </View>
+    </LibLazy>
+  )
+}

package/modules/mart/dc_order_detail_sticky.tsx

@@ -0,0 +1,266 @@
+// 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 { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibScroll_sticky } from 'esoftplay/cache/lib/scroll_sticky/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 { MartButton } from 'esoftplay/cache/mart/button/import';
+import { MartDc_detailArgs } from 'esoftplay/cache/mart/dc_detail/import';
+import { MartDc_order_detail_button_floating } from 'esoftplay/cache/mart/dc_order_detail_button_floating/import';
+import { MartDc_order_detail_buttons } from 'esoftplay/cache/mart/dc_order_detail_buttons/import';
+import { MartDc_order_detail_printArgs } from 'esoftplay/cache/mart/dc_order_detail_print/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { MartOrder_detail_statusArgs } from 'esoftplay/cache/mart/order_detail_status/import';
+import { MartSection_menu } from 'esoftplay/cache/mart/section_menu/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_order_detailArgs {
+  url: string
+}
+export interface MartDc_order_detailProps {
+
+}
+export default function m(props: MartDc_order_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useSafeState<any>()
+  const [paymentDetail, setPaymentDetail] = useSafeState<any>({})
+  const mainScroll = useRef<LibScroll>(null)
+
+  const renderProductItem = (item: any, i: number) => (
+    <View key={i} style={{ flex: 1, marginBottom: 10, flexDirection: 'row', alignItems: 'flex-start' }}>
+      <LibPicture source={{ uri: item?.image }} style={{ width: 50, height: 50, borderRadius: 4, marginRight: 10 }} />
+      <View style={{ flex: 2 }} >
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{item?.name}</Text>
+        <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{item?.qty + 'x ' + LibUtils.money(item?.price)}</Text>
+      </View>
+      <View style={{ alignItems: 'center' }} >
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070" }} >{LibUtils.money(item?.total)}</Text>
+      </View>
+    </View>
+  )
+
+  useEffect(() => {
+    getAll()
+  }, [])
+
+  function getAll() {
+    new LibCurl(url, null,
+      (res, msg) => {
+        setData(res)
+        getPaymentDetail(res.payment_url)
+      },
+      (msg) => {
+        LibDialog.warning(esp.lang("mart/dc_order_detail_sticky", "err"), msg?.message)
+      }, 1)
+    }
+    
+    function getPaymentDetail(url: string) {
+      new LibCurl(url, null,
+        (res, msg) => {
+        setPaymentDetail(res)
+      }, (msg) => {
+
+      }, 1)
+  }
+
+  if (!data) {
+    return <LibLoading />
+  }
+
+  return (
+    <LibScroll_sticky
+      onRefresh={getAll}
+      sticky_index={11}
+      headerView={
+        <MartHeader
+          onlyBack
+          title={esp.lang("mart/dc_order_detail_sticky", "distribution_center")}
+          subtitle={esp.lang("mart/dc_order_detail_sticky", "detail_order")}
+        />
+      }
+      buttonView={
+        <MartDc_order_detail_button_floating {...data} url={url} />
+      } >
+      <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", }} >
+        <View style={{ flex: 1 }} >
+          <LibTextstyle textStyle="caption1" text={esp.lang("mart/dc_order_detail_sticky", "order_status")} style={{}} />
+          <LibTextstyle textStyle="title1" text={data?.status_title} style={{ fontWeight: 'bold', fontSize: 18 }} />
+          {
+
+            (data.status == 2 || data.status == 8) && LibUtils.checkUndefined(data, 'status_detail.0') &&
+            <View style={{ flex: 1 }}  >
+              <LibTextstyle textStyle="callout" text={data?.status_detail[0]?.title} style={{ fontSize: 14 }} />
+            </View>
+          }
+        </View>
+        {
+          LibUtils.checkUndefined(data, 'status_detail.0') &&
+          <TouchableOpacity onPress={() => { LibNavigation.navigate<MartOrder_detail_statusArgs>('mart/order_detail_status', { status: data?.status, status_detail: data?.status_detail, data: data }) }} >
+            <LibTextstyle textStyle="footnote" text={esp.lang("mart/dc_order_detail_sticky", "see")} style={{ color: LibStyle.colorPrimaryMart }} />
+          </TouchableOpacity>
+        }
+      </View>
+      <MartSection_menu title={esp.lang("mart/dc_order_detail_sticky", "Shipping_and_Billing_Address")} />
+      <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row" }} >
+        <View style={{ flex: 1 }} >
+          <LibTextstyle textStyle="callout" text={data?.shipping_address?.name} />
+          <LibTextstyle textStyle="footnote" text={data?.shipping_address?.address + '\n' + data?.shipping_address?.location_name + ' ' + data?.shipping_address?.zipcode + '\n' + data?.shipping_address?.phone} style={{ marginTop: 5, color: "#888" }} />
+        </View>
+        <TouchableOpacity onPress={() => {
+          LibUtils.copyToClipboard(data?.shipping_address?.name + '\n' + data?.shipping_address?.address + '\n' + data?.shipping_address?.location_name + ' ' + data?.shipping_address?.zipcode + '\n' + data?.shipping_address?.phone).then(() => LibToastProperty.show(esp.lang("mart/dc_order_detail_sticky", "success_copy")))
+        }} >
+          <LibTextstyle textStyle="footnote" text={esp.lang("mart/dc_order_detail_sticky", "copy")} style={{ color: LibStyle.colorPrimaryMart }} />
+        </TouchableOpacity>
+      </View>
+      <MartSection_menu title={esp.lang("mart/dc_order_detail_sticky", "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("mart/dc_order_detail_sticky", "purchasing_date")} textStyle="footnote" style={{}} />
+          <View style={{ flex: 1 }} />
+          <LibTextstyle text={data?.created} textStyle="footnote" style={{}} />
+        </View>
+        <MartSection_menu size={"line"} />
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }} >
+          <View style={{ alignItems: "center", flexDirection: "row" }} >
+            <LibTextstyle text={data?.invoice} textStyle="footnote" style={{}} />
+            <TouchableOpacity onPress={() => {
+              LibUtils.copyToClipboard(data?.invoice).then(() => {
+                LibToastProperty.show(esp.lang("mart/dc_order_detail_sticky", "success_copy"))
+              })
+            }} style={{ marginLeft: 5 }} >
+              <LibIcon name="content-copy" size={16} />
+            </TouchableOpacity>
+          </View>
+          <View style={{ flex: 1 }} />
+          {/* <TouchableOpacity onPress={() => { }} >
+                    <LibTextstyle text={"LIHAT"} textStyle="footnote" style={{ color: LibStyle.colorPrimaryMart }} />
+                  </TouchableOpacity> */}
+        </View>
+        {
+          data?.status > 3 && data?.is_dc == 1 && data?.url_spk &&
+          <MartButton
+            text={esp.lang("mart/dc_order_detail_sticky", "Print_Receipt_Code")}
+            textStyle={{ color: '#f1f1f1', fontSize: 16 }}
+            onPress={() => {
+              LibNavigation.navigate<MartDc_order_detail_printArgs>('mart/dc_order_detail_print', { url: data?.url_spk })
+            }} />
+        }
+      </View>
+
+      <MartSection_menu title={esp.lang("mart/dc_order_detail_sticky", "product")} />
+      <View style={{ paddingHorizontal: 17, paddingVertical: 10, backgroundColor: "white", borderRadius: 3 }} >
+        <View style={{ flexDirection: 'row', marginHorizontal: -17, paddingHorizontal: 17, paddingVertical: 10, marginTop: -10, borderBottomWidth: 1, borderBottomColor: "#eee" }} >
+          <LibPicture source={{ uri: data?.dc?.image }} style={{ width: 24, height: 24, borderRadius: 4 }} resizeMode="cover" />
+          <LibTextstyle textStyle={"callout"} text={data?.dc?.name} style={{ marginLeft: 10, flex: 1 }} />
+          <TouchableOpacity onPress={() => { LibNavigation.navigate<MartDc_detailArgs>('mart/dc_detail', { url: 'mitra/dc_detail?dc_id=' + data?.dc?.id }) }} >
+            <LibTextstyle textStyle="footnote" text={esp.lang("mart/dc_order_detail_sticky", "visit_store")} style={{ color: LibStyle.colorPrimaryMart }} />
+          </TouchableOpacity>
+        </View>
+        <View style={{ marginTop: 15 }} >
+          {
+            LibUtils.checkUndefined(data, 'product_list.0') && data?.product_list?.map(renderProductItem)
+          }
+        </View>
+      </View>
+
+      <MartSection_menu size={"small"} />
+      <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#eee" }} >
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }} >
+          <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "total_shopping")} textStyle="footnote" style={{}} />
+          <LibTextstyle text={LibUtils.money(data?.total)} textStyle="footnote" style={{}} />
+        </View>
+        {
+          data.fee > 0 &&
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, justifyContent: 'space-between' }} >
+            <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "charge_payment")} textStyle="footnote" style={{}} />
+            <LibTextstyle text={LibUtils.money(data?.fee)} textStyle="footnote" style={{}} />
+          </View>
+        }
+        {
+          data.v_code > 0 &&
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, justifyContent: 'space-between' }} >
+            <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "payment_code")} textStyle="footnote" style={{}} />
+            <LibTextstyle text={LibUtils.money(data?.v_code)} textStyle="footnote" style={{}} />
+          </View>
+        }
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, justifyContent: 'space-between' }} >
+          <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "total_payment")} textStyle="footnote" style={{}} />
+          <LibTextstyle text={LibUtils.money(Number(data?.total) + (Number(data.fee) || 0) + (Number(data.v_code || 0)))} textStyle="footnote" style={{}} />
+        </View>
+
+        {
+          data?.is_dc == 1 &&
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "fee_services")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(data?.fee_service)} textStyle="footnote" style={{}} />
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={esp.lang("mart/dc_order_detail_sticky", "Funds_to_be_Received")} textStyle="footnote" style={{}} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(Number(data?.total) - Number(data?.fee_service || 0))} textStyle="footnote" style={{}} />
+            </View>
+          </>
+        }
+        {
+          data?.refund_status > 0 &&
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+              <LibTextstyle text={data?.refund_status == 1 ? esp.lang("mart/dc_order_detail_sticky", "refund_in_order") : data?.refund_status == 3 ? esp.lang("mart/dc_order_detail_sticky", "request_denied") : esp.lang("mart/dc_order_detail_sticky", "refund")} textStyle="footnote" style={{ color: LibStyle.colorRed }} />
+              <View style={{ flex: 1 }} />
+              <LibTextstyle text={LibUtils.money(data?.refund)} textStyle="footnote" style={{ color: LibStyle.colorRed }} />
+            </View>
+            {
+              data?.refund_notes != "" &&
+              <LibTextstyle text={data?.refund_notes} textStyle="caption2" style={{ color: "#999" }} />
+            }
+          </>
+        }
+      </View>
+      <MartSection_menu title={esp.lang("mart/dc_order_detail_sticky", "payment_method")} />
+      <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 12, marginBottom: 5 }} >
+        <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>
+        {
+          LibUtils.checkUndefined(paymentDetail, "params.expired") && data.is_dc != 1 && data.status == 1 &&
+          <>
+            <LibTextstyle textStyle={"footnote"} text={paymentDetail?.params?.va_no ? esp.lang("mart/dc_order_detail_sticky", "virtual_account_number") : esp.lang("mart/dc_order_detail_sticky", "billing_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("mart/dc_order_detail_sticky", "success_copy")))
+                }} >
+                <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
+                <LibTextstyle textStyle={"footnote"} text={esp.lang("mart/dc_order_detail_sticky", "copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
+              </TouchableOpacity>
+            </View>
+            <LibTextstyle textStyle={"footnote"} text={esp.lang("mart/dc_order_detail_sticky", "check_every_10_min")} 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("mart/dc_order_detail_sticky", "payment_instruction")}</Text>
+            </TouchableOpacity>
+          </>
+        }
+      </View>
+      <MartDc_order_detail_buttons {...data} url={url} />
+    </LibScroll_sticky>
+  )
+}