esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/mart/dc_detail.tsx

@@ -0,0 +1,277 @@
+// 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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketNotice } from 'esoftplay/cache/market/notice/import';
+import { MartDc_cartProperty } from 'esoftplay/cache/mart/dc_cart/import';
+import { MartDc_product_detailArgs } from 'esoftplay/cache/mart/dc_product_detail/import';
+import { MartDetail_search } from 'esoftplay/cache/mart/detail_search/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartSearchArgs } from 'esoftplay/cache/mart/search/import';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, Text, TouchableOpacity, View } from 'react-native';
+const AnimatedLibInfinite = Animated.createAnimatedComponent(LibInfinite)
+
+
+
+export interface MartDc_detailArgs {
+  url?: string,
+}
+export interface MartDc_detailProps {
+
+}
+const imgHeight = 0.50 * LibStyle.width
+
+export default function m(props: MartDc_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [animated, setAnimated] = useSafeState(new Animated.Value(0))
+  const [showSearch, setShowSearch] = useSafeState<boolean>(false)
+  const [counter, setCounter] = useSafeState(0)
+  const [upData, setUpData] = useSafeState<any>()
+  const [data, setData] = useSafeState<any>()
+
+  const bagCount = MartDc_cartProperty.countState().useSelector(s => s)
+
+
+  const searchOpacity = animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  })
+
+  let scrollY = useRef(new Animated.Value(0)).current
+
+  const headerColor = scrollY.interpolate({
+    inputRange: [0, 110],
+    outputRange: ['transparent', 'white'],
+    extrapolate: 'clamp'
+  })
+
+  const textHeader = scrollY.interpolate({
+    inputRange: [0, 110],
+    outputRange: ['transparent', '#000'],
+    extrapolate: 'clamp'
+  })
+
+  useEffect(() => {
+    getDcData()
+  }, [])
+
+  function getDcData() {
+    new LibCurl(url, null,
+      (res, msg) => {
+        setData(res)
+      }, (msg) => { }, 1
+    )
+  }
+
+  function openSearch() {
+    Animated.timing(animated, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      setShowSearch(true)
+    })
+  }
+
+  function closeSearch(): void {
+    Animated.timing(animated, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true
+    }).start(() => {
+      setShowSearch(false)
+    })
+  }
+
+  const renderItemSkeleton = (x: any, i: number) => (
+    <View key={i} style={{ margin: 15, marginBottom: 0, paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }} >
+      <View style={{ flexDirection: 'row' }} >
+        <View style={{ backgroundColor: 'white', width: 80, height: 80, borderRadius: 5 }} />
+        <View style={{ marginLeft: 10, marginRight: 5, flexDirection: 'row', flex: 1 }}>
+          <View style={{ justifyContent: 'space-between', flex: 1 }} >
+            <View style={{ width: '70%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+            <View style={{ width: '50%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+          </View>
+          <View style={{ width: '25%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+        </View>
+      </View>
+    </View>
+  )
+
+  if (!data) {
+    return (
+      <View style={{ flex: 1 }}>
+        <LibSkeleton backgroundStyle={{ flex: 1 }}>
+          <View style={{ width: LibStyle.width, height: imgHeight, backgroundColor: 'white' }} />
+          <View style={{ margin: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6', paddingBottom: 20 }} >
+            <View style={{ width: '70%', height: 20, backgroundColor: 'white', borderRadius: 10 }} />
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }} >
+              <LibIcon name="map-marker-outline" size={18} />
+              <View style={{ width: '70%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+            </View>
+            <View style={{ marginTop: 8, height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+          </View>
+          {
+            [1, 1, 1, 1].map(renderItemSkeleton)
+          }
+        </LibSkeleton>
+        <View style={{ position: 'absolute', flexDirection: 'row', alignItems: 'center', top: 0, paddingHorizontal: 15, paddingVertical: 10, paddingTop: LibStyle.STATUSBAR_HEIGHT + 10 }} >
+          <TouchableOpacity onPress={() => LibNavigation.back()} style={{ width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba('#000', 0.4) }}  >
+            <LibIcon.SimpleLineIcons name="arrow-left" size={15} color='white' />
+          </TouchableOpacity>
+          <View style={{ flex: 1 }} />
+          <View style={{ width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba('#000', 0.4) }}  >
+            <LibIcon.SimpleLineIcons name="magnifier" size={15} color='white' />
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  const renderItem = (item: any, i: number) => (
+    <View key={i} style={{ margin: 15, marginBottom: 0, backgroundColor: 'white', paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }} >
+      <TouchableOpacity onPress={() => { LibNavigation.navigate<MartDc_product_detailArgs>('mart/dc_product_detail', { url: item.url }) }} activeOpacity={1} style={{ flexDirection: 'row' }} >
+        <LibPicture source={{ uri: item?.image }} style={{ width: 80, height: 80, borderRadius: 5 }} />
+        <View style={{ marginLeft: 10, marginRight: 5, flex: 1 }} >
+          <View style={{ flexDirection: 'row', flex: 1 }}>
+            <View style={{ justifyContent: 'space-between', flex: 1 }} >
+              <Text allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={{ fontFamily: 'Arial', fontSize: 14, flex: 1 }} >{item?.name} </Text>
+              <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ fontFamily: 'Arial', fontSize: 12 }} >{item?.description}</Text>
+            </View>
+            <View style={{ paddingHorizontal: 5 }} >
+              <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold' }} >{LibUtils.money(item?.sale)}</Text>
+              {
+                item.price != item.sale &&
+                <Text allowFontScaling={false} style={{ textAlign: 'right', color: LibStyle.colorRed, textDecorationLine: 'line-through', textDecorationStyle: 'solid', fontSize: 12 }} >{LibUtils.money(item?.price)}</Text>
+              }
+            </View>
+          </View>
+          {
+            item.alert &&
+            <MarketNotice mode='danger' text={item.alert} containerStyle={{ marginHorizontal: 0 }} />
+          }
+        </View>
+      </TouchableOpacity>
+    </View>
+  )
+
+  const renderItemProductSkeleton = (x: any, i: number) => (
+    <View key={i} style={{ margin: 15, marginBottom: 0, paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }} >
+      <View style={{ flexDirection: 'row' }} >
+        <View style={{ backgroundColor: 'white', width: 80, height: 80, borderRadius: 5 }} />
+        <View style={{ marginLeft: 10, marginRight: 5, flexDirection: 'row', flex: 1 }}>
+          <View style={{ justifyContent: 'space-between', flex: 1 }} >
+            <View style={{ width: '70%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+            <View style={{ width: '50%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+          </View>
+          <View style={{ width: '25%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+        </View>
+      </View>
+    </View>
+  )
+
+  return (
+    <View style={{ flex: 1 }} >
+      <AnimatedLibInfinite
+        key={counter + 'key'}
+        onScroll={
+          Animated.event(
+            [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+            { useNativeDriver: false }
+          )
+        }
+        url={data?.url_products}
+        
+        ListHeaderComponent={
+          <>
+            <LibPicture source={{ uri: data?.image }} style={{ width: LibStyle.width, height: imgHeight }} />
+            <View style={{ margin: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6', paddingBottom: 20 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold' }} >{data?.name}</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }} >
+                <LibIcon name="map-marker-outline" size={18} />
+                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12, marginTop: 3 }} >{data?.location_name}</Text>
+              </View>
+              {
+                data?.description != null &&
+                <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: 'Arial', fontSize: 12 }} >{data?.description}</Text>
+              }
+            </View>
+          </>
+        }
+        errorView={(e: string) => (
+          <MartEmpty message={e} />
+        )}
+        keyExtractor={(item, i) => i.toString()}
+        onDataChange={(data: any, page: number) => { setUpData(data) }}
+        injectData={upData}
+        renderItem={renderItem}
+        LoadingView={
+          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
+            <View style={{ width: LibStyle.width, height: imgHeight, backgroundColor: 'white' }} />
+            <View style={{ margin: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6', paddingBottom: 20 }} >
+              <View style={{ width: '70%', height: 20, backgroundColor: 'white', borderRadius: 10 }} />
+              <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }} >
+                <LibIcon name="map-marker-outline" size={18} />
+                <View style={{ width: '70%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+              </View>
+              <View style={{ marginTop: 8, height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+            </View>
+            {
+              [1, 1, 1, 1].map(renderItemProductSkeleton)
+            }
+          </LibSkeleton>
+        }
+      />
+
+      <Animated.View style={{ position: 'absolute', flexDirection: 'row', alignItems: 'center', top: 0, paddingHorizontal: 15, paddingVertical: 10, paddingTop: LibStyle.STATUSBAR_HEIGHT + 10, backgroundColor: headerColor }} >
+        <TouchableOpacity onPress={() => LibNavigation.back()} style={{ width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba('#000', 0.4) }}  >
+          <LibIcon.SimpleLineIcons name="arrow-left" size={15} color='white' />
+        </TouchableOpacity>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <Animated.Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={{ fontSize: 16, fontFamily: 'Arial', fontWeight: 'bold', color: textHeader }} >{data?.name}</Animated.Text>
+        </View>
+        {
+          data?.url_share && data?.url_share != "" &&
+          <TouchableOpacity style={{ marginRight: 8, width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba('#000', 0.4) }} onPress={() => {
+            if (data?.url_share != "") {
+              LibUtils.share(data?.url_share)
+            }
+          }}>
+            <LibIcon.MaterialIcons name="share" color="#fff" size={18} />
+          </TouchableOpacity>
+        }
+        <TouchableOpacity onPress={() => { openSearch() }} style={{ width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba('#000', 0.4) }}  >
+          <LibIcon.SimpleLineIcons name="magnifier" size={15} color='white' />
+        </TouchableOpacity>
+      </Animated.View>
+      {
+        showSearch &&
+        <Animated.View style={{ position: "absolute", top: 0, left: 0, right: 0, opacity: searchOpacity }} >
+          <MartDetail_search autoFocus close={closeSearch} onSubmit={(t) => { LibNavigation.push<MartSearchArgs>('mart/search', { url: data.url_products, title: data.name, search: t }) }} />
+        </Animated.View>
+      }
+      {
+        bagCount > 0 &&
+        <TouchableOpacity activeOpacity={2} style={{ position: 'absolute', bottom: 20, right: 20, width: 56, height: 56, borderRadius: 28, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, ...LibStyle.elevation(2) }}
+          onPress={() => { LibNavigation.navigate('mart/dc_cart') }} >
+          <View>
+            <LibIcon name='cart' color="#6C432E" />
+            <View style={{ position: 'absolute', top: -5, right: -5, backgroundColor: LibStyle.colorRed, height: 15, borderRadius: 10, padding: 5, paddingVertical: 2 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 10, letterSpacing: 0, color: "#ffffff" }}>{bagCount || 0}</Text>
+            </View>
+          </View>
+        </TouchableOpacity>
+      }
+    </View >
+  )
+}

package/modules/mart/dc_edit.tsx

@@ -0,0 +1,274 @@
+// withHooks
+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 { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { MartButton } from 'esoftplay/cache/mart/button/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { MartInput_container } from 'esoftplay/cache/mart/input_container/import';
+import { MartInput_label } from 'esoftplay/cache/mart/input_label/import';
+import { MartInput_select } from 'esoftplay/cache/mart/input_select/import';
+import { MartInput_square } from 'esoftplay/cache/mart/input_square/import';
+import { UseForm } from 'esoftplay/cache/use/form/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface MartDc_addressArgs {
+
+}
+export interface MartDc_addressProps {
+
+}
+
+interface ItemRange {
+  id: string,
+  location_name: string
+}
+
+export interface MartDc_inputForm {
+  name: string
+  address: string
+  image: string
+  email: string
+  phone: string
+  zipcode: string
+  description: string,
+  location: any,
+  latlong: any,
+  range: ItemRange[]
+}
+
+export function checkValidateInput(form: any): boolean {
+  let msg = ''
+  if (!form?.name) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_name_is_required")
+  }
+  if (!form?.email) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_email_is_required")
+  }
+  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+  if (reg.test(form?.email) === false) {
+    msg = esp.lang("mart/dc_edit", "Email_distribution_center_must_be_filled_in_correctly")
+  }
+  if (!form?.phone) {
+    msg = esp.lang("mart/dc_edit", "distribution_center_phone_number_is_required")
+  }
+  if (!msg && !form?.image) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_logo_is_required")
+  }
+  if (!msg && !form?.zipcode) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_post_code_is_required")
+  }
+  if (!msg && !form?.address) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_address_is_required")
+  }
+  if (!msg && !form?.location) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_location_is_required")
+  }
+  if (!msg && !form?.latlong) {
+    msg = esp.lang("mart/dc_edit", "Distribution_center_location_map_must_be_filled_in")
+  }
+  if (msg) {
+    LibToastProperty.show(msg)
+    return false
+  }
+  return true
+}
+
+export default function m(props: MartDc_addressProps): any {
+  const [form, setForm, reForm, delForm, batchUpdate] = UseForm<MartDc_inputForm>("mart_dc_input")
+  const [loading, setLoading] = useSafeState(false)
+  const user = UserClass.state().useSelector(x => x)
+  const [detail, setDetail] = useSafeState<any>()
+
+  useEffect(() => {
+    new LibCurl('mitra/dc_detail/' + user?.dc_id, null, (res, msg) => {
+      batchUpdate({
+        ...res,
+        location: { detail: res.location_name, id: res.location_id, },
+        latlong: { latlong: res.location_latlong },
+      })
+      setDetail(res)
+    }, (msg) => {
+      LibDialog.warning(esp.lang("mart/dc_edit", "err_detail"), msg?.message)
+    }, 1
+    )
+  }, [])
+
+  function doEdit() {
+    reForm((form) => {
+      LibProgress.show(esp.lang("mart/dc_edit", "saving_changes"))
+      setLoading(true)
+      let post = {
+        name: form?.name,
+        address: form?.address,
+        location_latlong: form?.latlong?.latlong,
+        location_id: form?.location?.id,
+        image: form?.image,
+        email: form?.email,
+        phone: form?.phone,
+        zipcode: form?.zipcode || '',
+        description: form?.description || ''
+      }
+      new LibCurl("mitra/dc_edit", post,
+        (res, msg) => {
+          setLoading(false)
+          LibProgress.hide()
+          LibDialog.info(esp.lang("mart/dc_edit", "sucess"), msg)
+          LibNavigation.back()
+        }, (msg) => {
+          setLoading(false)
+          LibProgress.hide()
+          LibDialog.warning(esp.lang("mart/dc_edit", "err_edit"), msg?.message)
+        }, 1
+      )
+    })
+  }
+
+  if (!detail) {
+    return (
+      <View style={{ flex: 1 }}>
+        <MartHeader title={esp.lang("mart/dc_edit", "distribution_center")} subtitle={esp.lang("mart/dc_edit", "change_account_dc")} onlyBack />
+        <LibSkeleton>
+          <LibSkeleton.BoxHalf size={20} />
+          <LibSkeleton.BoxFull size={40} />
+          <LibSkeleton.BoxHalf size={20} />
+          <LibSkeleton.BoxFull size={40} />
+          <LibSkeleton.BoxHalf size={20} />
+          <LibSkeleton.BoxFull size={40} />
+          <LibSkeleton.BoxHalf size={20} />
+          <LibSkeleton.Box size={100} />
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MartHeader title={esp.lang("mart/dc_edit", "distribution_center")} subtitle={esp.lang("mart/dc_edit", "change_account_dc")} onlyBack />
+      <MartInput_container>
+        <MartInput_square
+          mandatory
+          containerStyle={{ marginTop: 10 }}
+          label={esp.lang("mart/dc_edit", "dc_name")}
+          placeholder={esp.lang("mart/dc_edit", "input_dc_name")}
+          defaultValue={form?.name}
+          onChangeText={setForm("name")} />
+        <MartInput_square
+          mandatory
+          label={esp.lang("mart/dc_edit", "email_dc")}
+          defaultValue={form?.email}
+          keyboardType="email-address"
+          placeholder={esp.lang("mart/dc_edit", "input_email_dc")}
+          autoCapitalize="none"
+          onChangeText={setForm("email")} />
+        <MartInput_square
+          mandatory
+          placeholder={esp.lang("mart/dc_edit", "input_dc_phone")}
+          label={esp.lang("mart/dc_edit", "dc_phone")}
+          defaultValue={form?.phone}
+          keyboardType="phone-pad"
+          onChangeText={setForm("phone")} />
+        <View style={{ paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }} >
+          <MartInput_label label={esp.lang("mart/dc_edit", "logo_dc")} mandatory />
+          <View style={{ flexDirection: "row" }} >
+            <LibPicture
+              source={{ uri: form?.image }}
+              style={{ height: 100, width: 100, borderRadius: 10, backgroundColor: "#f1f2f3", borderColor: "#ddd", borderWidth: 1 }}
+            />
+            <View style={{ marginLeft: 20, paddingTop: 12 }} >
+              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888" }}>{esp.lang("mart/dc_edit", "max_file_allowed")}</Text>
+              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("mart/dc_edit", "10_mb")}</Text>
+              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888", marginTop: 6 }}>{esp.lang("mart/dc_edit", "file_type_allowed")}</Text>
+              <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("mart/dc_edit", "image_ekstention")}</Text>
+              <MartButton
+                text={esp.lang("mart/dc_edit", "browse_image")}
+                buttonStyle={{ marginTop: 10 }}
+                colorBackground={"white"}
+                colorBorder={LibStyle.colorPrimaryMart}
+                color={LibStyle.colorPrimaryMart}
+                textStyle={{ fontSize: 13 }}
+                onPress={() => { LibImage.fromGallery().then(setForm("image")) }} />
+            </View>
+          </View>
+        </View>
+        <MartInput_square
+          multiline
+          defaultValue={form?.description}
+          style={{ height: 100, textAlignVertical: "top" }}
+          label={esp.lang("mart/dc_edit", "description")}
+          onChangeText={setForm("description")} />
+        <MartInput_square
+          mandatory
+          multiline
+          defaultValue={form?.address}
+          style={{ height: 100, textAlignVertical: "top" }}
+          label={esp.lang("mart/dc_edit", "address_dc")}
+          onChangeText={setForm("address")} />
+        <MartInput_square
+          mandatory
+          label={esp.lang("mart/dc_edit", "zip_code")}
+          placeholder={esp.lang("mart/dc_edit", "input_dc_zip_code")}
+          defaultValue={form?.zipcode}
+          keyboardType="numeric"
+          onChangeText={setForm("zipcode")} />
+        <MartInput_select
+          mandatory
+          label={esp.lang("mart/dc_edit", "dc_address")}
+          onPress={() => {
+            LibNavigation.navigateForResult("market/location").then((ll) => {
+              setForm('latlong')({ latlong: '', name: '' })
+              setForm("location")(ll)
+            })
+          }}
+          placeholder={esp.lang("mart/dc_edit", "select_location")}
+          value={form?.location?.detail}
+        />
+
+        <MartInput_select
+          mandatory
+          label={esp.lang("mart/dc_edit", "dc_map_location")}
+          onPress={() => {
+            if (form?.location?.detail) {
+              if (!form?.latlong) {
+                /* belum pernah set titik lokasi, dibantu dengan places autocomplete */
+                LibNavigation.navigateForResult("market/address_autocomplete", undefined, 111).then((ll) => {
+                  LibNavigation.navigateForResult("market/map", { latlong: ll?.latlong }).then((dt) => {
+                    setForm("latlong")(dt)
+                    if (!form?.address)
+                      setForm("address")(ll?.address)
+                  })
+                })
+              } else {
+                LibNavigation.navigateForResult("market/map", { latlong: form?.latlong?.latlong }).then(setForm("latlong"))
+              }
+            } else
+              LibToastProperty.show(esp.lang("mart/dc_edit", "select_location_first"))
+          }}
+          placeholder={esp.lang("mart/dc_edit", "map_location")}
+          value={form?.latlong?.latlong}
+        />
+        <View style={{ paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }} >
+          <MartButton
+            loading={loading}
+            textStyle={{ color: 'white' }}
+            text={esp.lang("mart/dc_edit", "save_change")} onPress={() => {
+              if (checkValidateInput(form)) {
+                doEdit()
+              }
+            }} />
+        </View>
+      </MartInput_container>
+    </View>
+  )
+}

package/modules/mart/dc_list.tsx

@@ -0,0 +1,96 @@
+// withHooks
+import { ComponentBadge } from 'esoftplay/cache/component/badge/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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { MartDc_cartProperty } from 'esoftplay/cache/mart/dc_cart/import';
+import { MartDc_detailArgs } from 'esoftplay/cache/mart/dc_detail/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_listArgs {
+
+}
+export interface MartDc_listProps {
+
+}
+
+const renderSkeleton = (x: any, i: number) => (
+  <View key={i} style={{ margin: 15, marginBottom: 0, flexDirection: 'row', paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }} >
+    <View style={{ backgroundColor: '#f1f1f1', width: 80, height: 80, borderRadius: 5 }} />
+    <View style={{ marginHorizontal: 10, flex: 1, justifyContent: 'space-around' }} >
+      <View style={{ width: '70%', height: 20, backgroundColor: 'white', borderRadius: 10 }} />
+      <View style={{ flexDirection: 'row', marginTop: 5, alignItems: 'center' }} >
+        <LibIcon name="map-marker-outline" size={18} />
+        <View style={{ width: '70%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+      </View>
+    </View>
+  </View>
+)
+
+export default function m(props: MartDc_listProps): any {
+  const url = 'mitra/dc_list'
+  const badge = MartDc_cartProperty.countState().useSelector(s => s)
+
+  function renderItem(item: any, i: number) {
+    return (
+      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate<MartDc_detailArgs>('mart/dc_detail', { url: item?.url }) }} activeOpacity={1} style={styleId_Z14a7T} >
+        <LibPicture source={{ uri: item?.image }} style={styleId_ZmIX0s} />
+        <View style={styleId_Z2s8HDQ} >
+          <View>
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={styleId_1R6G5d} >{item?.name}</Text>
+          </View>
+          <View style={styleId_Z1XNCI3} >
+            <LibIcon name="map-marker-outline" size={18} />
+            <Text allowFontScaling={false} style={styleId_Z1V6Rum} >{item?.location_name}</Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MartHeader title={esp.lang("mart/dc_list", "bbo_bussiness")} subtitle={esp.lang("mart/dc_list", "distribution_center")} onlyBack
+        rightView={() => (
+          <TouchableOpacity
+            onPress={() => { LibNavigation.navigate('mart/dc_cart') }} >
+            <View style={styleId_zxpEc}>
+              <LibIcon name='cart' color="#6C432E" style={styleId_A2a9T} />
+              <ComponentBadge counter={badge} />
+            </View>
+          </TouchableOpacity>
+        )}
+      />
+      <LibInfinite
+        url={url}
+        errorView={(e: string) => (<MartEmpty message={e} />)}
+        LoadingView={
+          <LibSkeleton backgroundStyle={styleId_Z140vNN}>
+            {
+              [1, 1, 1, 1].map(renderSkeleton)
+            }
+          </LibSkeleton>
+        }
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}
+const styleId_Z14a7T: any = { margin: 15, marginBottom: 0, flexDirection: 'row', backgroundColor: 'white', paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }
+const styleId_ZmIX0s: any = { backgroundColor: '#f1f1f1', width: 80, height: 80, borderRadius: 5 }
+const styleId_Z2s8HDQ: any = { marginHorizontal: 10, flex: 1, justifyContent: 'space-around' }
+const styleId_1R6G5d: any = { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', lineHeight: 20 }
+const styleId_Z1XNCI3: any = { flexDirection: 'row', marginTop: 5, alignItems: 'center' }
+const styleId_Z1V6Rum: any = { marginTop: 3, fontFamily: 'Arial', fontSize: 12 }
+const styleId_zxpEc: any = { marginRight: 15, padding: 4 }
+const styleId_A2a9T: any = { width: 27, height: 22 }
+const styleId_Z140vNN: any = { height: LibStyle.height }