esoftplay-event 0.0.0-a

package/event/coupon_generate.tsx

@@ -0,0 +1,258 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import moment from 'esoftplay/moment';
+import { useRef } from 'react';
+
+import { ComponentMessage } from 'esoftplay/cache/component/message/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventCoupon_generateArgs {
+
+}
+export interface EventCoupon_generateProps {
+
+}
+export default function m(props: EventCoupon_generateProps): any {
+  const { event_id, event_name, image } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useLazyState<any>()
+  const [error, setError] = useLazyState<string>("")
+  const [t, setT] = useSafeState<number>(new Date().getTime())
+  const inputEmailRef = useRef<LibInput>(null)
+  const inputNominalRef = useRef<LibInput>(null)
+  const inputDescRef = useRef<LibInput>(null)
+
+  const infiniteRef = useRef<LibInfinite>(null)
+
+  const [coupon, setCoupon, getCoupon] = useLazyState<any>()
+
+  const imgWidth = LibStyle?.width - 50
+  const imgHeight = imgWidth / 1920 * 1080
+
+  function load() {
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_admin_detail?event_id=" + event_id + "&coupon_id=" + getCoupon()?.coupon_id, null, (result, message) => {
+      setData(result)()
+    }, (error) => {
+      setError(error?.message)
+    }, 1)
+  }
+
+  function doSendVoucher() {
+    const email: any = inputEmailRef.current?.getText()
+    const amount = inputNominalRef.current?.getText()
+    const notes = inputDescRef.current?.getText()
+
+    if (email == "") {
+      esp.modProp("lib/toast").show(esp.lang("event/coupon_generate", "email_empty"))
+      return
+    }
+    let reg = /^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/;
+    if (email && reg.test(email) === false) {
+      esp.modProp("lib/toast").show(esp.lang("event/coupon_generate", "email_invalid"))
+      return
+    }
+    if (amount == "") {
+      esp.modProp("lib/toast").show(esp.lang("event/coupon_generate", "nominal_empty"))
+      return
+    }
+
+    let post: any = {
+      event_id,
+      coupon_id: getCoupon()?.coupon_id,
+      user_email_to: email,
+      amount: amount
+    }
+
+    if (notes != "") {
+      post["notes"] = notes
+    }
+
+    const doSend = () => {
+      esp.mod("lib/progress").show(esp.lang("event/coupon_generate", "send_progress", email))
+      const curl = esp.mod("lib/curl")
+      new curl("event_coupon_admin_send", post, (result, message) => {
+        load()
+        setT(new Date().getTime())
+        inputEmailRef.current?.setText("")
+        inputNominalRef.current?.setText("")
+        inputDescRef.current?.setText("")
+        esp.mod("lib/progress").hide()
+        esp.modProp("lib/toast").show(message)
+      }, (error) => {
+        esp.mod("lib/progress").hide()
+        esp.mod("lib/dialog").warning(esp.lang("event/coupon_generate", "send_failed"), error?.message)
+      }, 1)
+    }
+
+    esp.mod("lib/dialog").confirm(esp.lang("event/coupon_generate", "send_title"), esp.lang("event/coupon_generate", "send_msg", email), esp.lang("event/coupon_generate", "send_btn"), () => {
+      doSend()
+    }, esp.lang("event/coupon_generate", "send_cancel"), () => { })
+
+  }
+
+  function buildUrl(url: string) {
+    if (t) {
+      url += url.includes('?') ? '&' : '?'
+      url += 't=' + t
+    }
+    return url
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/coupon_generate", "header")} subtitle={event_name} />
+      {
+        <LibScroll onRefresh={() => infiniteRef.current?.loadData()}>
+          <View style={[{ backgroundColor: "white", marginHorizontal: 15, marginTop: 15, padding: 10, borderRadius: 10 }, LibStyle.elevation(3)]}>
+            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14 }}>{event_name}</Text>
+
+            <View style={[{ marginTop: 5, borderRadius: 15, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+              <LibPicture source={{ uri: image }} resizeMode="cover" style={{ height: imgHeight, width: imgWidth, borderRadius: 5 }} />
+            </View>
+          </View>
+
+          <View style={[{ backgroundColor: "white", marginHorizontal: 15, marginTop: 15, marginBottom: 10, padding: 10, borderRadius: 10 }, LibStyle.elevation(3)]}>
+
+            {
+              coupon &&
+              <View style={[{ marginBottom: 4, borderRadius: 10, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+                <LibPicture source={{ uri: coupon?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 50) * 0.43, width: LibStyle.width - 50, borderRadius: 10 }} />
+                <View style={{ backgroundColor: "rgba(0, 0, 0, 0.5)", position: 'absolute', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, bottom: 0, left: 0, right: 0, padding: 10 }}>
+                  <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{coupon?.coupon_title}</Text>
+                </View>
+                <View style={{ position: 'absolute', top: (((LibStyle.width - 50) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
+                  <View style={{ flex: 1 }} />
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
+                </View>
+              </View>
+            }
+
+            <Pressable onPress={() => {
+              esp.mod("lib/navigation").navigateForResult("event/coupon_generate_list", { event_id }, 120).then((value) => {
+                setCoupon(value)()
+                load()
+              })
+            }} style={{ borderWidth: 1, borderColor: "#e6e6e6", height: 34, borderRadius: 10, marginTop: 10, flexDirection: "row", alignItems: "center", paddingHorizontal: 10 }}>
+              {
+                coupon ?
+                  <>
+                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, flex: 1 }}>{coupon?.coupon_title}</Text>
+                    <LibIcon name='pencil' size={18} />
+                  </>
+                  : <>
+                    <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14 }}>{"Pilih Kupon"}</Text>
+                    <LibIcon name='chevron-right' />
+                  </>
+              }
+            </Pressable>
+            <View style={{ borderWidth: 1, borderColor: "#e6e6e6", height: 34, borderRadius: 10, marginTop: 10, flexDirection: "row", alignItems: "center", paddingHorizontal: 10 }}>
+              <Text>Rp. </Text>
+              <LibInput
+                ref={inputNominalRef}
+                base
+                placeholder={esp.lang("event/coupon_generate", "input_nominal")}
+                onChangeText={() => { }}
+                keyboardType='numeric'
+                mask='###.###.###.###.###.###.###.###.###.###'
+                maskFrom='end'
+                returnKeyType='next'
+                onSubmitEditing={() => {
+                  inputEmailRef.current?.focus()
+                }}
+                style={{ flex: 1, paddingHorizontal: 5 }}
+              />
+            </View>
+            <View style={{ borderWidth: 1, borderColor: "#e6e6e6", height: 34, borderRadius: 10, marginTop: 10 }}>
+              <LibInput
+                ref={inputEmailRef}
+                base
+                placeholder={esp.lang("event/coupon_generate", "input_email")}
+                onChangeText={() => { }}
+                keyboardType='email-address'
+                returnKeyType='next'
+                onSubmitEditing={() => {
+                  inputDescRef.current?.focus()
+                }}
+                style={{ flex: 1, paddingHorizontal: 10 }}
+              />
+            </View>
+            <View style={{ borderWidth: 1, borderColor: "#e6e6e6", height: 80, borderRadius: 10, marginVertical: 10 }}>
+              <LibInput
+                ref={inputDescRef}
+                base
+                placeholder={"notes"}
+                multiline
+                onChangeText={() => { }}
+                returnKeyType='go'
+                onSubmitEditing={doSendVoucher}
+                style={{ flex: 1, padding: 10, textAlignVertical: "top" }}
+              />
+            </View>
+            <Pressable
+              onPress={() => {
+                if (getCoupon()) {
+                  doSendVoucher()
+                } else {
+                  esp.modProp("lib/toast").show("Silahkan pilih kupon terlebih dahulu")
+                }
+              }}
+              style={{ backgroundColor: coupon ? LibStyle.colorGreen : "#e6e6e6", height: 34, alignItems: "center", justifyContent: "center", paddingHorizontal: 10, borderRadius: 10 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "white" }}>{esp.lang("event/coupon_generate", "btn_send")}</Text>
+            </Pressable>
+            {
+              data &&
+              <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#606060" }}>{esp.lang("event/coupon_generate", "quota_left")}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 16, letterSpacing: 1 }}>{`${data?.qty_claimed} / ${data?.qty}`}</Text>
+              </View>
+            }
+          </View>
+          {
+            data && coupon &&
+            <LibInfinite
+              ref={infiniteRef}
+              key={coupon?.coupon_id + buildUrl("event_coupon_admin_claimed?event_id=" + event_id + "&coupon_id=" + getCoupon()?.coupon_id)}
+              url={buildUrl("event_coupon_admin_claimed?event_id=" + event_id + "&coupon_id=" + getCoupon()?.coupon_id)}
+              errorView={(error: any) => (
+                <ComponentMessage message={error} />
+              )}
+              renderItem={(item, index) => (
+                <View style={[{ backgroundColor: "white", marginHorizontal: 15, marginTop: 10, marginBottom: 5, padding: 10, borderRadius: 10, flexDirection: "row", alignItems: "center" }, LibStyle.elevation(3)]}>
+                  <View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: "#909090", alignItems: "center", justifyContent: "center" }}>
+                    <LibIcon name='send' size={20} color='#f1f1f1' />
+                  </View>
+                  <View style={{ flex: 1, marginLeft: 10 }}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, marginBottom: 5 }}>{item?.coupon_title}</Text>
+                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14 }}>{LibUtils.money(item?.amount)}</Text>
+                    <View style={{ flexDirection: "row", marginVertical: 5 }}>
+                      <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 12 }}>{String(item?.user_email).toLowerCase()}</Text>
+                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, color: "#606060" }}>{moment(item?.claimed_time).localeFormat("DD MMM YYYY HH:mm:ss")}</Text>
+                    </View>
+                    {
+                      item?.notes && item?.notes != "" &&
+                      <Text allowFontScaling={false} style={{ marginTop: 3, fontFamily: "Arial", fontSize: 12, color: "#606060", letterSpacing: 1 }}>{item?.notes}</Text>
+                    }
+                  </View>
+                </View>
+              )}
+            />
+          }
+        </LibScroll>
+      }
+    </View>
+  )
+}

