esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/merchant/detail.tsx

@@ -0,0 +1,64 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentSection } from 'esoftplay/cache/component/section/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface MerchantDetailProps {
+
+}
+export default function m(props: MerchantDetailProps): any {
+
+  const [result, setResult] = useSafeState<any>()
+
+
+  function loadData(): void {
+    const url = LibNavigation.getArgs(props, 'url')
+    if (url) {
+      new LibCurl(url, null,
+        (res, msg) => {
+          setResult(res)
+        },
+        (msg) => {
+          LibDialog.warning(esp.lang("merchant/detail", "err_loa"), msg?.message)
+        })
+    }
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  if (!result) return <LibLoading />
+  return (
+    <View style={{ flex: 1 }} >
+      <ComponentHeader title={esp.lang("merchant/detail", "header")} subtitle={result.title} />
+      <LibScroll>
+        <View style={{ margin: 20, flexDirection: 'row', width: LibStyle.width - 40 }}>
+          <LibPicture source={{ uri: result.image }} style={{ width: 79, height: 79, borderRadius: 40 }} />
+          <View style={{ marginLeft: 20 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#70472b" }}>{result.title}</Text>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 }}>{result.address}</Text>
+            <View style={{ width: LibStyle.width - 140, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#d0d0d0", marginTop: 4 }}>{result.location_name}</Text>
+            </View>
+          </View>
+        </View>
+        <ComponentSection text={esp.lang("merchant/detail", "product")} textColor={LibStyle.colorRed} />
+        <View />
+      </LibScroll>
+    </View >
+  )
+}

package/modules/merchant/detail_coupon.tsx

@@ -0,0 +1,115 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
+
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface MerchantDetail_couponProps {
+
+}
+export default function m(props: MerchantDetail_couponProps): any {
+  moment().locale('id')
+  const url = LibNavigation.getArgs(props, "url")
+  const id_voucher = LibNavigation.getArgs(props, 'id_voucher')
+  const title = LibNavigation.getArgs(props, 'title')
+  const [countAtDate, setCountAtDate] = useSafeState<any>([])
+
+
+  function compressArray(original: string[]): any[] {
+    let compressed = [];
+    let copy = [...original]
+    for (let i = 0; i < original.length; i++) {
+      let myCount = 0;
+      for (let w = 0; w < copy.length; w++) {
+        if (original[i] == copy[w]) {
+          myCount++;
+          delete copy[w];
+        }
+      }
+      if (myCount > 0) {
+        let a: any = {};
+        a.value = original[i];
+        a.count = myCount;
+        compressed.push(a);
+      }
+    }
+    return compressed;
+  };
+
+
+  const post = {
+    id: id_voucher
+  }
+  let lastDate = ''
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={title} />
+      <View>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {
+            countAtDate.map((item: any, i: number) => {
+              return (
+                <View key={i} style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4, marginRight: 4, padding: 4, alignContent: 'center', alignItems: 'center', justifyContent: 'center', height: 50, backgroundColor: LibStyle.colorBlue }}>
+                  <Text allowFontScaling={false} style={{ color: '#fff', fontWeight: 'bold' }} >{moment(item.value).localeFormat("DD MMM YYYY")}</Text>
+                  <Text allowFontScaling={false} style={{ color: '#fff', fontWeight: 'bold' }} >{item.count + " "}</Text>
+                </View>
+              )
+            })
+          }
+        </ScrollView>
+      </View>
+      <LibInfinite
+        key={url}
+        onDataChange={(data: any) => {
+          lastDate = ''
+          setCountAtDate(compressArray(data.map((item: any, i: number) => item.created.substr(0, 10))))
+        }}
+        url={url}
+        post={post}
+        renderItem={(item, i) => {
+          const showDate = lastDate != moment(item.created).localeFormat("DD MMMM YYYY")
+          lastDate = moment(item.created).localeFormat("DD MMMM YYYY")
+          return (
+            <>
+              {
+                showDate &&
+                <View style={{ backgroundColor: '#f1f2f3', padding: 10 }} >
+                  <Text allowFontScaling={false} style={{ marginTop: 6, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9f9f9f" }}>{moment(item.created).localeFormat("DD MMMM YYYY")}</Text>
+                </View>
+              }
+
+              <ComponentTouchable onPress={() => {
+                // LibNavigation.navigate("user/transaction_detail", { url: item.url_detail })
+              }}>
+                <View style={{ marginBottom: 0, borderBottomColor: '#f1f2f3', borderBottomWidth: 1, padding: 10, borderRadius: 8, backgroundColor: '#fff' }}>
+                  <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: "wrap", marginTop: 6, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{item.voucher_title}</Text>
+                  <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: "wrap", marginTop: 4, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>Kupon Dari {item.name}</Text>
+                  <View style={{ marginTop: 6, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                    <View style={{ flex: 2 }}>
+                      <Text allowFontScaling={false} style={{ marginRight: 30, fontFamily: "Arial", fontSize: 13, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorGreen }}>{item.is_credit == 1 ? '+' : '-'} {LibUtils.money(item.voucher_amount)}</Text>
+                    </View>
+                    <View style={{ flex: 2, alignContent: 'flex-end', alignItems: 'flex-end' }}>
+                      <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode={"middle"} style={{ fontWeight: 'bold', fontFamily: "Arial", fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("merchant/detail_coupon", "cashier", item?.cashier_name)}</Text>
+                    </View>
+                  </View>
+                </View>
+              </ComponentTouchable>
+
+            </>
+          )
+        }
+        }
+      />
+    </View>)
+}

package/modules/merchant/edit.tsx

@@ -0,0 +1,271 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentCircle } from 'esoftplay/cache/component/circle/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibInput_circle2 } from 'esoftplay/cache/lib/input_circle2/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import MapView, { Marker } from 'react-native-maps';
+
+
+
+export interface MerchantEditProps {
+
+}
+export default function m(props: MerchantEditProps): any {
+  let data = LibNavigation.getArgs(props, 'data')
+  const [location, setLocation] = useSafeState<any>()
+  const [region, setRegion] = useSafeState<any>()
+  const [image, setImage] = useSafeState<string>('')
+
+  useEffect(() => {
+    setLocation({ id: data.location_id, detail: data.location_name })
+    setImage(data.image)
+  }, [])
+
+  let inputTitle = React.useRef<LibInput_circle2>(null)
+  let inputDescription = React.useRef<LibInput_circle2>(null)
+  let inputAddress = React.useRef<LibInput_circle2>(null)
+  let inputCompany_phone = React.useRef<LibInput_circle2>(null)
+  let inputCompany_email = React.useRef<LibInput_circle2>(null)
+  let inputPassword = React.useRef<LibInput_circle2>(null)
+  let dialogEditImage = React.useRef<ComponentSlidingup>(null)
+  let dialogPassword = React.useRef<ComponentSlidingup>(null)
+
+  function pickLocation(): void {
+    LibNavigation.navigateForResult('user/location').then((loc) => {
+      setLocation(loc)
+      setRegion({
+        latitude: loc.latitude * 1,
+        longitude: loc.longitude * 1,
+        latitudeDelta: 0.009,
+        longitudeDelta: 0.009
+      })
+    })
+  }
+  function pickLatlong(): void {
+    LibNavigation.navigateForResult('component/map', { latlong: region.latitude + ',' + region.longitude }).then((latlong) => {
+      setRegion({
+        latitude: latlong.split(',')[0] * 1,
+        longitude: latlong.split(',')[1] * 1,
+        latitudeDelta: 0.009,
+        longitudeDelta: 0.009
+      })
+    })
+  }
+
+  function doEditMerchant(): void {
+    if (inputTitle.current!.getText() == '') {
+      LibToastProperty.show(esp.lang("merchant/edit", "name_empty"))
+      return
+    }
+    if (inputAddress.current!.getText() == '') {
+      LibToastProperty.show(esp.lang("merchant/edit", "address_empty"))
+      return
+    }
+    if (!location) {
+      LibToastProperty.show(esp.lang("merchant/edit", "location_empty"))
+      return
+    }
+    if (!region) {
+      LibToastProperty.show(esp.lang("merchant/edit", "location_empty"))
+      return
+    }
+    var post = {
+      pwd: inputPassword.current!.getText(),
+      title: inputTitle.current!.getText(),
+      description: inputDescription.current!.getText(),
+      address: inputAddress.current!.getText(),
+      location_id: location.id,
+      image: image,
+      location_latlong: region.latitude + ',' + region.longitude,
+      company_phone: inputCompany_phone.current!.getText(),
+      company_email: inputCompany_email.current!.getText().trim(),
+    }
+
+    if (inputPassword.current!.getText() !== '') {
+      LibProgress.show(esp.lang("merchant/edit", "wait"))
+      new LibCurl('shop/merchant_edit', post,
+        (res, msg) => {
+          LibProgress.hide();
+          LibDialog.info(esp.lang("merchant/edit", "res_ok"), msg);
+          LibNavigation.back();
+        }, (error) => {
+          LibProgress.hide();
+          LibDialog.warning(esp.lang("merchant/edit", "res_failed"), error?.message);
+        }, 1)
+    } else {
+      LibProgress.hide();
+      LibDialog.warning(esp.lang("merchant/edit", "err_pass"), esp.lang("merchant/edit", "err_pass_msg"));
+    }
+
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
+      <LibKeyboard_avoid style={{ flex: 1 }} >
+        <ComponentHeader title={data.title} />
+        <ScrollView showsVerticalScrollIndicator={false} >
+          <View style={[{ paddingTop: 0, padding: 15, margin: 15, backgroundColor: '#fff', borderRadius: 5 }, LibStyle.elevation(2)]}>
+            <ComponentLabel_input label={esp.lang("merchant/edit", "label_title")} mandatory={false} />
+            <LibInput_circle2
+              ref={inputTitle}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+              autoFocus
+              defaultValue={data.title}
+              onSubmitEditing={() => inputDescription.current!.focus()}
+              placeholder={esp.lang("merchant/edit", "title")}
+            />
+            <ComponentLabel_input label={esp.lang("merchant/edit", "logo")} />
+            <View style={{ marginTop: 8, flexDirection: 'row' }}>
+              {
+                image == "" ?
+                  <View style={{ width: 101, height: 101, borderRadius: 10, backgroundColor: '#f1f2f3' }} />
+                  :
+                  <LibPicture style={{ width: 101, height: 101, borderRadius: 10, backgroundColor: '#f1f2f3' }} source={{ uri: image }} />
+              }
+
+              <View style={{ marginLeft: 15, marginRight: 13, height: 101 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#cdcccc" }}>{esp.lang("merchant/edit", "max_size")}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a", marginTop: 4 }}>{esp.lang("merchant/edit", "bytes")}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#cdcccc", marginTop: 6 }}>{esp.lang("merchant/edit", "file_type")}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a", marginTop: 4 }}>{esp.lang("merchant/edit", "type")}</Text>
+                <ComponentButton
+                  label={esp.lang("merchant/edit", "change")}
+                  style={{ width: LibStyle.width * 0.5, height: 35, borderRadius: 17.5, backgroundColor: "#34a2ec", marginTop: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }}
+                  onPress={() => { dialogEditImage.current!.show() }} />
+              </View>
+            </View>
+            <ComponentLabel_input label={esp.lang("merchant/edit", "label_email")} mandatory={false} />
+            <LibInput_circle2
+              ref={inputCompany_email}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+              defaultValue={data.params.email}
+              returnKeyType='next'
+              placeholder={esp.lang("merchant/edit", "email")}
+            />
+            <ComponentLabel_input label={esp.lang("merchant/edit", "label_phone")} mandatory={false} />
+            <LibInput_circle2
+              ref={inputCompany_phone}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+              defaultValue={data.params.phone}
+              mask="#### #### #### ####"
+              keyboardType="numeric"
+              placeholder={esp.lang("merchant/edit", "phone")}
+            />
+            <ComponentLabel_input label={esp.lang("merchant/edit", "desc")} />
+            <LibInput_circle2
+              ref={inputDescription}
+              multiline={true}
+              placeholder={esp.lang("merchant/edit", "label_des")}
+              defaultValue={data.description}
+              onSubmitEditing={() => inputAddress.current!.focus()}
+              returnKeyType="next"
+              inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 150 }}
+              style={{ borderColor: '#c4c4c4', marginBottom: 20, marginTop: 8, marginRight: 13, height: 150, justifyContent: 'flex-start' }} />
+            <View style={{ backgroundColor: 'white', borderRadius: 5 }}>
+              <ComponentLabel_input label={esp.lang("merchant/edit", "label_add")} mandatory={false} />
+              <LibInput_circle2
+                ref={inputAddress}
+                style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+                returnKeyType='next'
+                defaultValue={data.address}
+                onSubmitEditing={() => inputCompany_phone.current!.focus()}
+                placeholder={esp.lang("merchant/edit", "address")}
+              />
+              <ComponentLabel_input label={esp.lang("merchant/edit", "label_location")} mandatory />
+              <ComponentTouchable onPress={pickLocation} >
+                <View style={[{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 5, backgroundColor: 'white', paddingRight: 12, paddingVertical: 12 }, LibStyle.elevation(0)]} >
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#e67e22", flex: 1 }} >{location && location.detail || esp.lang("merchant/edit", "select_location")}</Text>
+                  <LibPicture source={esp.assets('icons/ic_chevron_right.png')} style={{ height: 13, width: 13, resizeMode: 'contain' }} />
+                </View>
+              </ComponentTouchable>
+              {region &&
+                <View>
+                  <ComponentLabel_input label={esp.lang("merchant/edit", "point")} />
+                  <TouchableOpacity activeOpacity={1} onPress={pickLatlong} >
+                    <View style={{ backgroundColor: '#999', height: 150, marginBottom: 0, overflow: 'hidden', marginRight: 0, marginTop: 10 }} >
+                      <MapView
+                        region={region}
+                        key={JSON.stringify(region)}
+                        liteMode
+                        style={{ width: LibStyle.width - 32, height: 150, overflow: 'hidden' }} >
+                        {region &&
+                          <Marker
+                            coordinate={region}
+                            pinColor={LibStyle.colorPrimary}>
+                          </Marker>
+                        }
+                      </MapView>
+                      <LinearGradient
+                        colors={['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.2)']}
+                        start={[0, 1]}
+                        locations={[0.4, 1]}
+                        end={[1, 1]}
+                        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, height: 150 }}>
+                      </LinearGradient>
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              }
+            </View>
+            <ComponentButton label={esp.lang("merchant/edit", "save")} style={{ marginTop: 20 }} onPress={() => { dialogPassword.current!.show() }} />
+          </View>
+        </ScrollView>
+      </LibKeyboard_avoid>
+      <ComponentSlidingup ref={dialogEditImage}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingBottom: 17, paddingHorizontal: 19, }}>
+          <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("merchant/edit", "my_order")}</Text>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginBottom: 27 }}>
+            <ComponentCircle image={'icons/ic_camera.png'} color="#f39c12" title={esp.lang("merchant/edit", "cam")} onPress={() =>
+              LibImage.fromCamera().then((url) => {
+                dialogEditImage.current!.hide()
+                setImage(url)
+              })} />
+            <ComponentCircle image={'icons/ic_galery.png'} color="#3498db" title={esp.lang("merchant/edit", "galery")} onPress={() =>
+              LibImage.fromGallery().then((url:any) => {
+                dialogEditImage.current!.hide()
+                setImage(url)
+              })} />
+            <ComponentCircle image={'icons/ic_close_red.png'} color="#1abc9c" title={esp.lang("merchant/edit", "delete")} onPress={() => {
+              dialogEditImage.current!.hide()
+              setImage('')
+            }
+            } />
+          </View>
+        </View>
+      </ComponentSlidingup>
+      <ComponentSlidingup ref={dialogPassword}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingTop: 23, paddingBottom: 17, paddingHorizontal: 19, height: 170 }}>
+          <ComponentLabel_input label={esp.lang("merchant/edit", "lbl_pass")} mandatory mandatoryColor={'#d0021b'} />
+          <LibInput_circle2
+            ref={inputPassword}
+            style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+            secureTextEntry
+            placeholder={esp.lang("merchant/edit", "pass")}
+          />
+          <ComponentButton label={esp.lang("merchant/edit", "btn_save")} style={{ marginTop: 20 }} onPress={() => {
+            doEditMerchant()
+            dialogPassword.current!.hide()
+          }} />
+        </View>
+      </ComponentSlidingup>
+    </View>
+  )
+}

