ordering-ui-react-native 0.17.71 → 0.17.72-release

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react'
+import {
+  useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
+} from 'ordering-components/native'
+import { useForm, Controller } from 'react-hook-form'
+import { StyleSheet, View, Alert } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OInput } from '../../shared';
+
+import {
+  Container,
+  FormController
+} from './styles'
+
+const RedeemGiftCardUI = (props: any) => {
+  const {
+    actionState,
+    redeemedGiftCard,
+    handleApply,
+    onClose,
+    setRedeemedGiftCard
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { handleSubmit, control, errors } = useForm()
+  const [{ parsePrice }] = useUtils()
+
+  const [codeValue, setCodeValue] = useState('')
+
+  const style = StyleSheet.create({
+    btnStyle: {
+      borderRadius: 7.6,
+      height: 44,
+      marginTop: 20
+    },
+    inputStyle: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+		},
+  })
+
+  const onSubmit = (values) => {
+    handleApply(values)
+  }
+
+  const handleChangeCode = (string: any) => {
+    string = string.replace(/-/g, '')
+    if (!string) return
+    const codeSlices = string.match(/.{1,4}/g)
+    string = codeSlices.join('-')
+    setCodeValue(string)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      const list = Object.values(errors)
+      let stringError = ''
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      })
+      Alert.alert(
+        t('ERROR', 'Error'),
+        stringError,
+        [
+          { text: t('OK', 'oK'), onPress: () => {} }
+        ]
+      )
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (!actionState.error) return
+    let stringError = ''
+    if (typeof actionState.error === 'string') {
+      stringError = actionState.error
+    } else {
+      actionState.error.map(item => {
+        stringError += `- ${item}\n`
+      })
+    }
+    Alert.alert(
+      t('ERROR', 'Error'),
+      stringError,
+      [
+        { text: t('OK', 'oK'), onPress: () => {} }
+      ]
+    )
+  }, [actionState.error])
+
+  return (
+    <Container>
+      {!redeemedGiftCard ? (
+        <View>
+          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <FormController>
+            <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+              <OInput
+                placeholder='XXXX-XXXX-XXXX-XXXX'
+                value={codeValue}
+                onChange={(val: any) => {
+                  onChange(val)
+                  handleChangeCode(val)
+                }}
+                autoCapitalize='none'
+                autoCorrect={false}
+                blurOnSubmit={false}
+                style={style.inputStyle}
+              />
+              )}
+              name='code'
+              rules={{
+                required: t('VALIDATION_ERROR_REQUIRED', 'Code is required').replace('_attribute_', t('CODE', 'Code'))
+              }}
+              defaultValue=""
+            />
+          </FormController>
+          <FormController>
+            <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('PASSWORD', 'Password')}</OText>
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured
+                  placeholder={t('PASSWORD', 'Password')}
+                  value={value}
+                  onChange={(val: any) => onChange(val)}
+                  autoCapitalize='none'
+                  autoCompleteType='password'
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  style={style.inputStyle}
+                />
+              )}
+              name='password'
+              rules={{
+                required: t('VALIDATION_ERROR_REQUIRED', 'Password is required').replace('_attribute_', t('PASSWORD', 'Password'))
+              }}
+              defaultValue=""
+            />
+          </FormController>
+          <OButton
+            onClick={handleSubmit(onSubmit)}
+            text={actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            textStyle={{ color: 'white', fontSize: 13 }}
+            imgRightSrc={null}
+            style={style.btnStyle}
+            isDisabled={actionState.loading}
+          />
+        </View>
+      ) : (
+        <>
+          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</OText>
+            {!!redeemedGiftCard?.title && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>}
+            {!!redeemedGiftCard?.message && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>}
+            <OButton
+              onClick={() => {
+                setRedeemedGiftCard(null)
+                onClose()
+              }}
+              text={t('OK', 'Ok')}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              textStyle={{ color: 'white', fontSize: 13 }}
+              imgRightSrc={null}
+              style={style.btnStyle}
+            />
+          </View>
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const RedeemGiftCard = (props: any) => {
+  const redeemGiftCardProps = {
+    ...props,
+    UIComponent: RedeemGiftCardUI
+  }
+  return <RedeemGiftCardController {...redeemGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+`
+export const FormController = styled.View`
+  margin-bottom: 25px;
+`

package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, Platform, Alert } from 'react-native';
+import { useLanguage, SendGiftCard as SendGiftCardController  } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OInput } from '../../shared';
+import { useForm, Controller } from 'react-hook-form'
+
+import {
+  Container,
+  FormController
+} from './styles'
+
+
+const SendGiftCardUI = (props: any) => {
+  const {
+    actionState,
+    handleSendGiftCard
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const { handleSubmit, control, errors } = useForm()
+
+  const style = StyleSheet.create({
+    btnStyle: {
+      borderRadius: 7.6,
+      height: 44,
+      marginTop: 20
+    },
+    inputStyle: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+		},
+  })
+
+  const onSubmit = (values) => {
+    handleSendGiftCard(values)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      const list = Object.values(errors)
+      let stringError = ''
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      })
+      Alert.alert(
+        t('ERROR', 'Error'),
+        stringError,
+        [
+          { text: t('OK', 'oK'), onPress: () => {} }
+        ]
+      )
+    }
+  }, [errors])
+
+  return (
+    <Container>
+      <OText color={theme.colors.textNormal} size={20} mBottom={10} style={{ fontWeight: Platform.OS == 'ios' ? '600' : 'bold' }}>{t('GIFT_CARD_DETAILS', 'Gift Card details')}</OText>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('TO', 'To')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('ENTER_AN_EMAIL', 'Enter an email')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCompleteType='email'
+              autoCapitalize='none'
+              autoCorrect={false}
+              type='email-address'
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='email'
+          rules={{
+            required: t('VALIDATION_ERROR_REQUIRED', 'To email is required').replace('_attribute_', t('EMAIL', 'EMail'))
+          }}
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('FROM', 'From')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='user_name'
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('TITLE', 'Title')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('TITLE', 'Title')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='title'
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('MESSAGES', 'Messages')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              multiline
+              placeholder={t('TYPE_YOUR_MESSAGE_HERE', 'Type your message here')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={{ ...style.inputStyle, height: 100, alignItems: 'flex-start', }}
+            />
+          )}
+          name='message'
+          defaultValue=""
+        />
+      </FormController>
+      <OButton
+        onClick={handleSubmit(onSubmit)}
+        text={actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{ color: 'white', fontSize: 13 }}
+        imgRightSrc={null}
+        style={style.btnStyle}
+        isDisabled={actionState.loading}
+      />
+    </Container>
+  )
+}
+
+export const SendGiftCard = (props: any) => {
+  const sendGiftCardProps = {
+    ...props,
+    showToastMsg: true,
+    UIComponent: SendGiftCardUI
+  }
+  return <SendGiftCardController {...sendGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/SendGiftCard/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+  margin-bottom: 30px;
+`
+export const FormController = styled.View`
+  margin-bottom: 25px;
+`

package/themes/original/src/components/GoogleLogin/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-	margin-vertical: 20px;
+	margin-bottom: 20px;
 `
 
 export const GoogleButton = styled.TouchableOpacity`

package/themes/original/src/components/GoogleMap/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, Polygon, Circle } from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -18,7 +18,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder,
+    businessZones
   } = props
 
   const [, t] = useLanguage()
@@ -43,7 +45,20 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
-  const geocodePosition = (pos: { latitude: number, longitude: number }) => {
+  const units: any = {
+    mi: 1609,
+    km: 1000
+  }
+
+  const types: any = [1, 2, 5]
+
+  const fillStyles = {
+    fillColor: 'rgba(44, 123, 229, 0.3)',
+    strokeColor: 'rgba(44, 123, 229, 1)',
+    strokeWidth: 2
+  }
+
+  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -68,7 +83,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        handleToggleMap && handleToggleMap()
+        if(!isMovingRegion){
+          handleToggleMap && handleToggleMap()
+        }
       } else {
         setMapErrors && setMapErrors('ERROR_NOT_FOUND_ADDRESS')
       }
@@ -92,6 +109,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
 
     if (distance <= _maxLimitLocation) {
+      if (!aproxEqual(curPos.latitude, center.lat) || !aproxEqual(curPos.longitude, center.lng)){
+        geocodePosition(curPos, true)
+      }
       setMarkerPosition(curPos)
       setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
     } else {
@@ -100,6 +120,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     }
   }
 
+  const aproxEqual = (n1 : number, n2 : number, epsilon = 0.000001) => {
+    return Math.abs(n1 - n2) < epsilon
+  }
+
   const calculateDistance = (pointA: { lat: number, lng: number }, pointB: { latitude: number, longitude: number }) => {
 
     const lat1 = pointA.lat;
@@ -152,8 +176,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({
@@ -219,6 +244,36 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
           />
         )}
+        {businessZones?.length > 0 && businessZones.filter((item: any) => types.includes(item?.type)).map((businessZone: any, i: number) => (
+          <React.Fragment key={i}>
+            {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
+              <Polygon
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.radio * 1000}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 5 && businessZone?.data?.distance) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </MapView>
       <Alert
         open={alertState.open}

package/themes/original/src/components/Help/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RefreshControl } from 'react-native'
+import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
@@ -31,7 +31,7 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
-      pt={10}
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
         <RefreshControl

package/themes/original/src/components/HelpAccountAndPayment/index.tsx

@@ -9,8 +9,9 @@ import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content,
-  HeaderWrapper
+  Container
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const {
@@ -20,15 +21,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 300,
@@ -39,26 +31,13 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <HeaderWrapper>
-        <OButton
-          imgRightSrc={null}
-          style={styles.btnBackArrow}
-          onClick={() => goToBack()}
-          icon={AntDesignIcon}
-          iconProps={{
-            name: 'arrowleft',
-            size: 26
-          }}
-        />
-        <OText
-          size={24}
-          weight={Platform.OS === 'ios' ? '600' : 'bold'}
-          color={theme.colors.textNormal}
-        >
-          {t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
-        </OText>
-      </HeaderWrapper>
+    <Container>
+      <NavBar
+        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
+      />
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
@@ -78,6 +57,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

package/themes/original/src/components/HelpAccountAndPayment/styles.tsx

@@ -4,7 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
-export const HeaderWrapper = styled.View`
-  padding: 10px 20px 20px 0;
-  flex-direction: row;
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
 `

package/themes/original/src/components/HelpGuide/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import NavBar from '../NavBar'
 import {
-  Content
+  Content,
+  Container
 } from './styles'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,7 +37,7 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
       <NavBar
         title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
         onActionLeft={goToBack}
@@ -63,6 +63,6 @@ export const HelpGuide = (props: HelpGuideParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

package/themes/original/src/components/HelpGuide/styles.tsx

@@ -4,3 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
+`