esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/mart/product_list.tsx

@@ -0,0 +1,247 @@
+// withHooks
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { MartProduct_detailArgs } from 'esoftplay/cache/mart/product_detail/import';
+import { MartProduct_item } from 'esoftplay/cache/mart/product_item/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
+
+import React, { useEffect, useRef } from 'react';
+import { Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartProduct_listArgs {
+  url: string,
+  title?: string
+}
+export interface MartProduct_listProps {
+
+}
+const subs = useGlobalSubscriber()
+export function subscribe(): UseSubscribeReturn {
+  return subs
+}
+const renderSkeleton = (x: any, i: number) => (
+  <View key={i}>
+    <View style={{ flexDirection: 'row', margin: 15 }}>
+      <View style={{ width: 80, height: 80, borderRadius: 5, backgroundColor: 'white' }} />
+      <View style={{ flex: 1, marginLeft: 10, justifyContent: 'space-between' }}>
+        <View style={{ width: '60%', height: 18, borderRadius: 10, backgroundColor: 'white' }} />
+        <View style={{ width: '40%', height: 18, borderRadius: 10, backgroundColor: 'white' }} />
+      </View>
+      <View style={{ width: '20%', height: 18, borderRadius: 10, backgroundColor: 'white' }} />
+    </View>
+    <View style={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 15, borderBottomWidth: 0.5, paddingBottom: 15 }}>
+      <View style={{ borderWidth: 1, flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
+        <View style={{ width: '50%', height: 18, borderRadius: 10, backgroundColor: 'white' }} />
+      </View>
+      <View style={{ borderWidth: 1, flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
+        <View style={{ width: '50%', height: 18, borderRadius: 10, backgroundColor: 'white' }} />
+      </View>
+    </View>
+  </View>
+)
+
+export default function m(props: MartProduct_listProps): any {
+  const { url, title } = LibNavigation.getArgsAll(props)
+
+  let keyword = useRef<string>('').current
+  let inputText = useRef<TextInput>(null)
+
+  const [_url] = useSafeState(url)
+  const [totalItem, settotalItem] = useSafeState<number>(0)
+  const [query, setQuery] = useSafeState('')
+  const [sort, setSort] = useSafeState('latest')
+  const [upData, setUpData] = useSafeState<any>()
+  const slideUp = useRef<LibSlidingup>(null)
+  const ref = useRef<LibInfinite>(null)
+
+  const _sort = ['latest', 'popular', 'best-seller']
+  const _sortTitle = [esp.lang("mart/product_list", "newest"), esp.lang("mart/product_list", "popular"), esp.lang("mart/product_list", "best_seller")]
+
+  useEffect(() => {
+    getTotalItem()
+    setUpData(undefined)
+  }, [_url, query, sort])
+
+  function getTotalItem() {
+    settotalItem(0)
+    new LibCurl(buildUrl(_url), null,
+      (res, msg) => {
+        settotalItem(res.total || 0)
+      }
+    )
+  }
+
+  function buildUrl(url: string): string {
+    if (sort != '') {
+      url += url.includes('?') ? '&' : '?'
+      url += 'sort=' + sort
+    }
+    if (query != '') {
+      url += url.includes('?') ? '&' : '?'
+      url += 'keyword=' + query
+    }
+    return url
+  }
+
+  subs.useSubscribe(() => {
+    ref.current?.loadData?.()
+  })
+
+  const renderProductItem = (item: any, i: number) => (
+    <MartProduct_item
+      key={i}
+      {...item}
+      onDelete={() => {
+        setUpData(LibObject.splice(upData, i, 1)())
+      }}
+      onPress={() => { LibNavigation.navigate<MartProduct_detailArgs>('mart/product_detail', { url: 'mitra/product_detail?id=' + item.id }) }} />
+  )
+
+  const renderSortItem = (item: any, i: number) => (
+    <TouchableOpacity key={i} onPress={() => {
+      setSort(item)
+      slideUp.current?.hide()
+    }} style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }} >
+      <LibIcon name={item == sort ? "radiobox-marked" : "radiobox-blank"} color={LibStyle.colorPrimaryMart} style={{ marginRight: 15 }} />
+      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{_sortTitle[i]}</Text>
+    </TouchableOpacity>
+  )
+
+  return (
+    <View style={{ flex: 1 }} >
+      <MartHeader title={title || esp.lang("mart/product_list", "product_list")}
+        leftIcon={{ name: "arrow-left", onPress: () => LibNavigation.back() }}
+        rightView={() => (
+          <TouchableOpacity onPress={() => {
+            MarketSlidingupProperty.add(
+              <View style={{ backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }} >
+                <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 10 }} >
+                  <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={{ marginRight: 10 }} >
+                    <LibIcon name="close" size={20} />
+                  </TouchableOpacity>
+                  <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16 }}  >{esp.lang("mart/product_list", "add_new_product")}</Text>
+                </View>
+                <TouchableOpacity onPress={() => {
+                  LibNavigation.navigate('mart/scanner')
+                  // LibNavigation.navigate('mart/product_add1', { withBarcode: 1 })
+                  MarketSlidingupProperty.hide()
+                }} style={{ margin: 15, padding: 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }} >
+                  <LibPicture source={esp.assets('market/041-review.png')} style={{ height: 60, width: 60 }} />
+                  <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }} >{esp.lang("mart/product_list", "product_with_barcode")}</Text>
+                  <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#c5c5c5', textAlign: 'center' }} >{esp.lang("mart/product_list", "Add_a_product_with_a_barcode")}</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => {
+                  LibNavigation.navigate('mart/product_add', { withBarcode: 0 })
+                  MarketSlidingupProperty.hide()
+                }} style={{ margin: 15, padding: 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }} >
+                  <LibPicture source={esp.assets('market/034-store.png')} style={{ height: 60, width: 60 }} />
+                  <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }} >{esp.lang("mart/product_list", "product_witout_barcode")}</Text>
+                  <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#c5c5c5', textAlign: 'center' }} >{esp.lang("mart/product_list", "add_a_product_without_a_barcode")}</Text>
+                </TouchableOpacity>
+              </View>
+            )
+            MarketSlidingupProperty.show()
+          }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
+            <LibIcon name="plus" />
+          </TouchableOpacity>
+        )} />
+
+      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+        <View style={{ flex: 1, marginTop: 10, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', height: 35, borderRadius: 17.5, backgroundColor: "#f5f5f5" }} >
+          <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
+          <TextInput
+            ref={inputText}
+            style={{ fontFamily: "ArialBold", fontSize: 14, color: "#9e9e9e", flex: 1 }}
+            placeholder={esp.lang("mart/product_list", "search_product")}
+            onChangeText={(t) => { keyword = t }}
+            returnKeyType={'search'}
+            returnKeyLabel={esp.lang("mart/product_list", "search")}
+            placeholderTextColor={'#e5e5e5'}
+            onSubmitEditing={() => {
+              setQuery(keyword)
+            }}
+          />
+          {
+            query != '' &&
+            <TouchableOpacity activeOpacity={1} onPress={() => {
+              setQuery('')
+              inputText.current?.setNativeProps({ text: '' })
+              Keyboard.dismiss()
+            }} style={{ marginRight: 10 }} >
+              <LibIcon name="close" color="#e6e6e6" />
+            </TouchableOpacity>
+          }
+        </View>
+        <TouchableOpacity onPress={() => {
+          LibNavigation.navigate('mart/scanner')
+        }} style={{ marginTop: 8 }}>
+          <LibIcon name="barcode-scan" style={{ marginRight: 15 }} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', marginVertical: 10, flexWrap: 'wrap' }} >
+        <TouchableOpacity
+          onPress={() => { slideUp.current?.show() }}
+          style={{ marginRight: 10, borderRadius: 20, backgroundColor: '#fff', borderColor: '#ccc', borderWidth: 1, paddingVertical: 6, paddingHorizontal: 17, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' }} >
+          <LibIcon name='tune' size={16} color={'#4E4E4E'} style={{ marginRight: 5 }} />
+          <LibTextstyle textStyle='footnote' text={esp.lang("mart/product_list", "sort")} style={{ color: '#4E4E4E' }} />
+        </TouchableOpacity>
+      </View>
+
+      {
+        totalItem != 0 &&
+        <View style={{ marginHorizontal: 17, marginBottom: 10 }} >
+          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12, color: '#4E4E4E' }} >{totalItem + esp.lang("mart/product_list", "product")}</Text>
+        </View>
+      }
+
+      <LibInfinite
+        ref={ref}
+        key={buildUrl(_url)}
+        url={buildUrl(_url)}
+        style={{ marginHorizontal: 5 }}
+        keyExtractor={(item, i) => i.toString()}
+        onDataChange={(data: any, page: number) => { setUpData(data) }}
+        injectData={upData}
+        errorView={(eror: string) => (<MartEmpty message={eror} />)}
+        renderItem={renderProductItem}
+        LoadingView={
+          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
+            {
+              [1, 1, 1, 1].map(renderSkeleton)
+            }
+          </LibSkeleton>
+        }
+      />
+
+      <LibSlidingup ref={slideUp} >
+        <View style={{ backgroundColor: 'white', borderTopLeftRadius: 15, borderTopRightRadius: 15, paddingBottom: 25 }} >
+          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }} >
+            <TouchableOpacity onPress={() => { slideUp.current?.hide() }} >
+              <LibIcon name='close' />
+            </TouchableOpacity>
+            <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("mart/product_list", "sort")}</Text>
+          </View>
+          <View style={{ marginHorizontal: 10 }} >
+            {_sort.map(renderSortItem)}
+          </View>
+        </View>
+      </LibSlidingup>
+
+    </View>
+  )
+}