package/event/coupon_generate_event.tsx

@@ -0,0 +1,79 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibList } from 'esoftplay/cache/lib/list/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 esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import { useEffect } from 'react';
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventCoupon_generate_eventArgs {
+
+}
+export interface EventCoupon_generate_eventProps {
+
+}
+export default function m(props: EventCoupon_generate_eventProps): any {
+  const [result, setResult] = useLazyState<any>()
+  const [error, setError] = useLazyState<string>("")
+
+  const imgWidth = LibStyle?.width - 30
+  const imgHeight = imgWidth / 1920 * 1080
+
+  useEffect(() => {
+    loadEvent()
+  }, [])
+
+  function loadEvent() {
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_admin_event", null,
+      (result) => {
+        if (result.length > 1) {
+          setResult(result)()
+        } else {
+          esp.mod("lib/navigation").replace("event/coupon_generate", { ...result?.[0] })
+        }
+      }, (error) => {
+        setError(error?.message)()
+      }, 1)
+  }
+
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={"Daftar Event"} />
+      {
+        (!result && error == "") ?
+          <LibSkeleton>
+            <LibSkeleton.BoxFull size={imgHeight} />
+            <LibSkeleton.BoxFull size={imgHeight} />
+            <LibSkeleton.BoxFull size={imgHeight} />
+          </LibSkeleton>
+          :
+          <LibList
+            onRefresh={loadEvent}
+            data={result}
+            ListEmptyComponent={
+              error != "" ? <ComponentMessage message={error} /> : null
+            }
+            renderItem={(item: any, index: number) => (
+              <Pressable key={index} onPress={() => {
+                esp.mod("lib/navigation").navigate("event/coupon_generate", { ...item })
+              }} style={{ marginHorizontal: 15, marginTop: 15 }} >
+                <LibPicture source={{ uri: item?.image }} style={{ width: imgWidth, height: imgHeight, borderRadius: 10, resizeMode: 'cover', backgroundColor: '#f1f2f3' }} />
+                <View style={{ backgroundColor: "rgba(0, 0, 0, 0.5)", position: 'absolute', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, bottom: 0, left: 0, right: 0, padding: 10 }}>
+                  <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item?.event_name}</Text>
+                </View>
+              </Pressable>
+            )}
+          />
+      }
+    </View>
+  )
+}

