ordering-ui-react-native 0.14.79 → 0.14.80-release

package/src/components/Messages/styles.tsx

@@ -1,24 +1,24 @@
-
-import styled from 'styled-components/native'
-
-export const Wrapper = styled.View`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.white};
-`
-
-export const Header = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  border-bottom-width: 1px;
-  border-bottom-color: #d9d9d9;
-  padding-bottom: 10px;
-  padding-horizontal: 20px;
-`
-
-export const TitleHeader = styled.View`
-  align-items: flex-start;
-  max-width: 85%;
-`
-
-export const QuickMessageContainer = styled.ScrollView``
+
+import styled from 'styled-components/native'
+
+export const Wrapper = styled.View`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.white};
+`
+
+export const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  border-bottom-width: 1px;
+  border-bottom-color: #d9d9d9;
+  padding-bottom: 10px;
+  padding-horizontal: 20px;
+`
+
+export const TitleHeader = styled.View`
+  align-items: flex-start;
+  max-width: 85%;
+`
+
+export const QuickMessageContainer = styled.ScrollView``

package/src/components/MomentOption/index.tsx

@@ -1,236 +1,236 @@
-import React, { useState, useEffect } from 'react'
-import moment from 'moment'
-import {
-  useLanguage,
-  useConfig,
-  useUtils,
-  useOrder,
-  MomentOption as MomentOptionController
-} from 'ordering-components/native'
-import { StyleSheet, View } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import Spinner from 'react-native-loading-spinner-overlay';
-import { MomentOptionParams } from '../../types'
-import NavBar from '../NavBar'
-import { OText } from '../shared'
-import {Container} from '../../layouts/Container'
-import {
-  HeaderTitle,
-  WrapSelectOption,
-  Days,
-  Day,
-  WrapHours,
-  Hours,
-  Hour,
-  WrapDelveryTime
-} from './styles'
-import { useTheme } from 'styled-components/native'
-
-const MomentOptionUI = (props: MomentOptionParams) => {
-  const {
-    navigation,
-    nopadding,
-    datesList,
-    hoursList,
-    dateSelected,
-    timeSelected,
-    handleAsap,
-    handleChangeDate,
-    handleChangeTime
-  } = props
-
-  const theme = useTheme()
-  const [, t] = useLanguage()
-  const [{ configs }] = useConfig()
-  const [{ parseTime }] = useUtils()
-  const [orderState] = useOrder()
-  const [optionSelected, setOptionSelected] = useState({ isAsap: false, isSchedule: false })
-  const [momentState, setMomentState] = useState({ isLoading: 0, isEditing: false })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  const _handleAsap = () => {
-    setMomentState({ isLoading: 1, isEditing: true })
-    handleAsap()
-    setOptionSelected({ isAsap: true, isSchedule: false })
-    if (!orderState.options?.moment) {
-      setMomentState({ isLoading: 2, isEditing: false })
-    }
-  }
-
-  const handleChangeMoment = (time : any) => {
-    if (!time || time === timeSelected) return
-    setMomentState({ isLoading: 1, isEditing: true })
-    handleChangeTime(time)
-  }
-
-  const momento = moment(`${dateSelected} ${timeSelected}`, 'YYYY-MM-DD HH:mm').toDate()
-  const momentUnix = momento.getTime() / 1000
-  const momentFormat = moment.unix(momentUnix).utc().format('YYYY-MM-DD HH:mm:ss')
-
-  useEffect(() => {
-    if (orderState.options?.moment) {
-      setOptionSelected({ isAsap: false, isSchedule: true })
-    } else {
-      setOptionSelected({ isAsap: true, isSchedule: false })
-    }
-
-    if (momentState.isEditing && (momentFormat === orderState.options?.moment || timeSelected === null)) {
-      setMomentState({ isLoading: 2, isEditing: false })
-    }
-  }, [orderState.options?.moment])
-
-  useEffect(() => {
-    if (momentState.isLoading === 2 && !orderState?.loading) {
-      goToBack()
-    }
-  }, [momentState.isLoading])
-
-  return (
-    <Container nopadding={nopadding}>
-      <View style={{ paddingBottom: 10 }}>
-        <NavBar
-          onActionLeft={() => goToBack()}
-          btnStyle={{ paddingLeft: 0 }}
-          paddingTop={0}
-          style={{ paddingBottom: 0 }}
-        />
-        <HeaderTitle>
-          <OText size={28} weight='bold'>{t('DELIVERY_TIME', 'Delivery time')}</OText>
-          <OText color={theme.colors.textSecondary}>{t('SELECT_A_DELIVERY_DATE', 'Select a Delivery Date')}</OText>
-        </HeaderTitle>
-
-        <WrapSelectOption
-          onPress={() => _handleAsap()}
-          disabled={orderState.loading}
-        >
-          {optionSelected.isAsap ? (
-            <MaterialIcon
-              name='radiobox-marked'
-              size={32}
-              color={theme.colors.primary}
-              style={styles.icon}
-            />
-          ) : (
-            <MaterialIcon
-              name='radiobox-blank'
-              size={32}
-              color={theme.colors.textSecondary}
-              style={styles.icon}
-            />
-          )}
-          <OText>{t('ASAP_ABBREVIATION', 'ASAP')}</OText>
-        </WrapSelectOption>
-        <WrapSelectOption
-          onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
-          disabled={orderState.loading}
-        >
-          {optionSelected.isSchedule ? (
-            <MaterialIcon
-              name='radiobox-marked'
-              size={32}
-              color={theme.colors.primary}
-              style={styles.icon}
-            />
-          ) : (
-            <MaterialIcon
-              name='radiobox-blank'
-              size={32}
-              color={theme.colors.textSecondary}
-              style={styles.icon}
-            />
-          )}
-          <OText>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
-        </WrapSelectOption>
-
-        {optionSelected.isSchedule && (
-          <WrapDelveryTime>
-            {datesList.length > 0 && (
-              <>
-                <OText color={theme.colors.textSecondary}>{t('DELIVERY_DATE', 'Delivery Date')}</OText>
-                <Days>
-                  {
-                    datesList.slice(0, 6).map((date: any, i: any) => {
-                      const dateParts = date.split('-')
-                      const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
-                      const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 3).toUpperCase()
-                      const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
-                      return (
-                        <Day
-                          key={dayNumber}
-                          borderLeftShow={i === 0 || i === 4}
-                          onPress={() => handleChangeDate(date)}
-                        >
-                          <OText
-                            style={styles.dayNameStyle}
-                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
-                          >{dayName}</OText>
-                          <OText
-                            size={28}
-                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
-                          >{dayNumber}</OText>
-                        </Day>
-                      )
-                    })
-                  }
-                </Days>
-              </>
-            )}
-
-            {hoursList.length > 0 && optionSelected.isSchedule && (
-              <>
-                <OText color={theme.colors.textSecondary}>{t('DELIVERY_TIME', 'Delivery Time')}</OText>
-                <WrapHours
-                  nestedScrollEnabled={true}
-                >
-                  <Hours name='hours'>
-                    {
-                      hoursList.map((hour: any, i: any) => (
-                        <Hour
-                          key={i}
-                          onPress={() => handleChangeMoment(hour.startTime)}
-                          disabled={orderState.loading}
-                        >
-                          <OText color={timeSelected === hour.startTime ? theme.colors.primary : theme.colors.textSecondary}>
-                            {configs?.format_time?.value === '12' ? (
-                              hour.startTime.includes('12')
-                                ? `${hour.startTime}PM`
-                                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-                            ) : (
-                              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
-                            )}
-                          </OText>
-                        </Hour>
-                      ))
-                    }
-                  </Hours>
-                </WrapHours>
-              </>
-            )}
-          </WrapDelveryTime>
-        )}
-      </View>
-      <Spinner visible={momentState.isLoading === 1} />
-    </Container>
-  )
-}
-
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: 10
-  },
-  dayNameStyle: {
-    textTransform: 'uppercase'
-  },
-  selectStyle: {
-    zIndex: 10
-  }
-})
-
-export const MomentOption = (props: any) => {
-  const momentOptionProps = {
-    ...props,
-    UIComponent: MomentOptionUI
-  }
-  return <MomentOptionController {...momentOptionProps} />
-}
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  useOrder,
+  MomentOption as MomentOptionController
+} from 'ordering-components/native'
+import { StyleSheet, View } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Spinner from 'react-native-loading-spinner-overlay';
+import { MomentOptionParams } from '../../types'
+import NavBar from '../NavBar'
+import { OText } from '../shared'
+import {Container} from '../../layouts/Container'
+import {
+  HeaderTitle,
+  WrapSelectOption,
+  Days,
+  Day,
+  WrapHours,
+  Hours,
+  Hour,
+  WrapDelveryTime
+} from './styles'
+import { useTheme } from 'styled-components/native'
+
+const MomentOptionUI = (props: MomentOptionParams) => {
+  const {
+    navigation,
+    nopadding,
+    datesList,
+    hoursList,
+    dateSelected,
+    timeSelected,
+    handleAsap,
+    handleChangeDate,
+    handleChangeTime
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+  const [orderState] = useOrder()
+  const [optionSelected, setOptionSelected] = useState({ isAsap: false, isSchedule: false })
+  const [momentState, setMomentState] = useState({ isLoading: 0, isEditing: false })
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const _handleAsap = () => {
+    setMomentState({ isLoading: 1, isEditing: true })
+    handleAsap()
+    setOptionSelected({ isAsap: true, isSchedule: false })
+    if (!orderState.options?.moment) {
+      setMomentState({ isLoading: 2, isEditing: false })
+    }
+  }
+
+  const handleChangeMoment = (time : any) => {
+    if (!time || time === timeSelected) return
+    setMomentState({ isLoading: 1, isEditing: true })
+    handleChangeTime(time)
+  }
+
+  const momento = moment(`${dateSelected} ${timeSelected}`, 'YYYY-MM-DD HH:mm').toDate()
+  const momentUnix = momento.getTime() / 1000
+  const momentFormat = moment.unix(momentUnix).utc().format('YYYY-MM-DD HH:mm:ss')
+
+  useEffect(() => {
+    if (orderState.options?.moment) {
+      setOptionSelected({ isAsap: false, isSchedule: true })
+    } else {
+      setOptionSelected({ isAsap: true, isSchedule: false })
+    }
+
+    if (momentState.isEditing && (momentFormat === orderState.options?.moment || timeSelected === null)) {
+      setMomentState({ isLoading: 2, isEditing: false })
+    }
+  }, [orderState.options?.moment])
+
+  useEffect(() => {
+    if (momentState.isLoading === 2 && !orderState?.loading) {
+      goToBack()
+    }
+  }, [momentState.isLoading])
+
+  return (
+    <Container nopadding={nopadding}>
+      <View style={{ paddingBottom: 10 }}>
+        <NavBar
+          onActionLeft={() => goToBack()}
+          btnStyle={{ paddingLeft: 0 }}
+          paddingTop={0}
+          style={{ paddingBottom: 0 }}
+        />
+        <HeaderTitle>
+          <OText size={28} weight='bold'>{t('DELIVERY_TIME', 'Delivery time')}</OText>
+          <OText color={theme.colors.textSecondary}>{t('SELECT_A_DELIVERY_DATE', 'Select a Delivery Date')}</OText>
+        </HeaderTitle>
+
+        <WrapSelectOption
+          onPress={() => _handleAsap()}
+          disabled={orderState.loading}
+        >
+          {optionSelected.isAsap ? (
+            <MaterialIcon
+              name='radiobox-marked'
+              size={32}
+              color={theme.colors.primary}
+              style={styles.icon}
+            />
+          ) : (
+            <MaterialIcon
+              name='radiobox-blank'
+              size={32}
+              color={theme.colors.textSecondary}
+              style={styles.icon}
+            />
+          )}
+          <OText>{t('ASAP_ABBREVIATION', 'ASAP')}</OText>
+        </WrapSelectOption>
+        <WrapSelectOption
+          onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
+          disabled={orderState.loading}
+        >
+          {optionSelected.isSchedule ? (
+            <MaterialIcon
+              name='radiobox-marked'
+              size={32}
+              color={theme.colors.primary}
+              style={styles.icon}
+            />
+          ) : (
+            <MaterialIcon
+              name='radiobox-blank'
+              size={32}
+              color={theme.colors.textSecondary}
+              style={styles.icon}
+            />
+          )}
+          <OText>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
+        </WrapSelectOption>
+
+        {optionSelected.isSchedule && (
+          <WrapDelveryTime>
+            {datesList.length > 0 && (
+              <>
+                <OText color={theme.colors.textSecondary}>{t('DELIVERY_DATE', 'Delivery Date')}</OText>
+                <Days>
+                  {
+                    datesList.slice(0, 6).map((date: any, i: any) => {
+                      const dateParts = date.split('-')
+                      const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+                      const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 3).toUpperCase()
+                      const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
+                      return (
+                        <Day
+                          key={dayNumber}
+                          borderLeftShow={i === 0 || i === 4}
+                          onPress={() => handleChangeDate(date)}
+                        >
+                          <OText
+                            style={styles.dayNameStyle}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayName}</OText>
+                          <OText
+                            size={28}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayNumber}</OText>
+                        </Day>
+                      )
+                    })
+                  }
+                </Days>
+              </>
+            )}
+
+            {hoursList.length > 0 && optionSelected.isSchedule && (
+              <>
+                <OText color={theme.colors.textSecondary}>{t('DELIVERY_TIME', 'Delivery Time')}</OText>
+                <WrapHours
+                  nestedScrollEnabled={true}
+                >
+                  <Hours name='hours'>
+                    {
+                      hoursList.map((hour: any, i: any) => (
+                        <Hour
+                          key={i}
+                          onPress={() => handleChangeMoment(hour.startTime)}
+                          disabled={orderState.loading}
+                        >
+                          <OText color={timeSelected === hour.startTime ? theme.colors.primary : theme.colors.textSecondary}>
+                            {configs?.format_time?.value === '12' ? (
+                              hour.startTime.includes('12')
+                                ? `${hour.startTime}PM`
+                                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+                            ) : (
+                              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+                            )}
+                          </OText>
+                        </Hour>
+                      ))
+                    }
+                  </Hours>
+                </WrapHours>
+              </>
+            )}
+          </WrapDelveryTime>
+        )}
+      </View>
+      <Spinner visible={momentState.isLoading === 1} />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: 10
+  },
+  dayNameStyle: {
+    textTransform: 'uppercase'
+  },
+  selectStyle: {
+    zIndex: 10
+  }
+})
+
+export const MomentOption = (props: any) => {
+  const momentOptionProps = {
+    ...props,
+    UIComponent: MomentOptionUI
+  }
+  return <MomentOptionController {...momentOptionProps} />
+}

package/src/components/MomentOption/styles.tsx

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components/native'
-
-export const HeaderTitle = styled.View`
-  flex-direction: column;
-  margin-bottom: 20px;
-`
-export const WrapSelectOption = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-  margin-vertical: 5px;
-`
-export const Days = styled.View`
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin-vertical: 10px;
-`
-export const Day = styled.TouchableOpacity`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-right-width: 1px;
-  width: 25%;
-  margin-vertical: 10px;
-  border-color: ${(props: any) => props.theme.colors.textSecondary};
-
-  ${(props: any) => props.borderLeftShow && css`
-    border-left-width: 1px;
-  `}
-`
-export const WrapHours = styled.ScrollView`
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.textSecondary};
-  border-radius: 10px;
-  margin: 20px 0;
-  height: auto;
-  min-height: 180px;
-  max-height: 280px;
-`
-export const Hours = styled.View`
-  flex: 1;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 0 20px;
-`
-export const Hour = styled.TouchableOpacity`
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  border-width: 1px;
-  border-radius: 10px;
-  border-color: ${(props: any) => props.theme.colors.textSecondary};
-  width: 90px;
-  margin-vertical: 10px;
-`
-
-export const WrapDelveryTime = styled.View`
-  flex: 1;
-`
+import styled, { css } from 'styled-components/native'
+
+export const HeaderTitle = styled.View`
+  flex-direction: column;
+  margin-bottom: 20px;
+`
+export const WrapSelectOption = styled.TouchableOpacity`
+  flex-direction: row;
+  align-items: center;
+  margin-vertical: 5px;
+`
+export const Days = styled.View`
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-vertical: 10px;
+`
+export const Day = styled.TouchableOpacity`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-right-width: 1px;
+  width: 25%;
+  margin-vertical: 10px;
+  border-color: ${(props: any) => props.theme.colors.textSecondary};
+
+  ${(props: any) => props.borderLeftShow && css`
+    border-left-width: 1px;
+  `}
+`
+export const WrapHours = styled.ScrollView`
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.textSecondary};
+  border-radius: 10px;
+  margin: 20px 0;
+  height: auto;
+  min-height: 180px;
+  max-height: 280px;
+`
+export const Hours = styled.View`
+  flex: 1;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 20px;
+`
+export const Hour = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  border-width: 1px;
+  border-radius: 10px;
+  border-color: ${(props: any) => props.theme.colors.textSecondary};
+  width: 90px;
+  margin-vertical: 10px;
+`
+
+export const WrapDelveryTime = styled.View`
+  flex: 1;
+`