package/modules/mart/product_main.tsx

@@ -0,0 +1,260 @@
+// 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 { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/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 { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
+import { MartButton } from 'esoftplay/cache/mart/button/import';
+import { MartInput_label } from 'esoftplay/cache/mart/input_label/import';
+import { MartInput_square } from 'esoftplay/cache/mart/input_square/import';
+import { MartProduct_inputForm, MartProduct_inputProperty } from 'esoftplay/cache/mart/product_input/import';
+import { UseForm } from 'esoftplay/cache/use/form/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+
+export interface MartProduct_mainArgs {
+
+}
+export interface MartProduct_mainProps {
+  withBarcode?: number
+  id?: number | string
+  barcode?: any
+  canEdit?: boolean
+  buttonRequest?: boolean
+}
+export default function m(props: MartProduct_mainProps): any {
+  const [form, setForm, reForm, delForm, updForm] = UseForm<MartProduct_inputForm>("mart_product_input")
+  const [barcodeCode, setBarcodeCode] = useSafeState<any>()
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const [canEditData, setCanEditData] = useSafeState<boolean>(props.canEdit)
+
+  useEffect(() => {
+    if (props.barcode) {
+      setBarcodeCode(props.barcode)
+      loadDataProductFromBarcode(props.barcode)
+    }
+    if (props.id) {
+      MartProduct_inputProperty.getProductData(String(props.id)).then(x => {
+        updForm(MartProduct_inputProperty.buildForm(x))
+      })
+    }
+  }, [])
+
+  function deleteImage(url: string) {
+    LibDialog.warningConfirm(
+      esp.lang("mart/product_main", "delete_this_picture"),
+      esp.lang("mart/product_main", "this_action_can_be_canceled"),
+      esp.lang("mart/product_main", "delete"), () => {
+        setForm("images")(LibUtils.checkUndefined(form, 'images.0') && form?.images?.filter((x) => x != url) || [])
+      }, esp.lang("mart/product_main", "cancel"), () => { })
+  }
+
+  function loadDataProductFromBarcode(barcode: string | number) {
+    LibProgress.show(esp.lang("mart/product_main", "Syncing_product_data"))
+    new LibCurl('mitra/upc_detail?barcode=' + barcode, null, (res, msg) => {
+      setResult(res)
+      setForm('saveProductBarcode')(0)
+      
+      let a = res.images.map((item: any) => item.image)
+      setForm('name')(res.title)
+      setForm('description')(res.description)
+      setForm('images')(a)
+      setForm('upc_id')(res.id)
+      setForm('package')(res?.package)
+      setForm('package_label')(res?.package_label)
+      LibProgress.hide()
+    }, (error) => {
+      LibProgress.hide()
+      setForm('saveProductBarcode')(1)
+      setError(error)
+      setForm('name')(undefined)
+      setForm('images')(undefined)
+    }, 1)
+  }
+
+  function imagePicker() {
+    MarketSlidingupProperty.add(
+      <View style={{ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 }} >
+        <View style={{ width: 40, height: 4, borderRadius: 2, backgroundColor: "#ccc", alignSelf: "center", margin: 10 }} />
+        <View style={[{ flexDirection: "row", padding: 20, justifyContent: "space-around" }, LibStyle.elevation(0)]} >
+          <View style={{ alignItems: "center" }} >
+            <TouchableOpacity
+              onPress={() => {
+                LibImage.fromCamera().then((x) => {
+                  if (Array.isArray(x)) {
+                    setForm("images")(LibObject.push(form.images, ...x)())
+                    MarketSlidingupProperty.hide()
+                  } else {
+                    setForm("images")(LibObject.push(form.images, x)())
+                    MarketSlidingupProperty.hide()
+                  }
+                })
+              }}
+              style={{ alignItems: "center", justifyContent: "center", ...LibStyle.elevation(0) }} >
+              <LibPicture source={esp.assets('market/ic_camera_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
+            </TouchableOpacity>
+            <LibTextstyle text={esp.lang("mart/product_main", "camera")} textStyle="footnote" style={{ textAlign: "center", color: "#888", marginTop: 5 }} />
+          </View>
+          <View style={{ alignItems: "center" }} >
+            <TouchableOpacity
+              onPress={() => {
+                LibImage.fromGallery().then((x) => {
+                  if (Array.isArray(x)) {
+                    setForm("images")(LibObject.push(form.images, ...x)())
+                    MarketSlidingupProperty.hide()
+                  } else {
+                    setForm("images")(LibObject.push(form.images, x)())
+                    MarketSlidingupProperty.hide()
+                  }
+                })
+              }}
+              style={{ alignItems: "center", justifyContent: "center" }} >
+              <LibPicture source={esp.assets('market/ic_gallery_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
+            </TouchableOpacity>
+            <LibTextstyle text={esp.lang("mart/product_main", "gallery")} textStyle="footnote" style={{ textAlign: "center", color: "#888", marginTop: 5 }} />
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  function sendRequestUpdate() {
+    // case 'upc_request': // request dari user GET:{"barcode"} POST:{"#title": "", "#description": "", "#images": "json images"}
+    let post = {
+      name: form?.name,
+      images: JSON.stringify(form?.images),
+      description: form?.description
+    }
+
+    LibDialog.warningConfirm(esp.lang("mart/product_main", "warning"), esp.lang("mart/product_main", "Would_you_like_to_apply_for_this_Product_Change??"), esp.lang("mart/product_main", "yes"), () => {
+      LibProgress.show(esp.lang("mart/product_main", "please_wait"))
+      new LibCurl('mitra/upc_request?barcode=' + form?.barcode, post, (res, msg) => {
+        LibProgress.hide()
+        LibDialog.info(esp.lang("mart/product_main", "information"), msg)
+        setCanEditData(true)
+        LibNavigation.back()
+      }, (error) => {
+        LibDialog.info(esp.lang("mart/product_main", "err"), error?.message)
+      }, 1)
+    }, esp.lang("mart/product_main", "no"), () => {
+
+    })
+
+  }
+
+  function renderImage(image: any) {
+    return (
+      <TouchableOpacity key={image} onPress={() => {
+        if (canEditData == false) {
+          deleteImage(image)
+        }
+      }} >
+        <LibPicture source={{ uri: image }} style={{ height: 85, width: 85, borderRadius: 10, marginRight: 10, marginTop: 10, backgroundColor: "#f1f2f3", borderColor: "#ddd", borderWidth: 1 }} />
+        {
+          canEditData == false &&
+          <LibIcon name="close-circle" size={17} color={"#aaa"} style={{ position: "absolute", top: 15, right: 15, ...LibStyle.elevation(2) }} />
+        }
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View>
+      {
+        props.withBarcode != 0 &&
+        <>
+          <MartInput_square
+            mandatory
+            editable={canEditData ? false : true}
+            inactive={canEditData ? true : false}
+            containerStyle={{ marginTop: 20, flex: 1 }}
+            label={esp.lang("mart/product_main", "barcode_code")}
+            onChangeText={(t) => {
+              setBarcodeCode(t)
+              loadDataProductFromBarcode(t)
+              setForm('barcode')(t)
+            }}
+            defaultValue={barcodeCode}
+          />
+          <LibTextstyle text={esp.lang("mart/product_main", "desc_barcode_code")} style={{ color: LibStyle.colorRed, marginHorizontal: 17 }} textStyle="caption1" />
+        </>
+      }
+
+
+      <View style={{ marginHorizontal: 17, marginTop: 10 }} >
+        <MartInput_label label={esp.lang("mart/product_main", "picture")} mandatory />
+        <View style={{ flexDirection: "row", flexWrap: "wrap" }} >
+          {LibUtils.checkUndefined(form, 'images.0') && form?.images?.map(renderImage)}
+          {
+            canEditData == false &&
+            <TouchableOpacity
+              onPress={() => {
+                imagePicker()
+                MarketSlidingupProperty.show()
+              }}
+              style={{ height: 85, width: 85, borderRadius: 10, marginRight: 10, marginTop: 10, backgroundColor: "#f1f2f3", borderColor: "#ddd", borderWidth: 1, justifyContent: "center", alignItems: "center" }} >
+              <LibIcon.SimpleLineIcons name="picture" color={"#aaa"} />
+            </TouchableOpacity>
+          }
+        </View>
+      </View>
+      <MartInput_square
+        mandatory
+        containerStyle={{ marginTop: 20 }}
+        editable={canEditData ? false : true}
+        inactive={canEditData ? true : false}
+        label={esp.lang("mart/product_main", "product_name")}
+        defaultValue={form?.name}
+        onChangeText={setForm("name")} />
+      <MartInput_square
+        mandatory
+        label={esp.lang("mart/product_main", "product_packaging")}
+        editable={canEditData ? false : true}
+        inactive={canEditData ? true : false}
+        defaultValue={form?.package_label}
+        onChangeText={setForm('package_label')} />
+      {
+        props.buttonRequest &&
+        <View style={{ marginBottom: 10, flex: 1, marginHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={{ width: props.buttonRequest && !canEditData ? (LibStyle.width / 2) - 20 : LibStyle.width - 30 }}>
+            <MartButton onPress={() => {
+              setCanEditData(canEditData ? false : true)
+            }} text={props.buttonRequest && !canEditData ? esp.lang("mart/product_main", "cancel") : esp.lang("mart/product_main", "Propose_Change_Product")}
+              colorBackground="#fff"
+              colorBorder={props.buttonRequest && !canEditData ? LibStyle.colorRed : LibStyle.colorPrimaryMart}
+              color={props.buttonRequest && !canEditData ? LibStyle.colorRed : LibStyle.colorPrimaryMart}
+            />
+          </View>
+          {
+            props.buttonRequest && !canEditData &&
+            <View style={{ width: (LibStyle.width / 2) - 20 }}>
+              <MartButton onPress={() => {
+                if (form) {
+                  sendRequestUpdate()
+                }
+              }} text={esp.lang("mart/product_main", "save")} />
+            </View>
+          }
+        </View>
+      }
+
+      {
+        result?.hasOwnProperty("point_mitra") && Number(result?.point_mitra) != 0 &&
+        <LibTextstyle text={esp.lang("mart/product_main", "get_point_for_selling_this_product", result?.point_mitra)} style={{ color: LibStyle.colorPrimaryMart, marginRight: 15, marginLeft: 15 }} textStyle="footnote" />
+      }
+
+    </View>
+  )
+}

package/modules/mart/product_search.tsx

@@ -0,0 +1,143 @@
+// withHooks
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useRef } from 'react';
+import { Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartProduct_searchArgs {
+  from: 'dc' | 'mitra'
+}
+export interface MartProduct_searchProps {
+
+}
+export default function m(props: MartProduct_searchProps): any {
+  const { from } = LibNavigation.getArgsAll(props)
+  let keyword = useRef<string>('').current
+  let inputText = useRef<TextInput>(null)
+  const [query, setQuery] = useSafeState('')
+
+  function renderItem(item: any, i: number) {
+    return (
+      <View key={i} style={styleId_22vP7d} >
+        <TouchableOpacity onPress={() => {
+          // LibNavigation.back()
+          if (from == 'dc') {
+            LibNavigation.navigate('mart/dc_product_check', { barcode: item.barcode })
+          } else {
+            LibNavigation.navigate('mart/product_check', { barcode: item.barcode })
+          }
+        }} activeOpacity={1} style={styleId_Z1IS0fI} >
+          <LibPicture source={{ uri: item?.image }} style={styleId_1loMei} />
+          <View style={styleId_ZEsW9C}>
+            <Text allowFontScaling={false} numberOfLines={2} style={styleId_Z1xmvrG} >{item.title} </Text>
+            <View style={styleId_Zrz44M}>
+              <LibIcon name="barcode" style={styleId_wxwT1} />
+              <Text allowFontScaling={false} style={styleId_Z4QTil} >{item.barcode} </Text>
+            </View>
+            <Text allowFontScaling={false} style={styleId_Z1r0pf7} >{item.description} </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  let no_sku = from == 'dc' ? '0' : '1'
+  function buildUrl(url: string): string {
+    if (query != '') {
+      url += url.includes('?') ? '&' : '?'
+      url += 'keyword=' + query
+    }
+    if (no_sku != '') {
+      url += url.includes('?') ? '&' : '?'
+      url += 'no_sku=' + no_sku
+    }
+    return url
+  }
+
+  return (
+    <View style={styleId_qpkod}>
+      <MartHeader onlyBack title={esp.lang("mart/product_search", "search_product")} />
+
+      <View style={styleId_152tku}>
+        <View style={styleId_Z2tC9WO} >
+          <LibPicture style={styleId_mL5OU} source={esp.assets('icons/ic_search.png')} />
+          <TextInput
+            ref={inputText}
+            autoFocus
+            style={styleId_1CNpGN}
+            placeholder={esp.lang("mart/product_search", "search_product_with_name_or_barcode")}
+            onChangeText={(t) => {
+              keyword = t
+            }}
+            returnKeyType={'search'}
+            returnKeyLabel={esp.lang("mart/product_search", "search")}
+            placeholderTextColor={'#e5e5e5'}
+            onSubmitEditing={() => {
+              setQuery(keyword)
+            }}
+          />
+          {
+            query != '' &&
+            <TouchableOpacity activeOpacity={1} onPress={() => {
+              setQuery('')
+              inputText.current?.setNativeProps({ text: '' })
+              Keyboard.dismiss()
+            }} style={{ marginRight: 10 }} >
+              <LibIcon name="close" color="#e6e6e6" />
+            </TouchableOpacity>
+          }
+        </View>
+        <TouchableOpacity onPress={() => {
+          setQuery(keyword)
+        }} style={styleId_Z1TQXHy}>
+          <LibIcon name="magnify" color="#fff" />
+        </TouchableOpacity>
+      </View>
+      {/* {
+        query == "" &&
+        <MartEmpty message={"Silahkan cari produk berdasarkan Nama Produk atau Kode Barcode"} />
+      } */}
+
+      <LibInfinite
+        url={"mitra/upc?keyword=" + encodeURI(query)}
+        // url={buildUrl('mitra/upc')}
+        
+        key={query}
+        keyExtractor={(t: any, i: number) => i.toString()}
+        filterData={(item, index, self) => (
+          index === self.findIndex((t) => (t.id === item.id && t.name === item.name))
+        )}
+        errorView={(error: any) => {
+          return (
+            <MartEmpty message={error} />
+          )
+        }}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}
+const styleId_22vP7d: any = { margin: 15, marginBottom: 0, backgroundColor: 'white', paddingBottom: 15, paddingRight: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }
+const styleId_Z1IS0fI: any = { flexDirection: 'row' }
+const styleId_1loMei: any = { width: 80, height: 80, borderRadius: 5 }
+const styleId_ZEsW9C: any = { marginLeft: 15, flex: 1 }
+const styleId_Z1xmvrG: any = { flexWrap: 'wrap', fontWeight: 'bold', fontFamily: 'Arial', fontSize: 16 }
+const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
+const styleId_wxwT1: any = { marginRight: 5 }
+const styleId_Z4QTil: any = { flexWrap: 'wrap', fontFamily: 'Arial', fontSize: 14 }
+const styleId_Z1r0pf7: any = { flexWrap: 'wrap', fontFamily: 'Arial', fontSize: 12, marginTop: 8 }
+const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
+const styleId_152tku: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }
+const styleId_Z2tC9WO: any = { marginRight: 10, flex: 1, marginTop: 10, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', height: 35, borderRadius: 17.5, backgroundColor: "#f5f5f5" }
+const styleId_mL5OU: any = { height: 15, width: 15, marginLeft: 6, marginRight: 6 }
+const styleId_1CNpGN: any = { fontFamily: "ArialBold", fontSize: 14, color: "#9e9e9e", flex: 1 }
+const styleId_Z1TQXHy: any = { borderRadius: 25, marginTop: 8, backgroundColor: LibStyle.colorPrimaryMart, marginRight: 10, padding: 5, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }