esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/market/home.tsx

@@ -0,0 +1,549 @@
+// withHooks
+import { BigbangEvent_item } from 'esoftplay/cache/bigbang/event_item/import';
+import { BigbangIndexProperty } from 'esoftplay/cache/bigbang/index/import';
+import { LibBlock } from 'esoftplay/cache/lib/block/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketCategory_hit } from 'esoftplay/cache/market/category_hit/import';
+import { MarketDevice_type } from 'esoftplay/cache/market/device_type/import';
+import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
+import { MarketHome_section_product } from 'esoftplay/cache/market/home_section_product/import';
+import { MarketInfo } from 'esoftplay/cache/market/info/import';
+import { MarketLoad_category } from 'esoftplay/cache/market/load_category/import';
+import { MarketProduct_discuss_topicProperty } from 'esoftplay/cache/market/product_discuss_topic/import';
+import { MarketProduct_item } from 'esoftplay/cache/market/product_item/import';
+import { MarketProduct_section } from 'esoftplay/cache/market/product_section/import';
+import { MarketRefresh_button } from 'esoftplay/cache/market/refresh_button/import';
+import { MarketSection } from 'esoftplay/cache/market/section/import';
+import { PpobMain_item } from 'esoftplay/cache/ppob/main_item/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import { ComponentHeader_home } from 'esoftplay/cache/component/header_home/import';
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+export interface MarketHomeProps {
+
+}
+
+const sliderHeight = 0.50 * LibStyle.width
+const cacheInfoMarket = useGlobalState(undefined)
+
+function Blocktitle(props: any) {
+  if (props.block.show_title == 1)
+    // return null
+    return (
+      <MarketSection
+        text={props?.block?.title}
+        textColor={props.color}
+        icon={(props?.block?.params?.more_module == '' || props?.block?.show_more != 1) ? undefined : 'icons/ic_btn_more_rounded.png'}
+        moreAction={() => props?.block?.params?.more_module == '' || props?.block?.show_more != 1 ? {} : LibNavigation.navigate(props?.block?.params?.more_module, { url: props?.block?.params?.more_url, title: props?.block?.title })}
+      />
+    )
+  else
+    return null
+}
+
+export function action(type: string) {
+  switch (type) {
+    case 'tab1':
+      BigbangIndexProperty.setTab(5)
+      break
+    case 'tab2':
+      BigbangIndexProperty.setTab(1)
+      break
+    case 'tab3':
+      BigbangIndexProperty.setTab(2)
+      break
+    case 'tab4':
+      LibToastProperty.show(esp.lang("market/home", "coming_soon"))
+      // BigbangIndexProperty.setTab(3)
+      break
+  }
+}
+
+const itemWidth = LibStyle.width / 5 - 10
+
+export default function m(props: MarketHomeProps): any {
+
+  const [data, setData] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const user = UserClass.state().useSelector(s => s)
+  const dimension = useMemo(() => MarketDevice_type(2, 4, 5), [])
+  const imgDimension = useMemo(() => (LibStyle.width - ((dimension + 1) * 10)) / dimension, [])
+  const [showPpobIcons, setShowPpobIcons] = useSafeState<any>(undefined)
+  const [height, setHeight] = useSafeState(1)
+
+
+  useEffect(() => {
+    loadData()
+    loadDataTopic?.()
+  }, [])
+
+
+
+  // ini untuk load data topic discuss
+  function loadDataTopic() {
+    new LibCurl('shop/product_list_detail_discussion_topic', null,
+      (res, msg) => {
+        MarketProduct_discuss_topicProperty?.state()?.set?.(res)
+      }, (msg) => {
+
+      }, 1
+    )
+  }
+
+  function loadData() {
+    new LibCurl('home_marketplace', null,
+      (res, msg) => {
+        setData(res)
+      }, (msg) => {
+        setError(msg)
+      }, 1
+    )
+  }
+
+  if (!data) {
+    return (
+      <View style={{ flex: 1 }}>
+        <LibStatusbar style="dark" />
+        <LibSkeleton>
+          <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT }} />
+          <View style={{ flexDirection: 'row' }}>
+            <LibSkeleton.Circle size={33} />
+            <LibSkeleton.BoxFlex size={33} />
+            <LibSkeleton.Box size={33} />
+            <LibSkeleton.Box size={33} />
+            <LibSkeleton.Box size={33} />
+          </View>
+          <LibSkeleton.BoxFull size={sliderHeight} />
+          <View style={{ flexDirection: 'row' }} >
+            <LibSkeleton.BoxHalf size={50} />
+            <LibSkeleton.Box size={50} />
+            <LibSkeleton.Box size={50} />
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 10 }}>
+            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
+            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
+            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
+            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
+            <View style={{ width: itemWidth - 10, height: itemWidth - 10, backgroundColor: 'white', borderRadius: 10, marginLeft: 10, marginRight: 10 }} />
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+            <LibSkeleton.BoxHalf size={20} />
+            <View style={{ flex: 1 }} />
+            <LibSkeleton.Circle size={26} />
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginLeft: 10 }} >
+            <View style={{ width: imgDimension, borderWidth: 1, marginRight: 10, marginBottom: 10, borderRadius: 10, overflow: 'hidden' }}>
+              <View style={{ width: imgDimension, height: imgDimension, backgroundColor: 'white' }} />
+              <View style={{ width: '60%', height: 15, borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
+              <View style={{ width: '50%', height: 20, borderRadius: 10, backgroundColor: 'white', margin: 10, marginTop: 5, marginBottom: 0 }} />
+              <LibIcon name="heart" style={{ marginHorizontal: 10, marginBottom: 10, alignSelf: 'flex-end' }} />
+            </View>
+            <View style={{ width: imgDimension, borderWidth: 1, marginRight: 10, marginBottom: 10, borderRadius: 10, overflow: 'hidden' }}>
+              <View style={{ width: imgDimension, height: imgDimension, backgroundColor: 'white' }} />
+              <View style={{ width: '60%', height: 15, borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
+              <View style={{ width: '50%', height: 20, borderRadius: 10, backgroundColor: 'white', margin: 10, marginTop: 5, marginBottom: 0 }} />
+              <LibIcon name="heart" style={{ marginHorizontal: 10, marginBottom: 10, alignSelf: 'flex-end' }} />
+            </View>
+          </View>
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <View style={{ position: 'relative', top: 0, left: 0, right: 0, backgroundColor: '#FFC523' }} >
+        <ComponentHeader_home onPress={() => { LibNavigation.navigate("search/index") }} />
+      </View>
+      <MarketLoad_category />
+      {
+        error ?
+          <MarketEmpty msg={error?.message} />
+          :
+          <LibScroll onRefresh={loadData} style={{ flex: 1 }} >
+            {
+              LibUtils.checkUndefined(data, "blocks.0") && data.blocks.map((block: any, i: number) => {
+                if (block.type == 'slider') {
+                  return (
+                    <View key={i.toString()} style={{ flex: 1 }} >
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <View style={{ height: sliderHeight, width: LibStyle.width }} >
+                        <LibBlock
+                          cache
+                          url={block.list_url}
+                          render={(block) => {
+                            return (
+                              <LibCarrousel
+                                delay={4000}
+                                style={{ height: sliderHeight, width: LibStyle.width }}
+                                autoplay
+                                bullets
+                                bulletStyle={{ width: 7, height: 7, backgroundColor: "#7e7e7e", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                                chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "white", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+                                bulletsContainerStyle={{ marginBottom: -15 }} >
+                                {
+                                  block.map((item1: any, i: number) => (
+                                    item1.url !== '' ?
+                                      <TouchableOpacity activeOpacity={1} key={i.toString()} onPress={() => {
+                                        {
+                                          item1.url !== '' &&
+                                            LibNavigation.navigate(item1.module, { url: item1.url, title: item1.title })
+                                        }
+                                      }}>
+                                        <LibPicture source={{ uri: item1.image }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover' }} />
+                                      </TouchableOpacity>
+                                      :
+                                      <LibPicture key={i.toString()} source={{ uri: item1.image }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover' }} />
+                                  ))
+                                }
+                              </LibCarrousel>
+                            )
+                          }} />
+                      </View>
+                    </View>
+                  )
+                } else if (block.type == 'banner') {
+                  return (
+                    <View key={i.toString()}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <TouchableOpacity activeOpacity={1} onPress={() => {
+                        LibNavigation.navigate(block.task_module, { url: block.task, title: block.title })
+                      }}>
+                        <LibPicture key={i.toString()} source={{ uri: block.image_background }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover', marginTop: 10 }} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                } else if (block.type == 'bbopay-ppob') {
+                  return (
+                    <View key={"home" + i.toString()}  >
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(block) => {
+                          return (
+                            <View style={{ marginRight: 10, flexDirection: 'row', alignItems: 'center' }} >
+                              <View
+                                onLayout={(e) => {
+                                  if (showPpobIcons == undefined)
+                                    setShowPpobIcons(e.nativeEvent.layout.width > LibStyle.width * 0.42)
+                                }}
+                                style={{ flex: 1, marginHorizontal: 10, marginTop: 10, marginBottom: 0, borderRadius: 10, backgroundColor: "#fff9f9", flexDirection: 'row', alignItems: 'center' }} >
+                                <TouchableOpacity activeOpacity={1} onPress={() => {
+                                  UserProfileProperty.isLogin(() => {
+                                    LibNavigation.navigate('user/menu_bigbank')
+                                  })
+                                }} style={{ flex: 1 }} >
+                                  <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+                                    <View>
+                                      <LibPicture style={{ height: 25, width: 25, marginLeft: 6, marginVertical: 10, resizeMode: 'contain' }} source={esp.assets('icons/ic_wallet_pocket.png')} />
+                                    </View>
+                                    <View style={{ marginLeft: 7, flex: 3, marginVertical: 10 }} >
+                                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, color: "#9b9b9b" }} >{esp.lang("market/home", "bbo_pay")}</Text>
+                                      {
+                                        user ?
+                                          <UserProfileProperty.Saldo />
+                                          :
+                                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, color: "#9b9b9b" }} >{esp.lang("market/home", "more_easy")}</Text>
+                                      }
+                                    </View>
+                                    {
+                                      user &&
+                                      <MarketRefresh_button onPress={() => { UserProfileProperty.update() }} />
+                                    }
+                                  </View>
+                                </TouchableOpacity>
+                                <TouchableOpacity onPress={() => {
+                                  UserProfileProperty.isLogin(() => {
+                                    LibNavigation.navigate('component/scanner', { fromPage: 'home' })
+                                  })
+                                }} style={{}} >
+                                  <View style={{ width: 34, flex: 1, backgroundColor: "#FF591E", alignItems: 'center', justifyContent: 'center', borderTopRightRadius: 10, borderBottomRightRadius: 10 }} >
+                                    <LibIcon name={"qrcode-scan"} color={"white"} />
+                                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, textAlign: "center", color: "white", marginTop: 4 }} >{esp.lang("market/home", "scan")}</Text>
+                                  </View>
+                                </TouchableOpacity>
+                              </View>
+                              {
+                                showPpobIcons == undefined || showPpobIcons == true ?
+                                  block.map((item: any, i: number) => (
+                                    <PpobMain_item id={item.id} key={i} image={item.image} module={item.module} title={item.title} url={item.url} columns={5} />
+                                  ))
+                                  :
+                                  showPpobIcons == false &&
+                                  <TouchableOpacity style={{ paddingHorizontal: 6, paddingTop: 15 }} onPress={() => { LibNavigation.navigate('ppob/menu') }}>
+                                    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                                      <LibPicture source={esp.assets('icons/ppob.png')} style={{ width: 35, height: 35 }} resizeMode="contain" />
+                                      <Text allowFontScaling={false} style={{ fontSize: 11, paddingTop: 5, textAlign: 'center', textAlignVertical: 'center' }} >{esp.lang("market/home", "digital")}</Text>
+                                    </View>
+                                  </TouchableOpacity>
+                              }
+                            </View>
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == "grid_slider") {
+                  return (
+                    <View key={"home" + i.toString()}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(block) => {
+                          const timing = [4600, 5200, 5800, 6400]
+                          return (
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 10 }} >
+                              {
+                                block.map((item: any, i: number) => (
+                                  <LibBlock
+                                    key={i}
+                                    url={item.list_url}
+                                    cache
+                                    render={(row) => (
+                                      <LibCarrousel
+                                        delay={timing[i]}
+                                        style={{ height: (LibStyle.width - 20) * 0.5 * 9 / 16, width: (LibStyle.width - 20) * 0.5 }}
+                                        autoplay
+                                        swipe={false}
+                                        bullets={false} >
+                                        {
+                                          row.map((item1: any, i: number) => (
+                                            (item1.url !== '' || item.action) ?
+                                              <Pressable
+                                                key={i.toString()}
+                                                onPress={() => {
+                                                  if (item?.action) {
+                                                    action(item.action)
+                                                    return
+                                                  }
+                                                  item1.url !== '' &&
+                                                    LibNavigation.navigate(item1.module, { url: item1.url, title: item1.title })
+                                                }}>
+                                                <LibPicture source={{ uri: item1.image }} style={{ height: (LibStyle.width - 20) * 0.5 * 9 / 16, width: (LibStyle.width - 20) * 0.5, resizeMode: 'cover' }} />
+                                              </Pressable>
+                                              :
+                                              <LibPicture key={i.toString()} source={{ uri: item1.image }} style={{ height: (LibStyle.width - 20) * 0.5 * 9 / 16, width: (LibStyle.width - 20) * 0.5, resizeMode: 'cover', backgroundColor: '#f1f1f1' }} />
+                                          ))
+                                        }
+                                      </LibCarrousel>
+                                    )}
+                                  />
+                                ))}
+                            </View>
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == 'grid') {
+                  return (
+                    <View key={i + 'p'}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(block) => {
+                          return (
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 10 }} >
+                              {
+                                block.map((item: any, i: number) => {
+                                  return (
+                                    <BigbangEvent_item
+                                      key={i + 'c'}
+                                      {...item}
+                                      image={item.image}
+                                      text={item.title !== '' && item.title}
+                                      onPress={() => {
+                                        {
+                                          item.url !== '' &&
+                                            LibNavigation.navigate(item.module, { url: item.url, title: item.title })
+                                        }
+                                      }} />
+                                  )
+                                })
+                              }
+                            </View>
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == 'product_list') {
+                  return (
+                    <View key={i.toString()}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(data: any, setBlock: any) => {
+                          return (
+                            <LibList
+                              data={data.list}
+                              style={{ marginHorizontal: 7, marginTop: 10 }}
+                              numColumns={dimension}
+                              renderItem={(block2, i) => {
+                                return (
+                                  <MarketProduct_item  {...block2} width={imgDimension}
+                                    onChangeWish={(wish) => {
+                                      setBlock((x: any) => LibObject.set(x, wish)('list', i, 'wishlist'))
+                                    }}
+                                  />
+                                )
+                              }}
+                              ListFooterComponent={
+                                (block.show_more == 1 && block.params.more_module != '' && block.params.more_url != '') ?
+                                  <TouchableOpacity onPress={() => { LibNavigation.navigate(block?.params?.more_module, { url: block?.params?.more_url, title: block?.title }) }}>
+                                    <View style={{ marginVertical: 10, justifyContent: 'center', alignSelf: 'center', width: 104, height: 23, borderRadius: 11.5, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#e1e1e1" }}>
+                                      <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("market/home", "show_all")}</Text>
+                                    </View>
+                                  </TouchableOpacity>
+                                  : null
+                              }
+                            />
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == 'product_cat') {
+                  return (
+                    <View key={i.toString()}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(block1) => {
+                          return (
+                            <View style={{ marginTop: 10, flexDirection: 'row', marginLeft: 15 }} >
+                              {
+                                LibUtils.checkUndefined(block1, '0') && block1.map((item: any, i: number) => {
+                                  if (!item.id || item.id == '') {
+                                    return (
+                                      <TouchableOpacity key={i} onPress={() => LibNavigation.navigate(item.module, { url: item.url, title: item.title })} style={{ alignItems: 'center', marginRight: 5, width: itemWidth, }} >
+                                        <View style={{ borderWidth: 1, borderRadius: 15, borderColor: '#f5f5f5', padding: 10 }} >
+                                          <LibPicture source={{ uri: item?.image }} style={{ width: 25, height: 25 }} resizeMode={'contain'} />
+                                        </View>
+                                        <Text allowFontScaling={false} numberOfLines={2} style={{ flex: 1, marginTop: 10, fontFamily: 'Arial', fontSize: 11, textAlign: 'center' }} >{item.title}</Text>
+                                      </TouchableOpacity>
+                                    )
+                                  } else {
+                                    return (
+                                      <TouchableOpacity key={i} onPress={() => {
+                                        if (user?.id) {
+                                          MarketCategory_hit.categoryHit(item.id)
+                                        }
+                                        LibNavigation.navigate(item.module, { url: item.url, title: item.title })
+                                      }} style={{ alignItems: 'center', marginRight: 5, width: itemWidth, }} >
+                                        <View style={{ borderWidth: 1, borderRadius: 15, borderColor: '#f5f5f5', padding: 10 }} >
+                                          <LibPicture source={{ uri: item?.image }} style={{ width: 25, height: 25 }} resizeMode={'contain'} />
+                                        </View>
+                                        <Text allowFontScaling={false} numberOfLines={2} style={{ flex: 1, marginTop: 10, fontFamily: 'Arial', fontSize: 11, textAlign: 'center' }} >{item.title}</Text>
+                                      </TouchableOpacity>
+                                    )
+                                  }
+                                })
+                              }
+                            </View>
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == 'product_section') {
+                  return (
+                    <View key={i.toString()}>
+                      {
+                        block.image_title != "" ?
+                          <MarketHome_section_product block={block} />
+                          :
+                          <Blocktitle block={block} color={LibStyle.colorRed} />
+                      }
+                      <LibBlock
+                        cache
+                        url={block.list_url}
+                        render={(data: any, setData: any) => {
+                          return (
+                            <MarketProduct_section
+                              data={data}
+                              block={block}
+                              renderItem={(item1: any, i: number) => {
+                                return (
+                                  <MarketProduct_item key={i} {...item1} type="product_section" width={140} onChangeWish={(wish) => setData((x: any) => LibObject.set(x, wish)('list', i, 'wishlist'))} />
+                                )
+                              }} />
+                          )
+                        }}
+                      />
+                    </View>
+                  )
+                } else if (block.type == 'info') {
+                  return (
+                    <View key={i.toString()}>
+                      {
+                        cacheInfoMarket.get() != 'info' ?
+                          <View style={{ height: height != 1 ? height : undefined }} >
+                            <MarketInfo mode="info"
+                              text={block?.title}
+                              disabled={block?.task_module == '' && block?.task == ''}
+                              onClose={() => {
+                                // setData(LibObject.splice(data, i, 1)('blocks'))
+                                setHeight(0)
+                                cacheInfoMarket.set(block.type)
+                              }}
+                              onPress={() => {
+                                LibNavigation.navigate(block?.task_module, { url: block?.task, title: block?.title })
+                              }} />
+                          </View>
+                          :
+                          null
+                      }
+                    </View>
+                  )
+                } else if (block.type == 'button') {
+                  return (
+                    <View key={i.toString()}>
+                      <Blocktitle block={block} color={LibStyle.colorRed} />
+                      <View style={{ flex: 1, flexDirection: 'row', marginTop: 15, marginHorizontal: 15, height: 40, backgroundColor: '#ddf1ed', borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                        <Text allowFontScaling={false} style={{ flex: 1, marginLeft: 10, marginRight: 50, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "left", color: "#04b692" }}>{block.title}</Text>
+                        <TouchableOpacity onPress={() => {
+                          if (block.task_module != '') {
+                            LibNavigation.navigate(block.task_module, { url: block.task, title: block.title })
+                          } else {
+                            LibNavigation.navigate(block.params.more_module, { url: block.params.more_url, title: block.title })
+                          }
+                        }} style={{ marginRight: 10, height: 25, width: 50, backgroundColor: '#028b26', justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 4 }}>
+                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "left", color: "#fff" }}>{esp.lang("market/home", "show")}</Text>
+                        </TouchableOpacity>
+                      </View>
+                    </View>
+                  )
+                } else {
+                  return null
+                }
+              })
+            }
+          </LibScroll>
+      }
+    </View>
+  )
+}

package/modules/market/load_category.tsx

@@ -0,0 +1,25 @@
+// withHooks
+// noPage
+
+import { UsePaginate } from 'esoftplay/cache/use/paginate/import';
+import esp from 'esoftplay/esp';
+import { useEffect } from 'react';
+
+
+export interface MarketLoad_categoryArgs {
+
+}
+export interface MarketLoad_categoryProps {
+
+}
+export default function m(props: MarketLoad_categoryProps): any {
+  const [category, load, isLoading] = UsePaginate("shop/v2_product_cat")
+
+  useEffect(() => {
+    if (!isLoading) {
+      esp.modProp('market/product_category').state().set(category)
+    }
+  }, [isLoading])
+
+  return null
+}

package/modules/market/location.tsx

@@ -0,0 +1,74 @@
+//[moved] modify with usePaginate
+// withHooks
+
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketHeader } from 'esoftplay/cache/market/header/import';
+import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
+import esp from 'esoftplay/esp';
+
+import { LibLocation } from 'esoftplay/cache/lib/location/import';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Keyboard, Pressable, View } from 'react-native';
+
+
+export interface MarketLocationProps {
+
+}
+
+const _state = useGlobalState([], { persistKey: 'market_location', loadOnInit: true })
+
+export function state(): useGlobalReturn<any> {
+  return _state
+}
+
+export default function m(props: MarketLocationProps): any {
+  const [query, setQuery] = useSafeState("")
+  const inputQuery = useRef<LibInput>(null)
+  const key = LibNavigation.getResultKey(props)
+
+  useEffect(() => {
+    inputQuery?.current?.focus()
+    return () => LibNavigation.cancelBackResult(key)
+  }, [])
+
+  function renderRow(prop: any) {
+    return (
+      <View style={{ borderBottomWidth: 1, borderBottomColor: "#ededed" }} >
+        <Pressable
+          onPress={() => {
+            Keyboard?.dismiss?.()
+            LibNavigation.sendBackResult(prop, key)
+          }}
+          style={{ paddingHorizontal: 17, paddingVertical: 10 }} >
+          <LibTextstyle textStyle="body" text={prop?.title} />
+          <LibTextstyle textStyle="footnote" text={prop?.detail} style={{ color: "#888" }} />
+        </Pressable>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "white" }} >
+      <MarketHeader leftIcon={{ name: "close", onPress: () => { LibNavigation.back() } }} title={esp.lang("market/location", "location")} />
+      <MarketInput_square
+        _ref={inputQuery}
+        autoFocus
+        placeholder={esp.lang("market/location", "search_placeholder")} onChangeText={(r) => LibUtils.debounce(() => setQuery(r), 500)} />
+
+        <LibLocation
+          key={query}
+          keyword={query}
+          location_type={"3"}
+          renderItem={renderRow}
+          keyboardShouldPersistTaps="handled"
+        />
+
+    </View>
+  )
+}
+