package/event/coupon_generate_list.tsx

@@ -0,0 +1,56 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_generate_listArgs {
+
+}
+export interface EventCoupon_generate_listProps {
+
+}
+export default function m(props: EventCoupon_generate_listProps): any {
+
+  const key = esp.mod("lib/navigation").getResultKey(props)
+  const event_id = esp.mod("lib/navigation").getArgs(props, "event_id")
+
+  useEffect(() => {
+    return () => esp.mod("lib/navigation").cancelBackResult(key)
+  }, [])
+
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title='Daftar Kupon' subtitle='Daftar kupon dapat digenerate' notif />
+      <LibInfinite
+        url={'event_coupon_admin?event_id=' + event_id}
+        renderItem={(item, i) => {
+          return (
+            <View style={{ flex: 1 }} key={i}>
+              <TouchableOpacity onPress={() => {
+                esp.mod("lib/navigation").sendBackResult(item, key)
+              }} style={[{ marginBottom: 4, margin: 15, borderRadius: 10, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+                <LibPicture source={{ uri: item?.image }} resizeMode="cover" style={{ height: (LibStyle.width - 30) * 0.43, width: LibStyle.width - 30, borderRadius: 10 }} />
+                <View style={{ backgroundColor: "rgba(0, 0, 0, 0.5)", position: 'absolute', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, bottom: 0, left: 0, right: 0, padding: 10 }}>
+                  <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item?.coupon_title}</Text>
+                </View>
+                <View style={{ position: 'absolute', top: (((LibStyle.width - 30) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
+                  <View style={{ flex: 1 }} />
+                  <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}

package/event/date_picker.tsx

@@ -0,0 +1,152 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import CalendarPicker from 'react-native-calendar-picker';
+
+export interface EventDate_pickerArgs {
+  ranged: 'ranged' | 'notrange'
+}
+export interface EventDate_pickerProps {
+
+}
+export default function m(props: EventDate_pickerProps): any {
+  const date_start = LibNavigation.getArgs(props, "date_start")
+  const date_end = LibNavigation.getArgs(props, "date_end")
+  const ranged = LibNavigation.getArgs(props, "ranged")
+  const { minDate, maxDate } = LibNavigation.getArgsAll(props)
+  const [selectedStartDate, setSelectedStartDate] = useSafeState<any>()
+  const [selectedEndDate, setSelectedEndDate] = useSafeState<any>()
+
+  const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+  const diffDays = Math.round(Math.abs((selectedStartDate - selectedEndDate) / oneDay));
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function onDateChange(date: any, type: any) {
+    if (type === 'END_DATE') {
+      setSelectedEndDate(date)
+    } else {
+      setSelectedStartDate(date)
+      setSelectedEndDate(null)
+    }
+  }
+
+  function customDayHeaders(dayOfWeek: any) {
+    switch (dayOfWeek) { // can also evaluate month, year
+      case 4: // Thursday
+        return {
+          style: {
+            borderRadius: 12,
+            backgroundColor: 'cyan',
+          },
+          textStyle: {
+            color: 'blue',
+            fontSize: 22,
+            fontWeight: 'bold',
+          }
+        };
+    }
+  }
+
+  const customDatesStyles = (date: any) => {
+    switch (date.isoWeekday()) {
+      case 7: // Sunday
+        return {
+          textStyle: {
+            color: 'red',
+          }
+        };
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/date_picker", "header_title")} />
+      <CalendarPicker
+        allowRangeSelection={ranged == 'ranged' ? true : false}
+        weekdays={[esp.lang("event/date_picker", "day_1"), esp.lang("event/date_picker", "day_2"), esp.lang("event/date_picker", "day_3"), esp.lang("event/date_picker", "day_4"), esp.lang("event/date_picker", "day_5"), esp.lang("event/date_picker", "day_6"), esp.lang("event/date_picker", "day_7")]}
+        months={[esp.lang("event/date_picker", "month_jan"), esp.lang("event/date_picker", "month_feb"), esp.lang("event/date_picker", "month_mar"), esp.lang("event/date_picker", "month_apr"), esp.lang("event/date_picker", "month_mei"), esp.lang("event/date_picker", "month_jun"), esp.lang("event/date_picker", "month_jul"), esp.lang("event/date_picker", "month_aug"), esp.lang("event/date_picker", "month_sept"), esp.lang("event/date_picker", "month_oct"), esp.lang("event/date_picker", "month_nov"), esp.lang("event/date_picker", "month_des")]}
+        previousComponent={
+          <LibIcon name={"chevron-left"} />
+        }
+        nextComponent={
+          <LibIcon name={"chevron-right"} />
+        }
+        customDatesStyles={customDatesStyles}
+        customDayHeaderStyles={(days: any) => customDayHeaders(days)}
+        selectedDayColor={'#ed6536'}
+        selectedDayTextColor="#fff"
+        onDateChange={onDateChange}
+        selectedStartDate={date_start}
+        selectedEndDate={date_end}
+        minDate={minDate ? minDate : new Date()}
+        maxDate={maxDate ? maxDate : LibUtils.moment().add(10, 'years').localeFormat("YYYY-MM-DD")}
+      />
+      <View style={{ margin: 15, height: 1, backgroundColor: '#e3e3e3' }} />
+      {
+        ranged == 'ranged' ?
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15 }}>
+            {
+              selectedStartDate == undefined &&
+              <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{esp.lang("event/date_picker", "select_date_start")}</Text>
+            }
+            {
+              selectedStartDate !== undefined && selectedEndDate == undefined &&
+              <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{esp.lang("event/date_picker", "select_date_end")}</Text>
+            }
+          </View>
+          :
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{esp.lang("event/date_picker", "select_date")}</Text>
+          </View>
+      }
+      {
+        ranged == 'ranged' ?
+          <>
+            {
+              selectedStartDate !== undefined && selectedEndDate !== null &&
+              <>
+                <View style={{ flexDirection: 'row', margin: 15, marginTop: 0, justifyContent: 'space-between' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{moment(selectedStartDate).localeFormat("DD MMM YYYY") + " - " + moment(selectedEndDate).localeFormat("DD MMM YYYY")}</Text>
+                  <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{esp.lang("event/date_picker", "day", String(Number(diffDays + 1)))}</Text>
+                </View>
+                <View style={{ margin: 15, marginTop: 0 }}>
+                  <ComponentButton onPress={() => {
+                    LibNavigation.sendBackResult({
+                      date_start: moment(selectedStartDate).localeFormat("YYYY-MM-DD"),
+                      date_end: moment(selectedEndDate).localeFormat("YYYY-MM-DD"),
+                      date: moment(selectedStartDate).localeFormat("DD MMM YYYY") + " - " + moment(selectedEndDate).localeFormat("DD MMM YYYY") + esp.lang("event/date_picker", "days", String(Number(diffDays + 1)))
+                    })
+                  }} label={esp.lang("event/date_picker", "btn_save")} backgroundColor="#fff" borderColor="#51b596" fontColor="#51b596" />
+                </View>
+              </>
+            }
+          </>
+          :
+          <>
+            <View style={{ flexDirection: 'row', margin: 15, marginTop: 0, justifyContent: 'space-between' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{moment(selectedStartDate).localeFormat("DD MMM YYYY")}</Text>
+            </View>
+            <View style={{ margin: 15, marginTop: 0 }}>
+              <ComponentButton onPress={() => {
+                LibNavigation.sendBackResult({
+                  date_start: moment(selectedStartDate).localeFormat("YYYY-MM-DD")
+                })
+              }} label={esp.lang("event/date_picker", "btn_save!")} backgroundColor="#fff" borderColor="#51b596" fontColor="#51b596" />
+            </View>
+          </>
+      }
+    </View>
+  )
+}