package/modules/merchant/index.tsx

@@ -0,0 +1,50 @@
+// withHooks
+
+import { BigbangDummy_page } from 'esoftplay/cache/bigbang/dummy_page/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { MerchantItem } from 'esoftplay/cache/merchant/item/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface MerhantIndexProps {
+
+}
+export default function m(): any {
+  const [url, setUrl] = useSafeState<string>('shop/merchant')
+
+  function changeUrl(query: string): void {
+    if (query != '')
+      setUrl('shop/merchant?title=' + query)
+    else
+      setUrl('shop/merchant')
+  }
+
+  return (
+    <>
+      <BigbangDummy_page />
+    </>
+
+
+
+  )
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader doSearch={(q) => { changeUrl(q) }} searchPlaceholder={esp.lang("merchant/index", "search")} />
+      <LibInfinite
+        style={{ marginHorizontal: 7.5 }}
+        numColumns={2}
+        key={url}
+        url={url}
+        renderItem={(item) =>
+          <MerchantItem {...item} onPress={() => LibNavigation.navigate('merchant/detail', { url: item.url })} />}
+      />
+    </View>
+  )
+}

package/modules/merchant/info.tsx

@@ -0,0 +1,107 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentRefresh_button } from 'esoftplay/cache/component/refresh_button/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketMerchant_register } from 'esoftplay/cache/market/merchant_register/import';
+import { MerchantMenu } from 'esoftplay/cache/merchant/menu/import';
+import { UseCurl } from 'esoftplay/cache/use/curl/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+
+export interface MerchantInfoProps {
+
+}
+export default function m(props: MerchantInfoProps): any {
+
+  const [data, setData] = useSafeState<any>(undefined)
+  const user = UserClass.state().get()
+  const [url, setUrl] = useSafeState<string>('product?merchant_id=' + user?.merchant_id)
+  const [curl, loading, error] = UseCurl()
+
+  function loadData(): void {
+    curl('shop/merchant_detail/' + user?.merchant_id, null, setData)
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  if (user?.merchant_id == 0) {
+    return (
+      <MarketMerchant_register />
+    )
+  }
+
+  if (!data) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={data?.title} />
+      <View style={[{ margin: 15, padding: 5, flexDirection: 'row', width: LibStyle.width - 30 }, LibStyle.elevation(2)]}>
+        <LibPicture style={{ width: 79, height: 79, borderRadius: 40 }} source={{ uri: data?.image }} />
+        <View style={{ marginLeft: 15, marginTop: 5, flex: 1 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginTop: 4 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#70472b", flex: 1 }}>{data?.title}</Text>
+          </View>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 6 }}>{data?.location_name}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 }}>{data && data?.params && data?.params.phone}</Text>
+        </View>
+      </View>
+      <View style={{ height: 60, margin: 12, marginTop: 0, borderRadius: 10, backgroundColor: "#fff9f9", flexDirection: 'row', alignItems: 'center' }} >
+        <ComponentTouchable onPress={() => { /* user && LibNavigation.navigate('merchant/menu_bigbank') */ }} style={{ flex: 1 }} >
+          <View style={{ flexDirection: 'row' }} >
+            <LibPicture style={{ height: 32, width: 32, marginLeft: 11, marginVertical: 10, resizeMode: 'contain' }} source={esp.assets('icons/ic_wallet_pocket.png')} />
+            <View style={{ marginLeft: 12, flex: 3, marginVertical: 10 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, color: "#9b9b9b" }} >{esp.lang("merchant/info", "saldo")}</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'flex-end' }} >
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 13, color: "#6c432c" }} >{LibUtils.money(user.saldo_merchant)}</Text>
+              </View>
+            </View>
+          </View>
+        </ComponentTouchable>
+        <ComponentRefresh_button
+          onPress={() => { UserProfileProperty.update() }}
+        />
+        <ComponentTouchable onPress={() => {
+          UserProfileProperty.isLogin(() => {
+            LibNavigation.navigate('withdraw/input', { from: 'merchant' })
+          })
+        }} >
+          <View style={{ width: 60, flex: 1, backgroundColor: "#fcf1f1", alignItems: 'center', justifyContent: 'center' }} >
+            <LibPicture style={{ height: 27, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/ic_wallet_withdraw.png')} />
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, textAlign: "center", color: "#6c432c", marginTop: 4 }} >{esp.lang("merchant/info", "withdraw")}</Text>
+          </View>
+        </ComponentTouchable>
+
+        <ComponentTouchable onPress={() => {
+          UserProfileProperty.isLogin(() => {
+            LibNavigation.navigate('merchant/list_transaksi')
+          })
+        }} >
+          <View style={{ borderTopRightRadius: 10, borderBottomRightRadius: 10, width: 60, flex: 1, backgroundColor: "#ffe1e1", alignItems: 'center', justifyContent: 'center' }} >
+            <LibIcon name="history" size={27} color={LibStyle.colorBrown} />
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, textAlign: "center", color: "#6c432c", marginTop: 4, flexWrap: 'wrap' }} >{esp.lang("merchant/info", "transaction")}</Text>
+          </View>
+        </ComponentTouchable>
+      </View>
+      <MerchantMenu data={data} />
+    </View>
+  )
+}

package/modules/merchant/item.tsx

@@ -0,0 +1,39 @@
+// withHooks 
+// noPage
+
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface MerchantItemProps {
+  id: string,
+  user_id: string,
+  title: string,
+  description: string,
+  image: string,
+  address: string,
+  location_id: string,
+  location_name: string,
+  location_latlong: string,
+  url: string,
+  onPress: () => void
+}
+const itemWidth = (LibStyle.width - 48) * 0.5
+export default function m(props: MerchantItemProps): any {
+  return (
+    <ComponentTouchable onPress={props.onPress} >
+      <View style={[{ height: 170, width: itemWidth, borderRadius: 10, backgroundColor: 'white', margin: 8, alignItems: "center" }, LibStyle.elevation(2)]} >
+        <LibPicture source={{ uri: props.image }} style={{ height: 80, width: 80, resizeMode: 'contain' }} />
+        <View style={{ paddingHorizontal: 8 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9b9b9b", marginTop: 10 }} numberOfLines={2} >{props.title}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, color: "#b8b8b8" }} numberOfLines={2} >{props.description}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 10, color: "#00b894", marginTop: 5 }} >{props.address + ' ' + props.location_name}</Text>
+        </View>
+      </View>
+    </ComponentTouchable>
+  )
+}