ordering-ui-react-native 0.17.41 → 0.17.42-release

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

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
+import Feather from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../../shared';
+import { OModal } from '../../../../../../src/components/shared';
+import { PurchaseGiftCard } from '../PurchaseGiftCard'
+import { RedeemGiftCard } from '../RedeemGiftCard'
+
+import {
+  Container
+} from './styles'
+
+export const GiftCardUI =  React.memo((props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [openModal, setOpenModal] = useState<any>(null)
+
+  const style = StyleSheet.create({
+    title: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    actionWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 10
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44
+    }
+  })
+
+  const handleCustomGoToCheckout = (uuid: any) => {
+    setOpenModal(null)
+    navigation.navigate('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: uuid
+    })
+  }
+
+  return (
+    <Container>
+      <View style={style.title}>
+        <OText size={16} color={theme.colors.textNormal} weight='bold' mBottom={0} mRight={12}>{t('GIFT_CARD', 'Gift card')}</OText>
+        <Feather name='gift' color={theme.colors.textNormal} size={16} />
+      </View>
+
+      <View style={style.actionWrapper}>
+        <OButton
+          onClick={() => setOpenModal('purchase')}
+          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: 'white', fontSize: 13 }}
+          imgRightSrc={null}
+          style={{ ...style.btnStyle, marginRight: 14 }}
+        />
+
+        <OButton
+          onClick={() => setOpenModal('redeem')}
+          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          bgColor={theme.colors.lightPrimary}
+          borderColor={theme.colors.lightPrimary}
+          textStyle={{ color: theme.colors.primary, fontSize: 13 }}
+          imgRightSrc={null}
+          style={style.btnStyle}
+        />
+      </View>
+
+      <OModal
+				open={openModal === 'purchase'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+			</OModal>
+      <OModal
+				open={openModal === 'redeem'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<RedeemGiftCard
+          onClose={() => setOpenModal(null)}
+        />
+			</OModal>
+    </Container>
+  )
+})

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+`

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

@@ -0,0 +1,100 @@
+import React from 'react'
+import {
+  useLanguage,
+  PurchaseGiftCard as PurchaseGiftCardController
+} from 'ordering-components/native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OIcon } from '../../shared';
+
+import {
+  Container
+} from './styles'
+
+const PurchaseGiftCardUI = (props: any) => {
+  const {
+    productsListState,
+    selectedProduct,
+    setSelectedProduct,
+    handleAccept
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const style = StyleSheet.create({
+    itemStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.disabled
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44,
+      marginTop: 50
+    }
+  })
+
+  return (
+    <Container>
+      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1
+        }}
+      >
+        {productsListState.loading && (
+          [...Array(5).keys()].map(i => (
+            <View key={i} style={style.itemStyle}>
+              <Placeholder
+                Animation={Fade}
+              >
+                <PlaceholderLine width={80} height={20} style={{ marginBottom: 0 }} />
+              </Placeholder>
+            </View>
+          ))
+        )}
+        {productsListState.products.map(product => (
+          <TouchableOpacity
+            key={product.id}
+            style={style.itemStyle}
+            onPress={() => setSelectedProduct(product)}
+          >
+            <View style={{ marginRight: 10 }}>
+              {selectedProduct?.id === product.id ? (
+                <OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+              ) : (
+                <OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+              )}
+            </View>
+            <OText color={theme.colors.textNormal} size={14}>{product.name}</OText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <OButton
+        onClick={() => handleAccept()}
+        text={t('ACCEPT', 'Accept')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{ color: 'white', fontSize: 13 }}
+        imgRightSrc={null}
+        style={style.btnStyle}
+        isDisabled={!selectedProduct}
+      />
+    </Container>
+  )
+}
+
+export const PurchaseGiftCard = (props: any) => {
+  const purchaseGiftCardProps = {
+    ...props,
+    UIComponent: PurchaseGiftCardUI
+  }
+  return <PurchaseGiftCardController {...purchaseGiftCardProps} />
+}

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding-horizontal: 40px;
+  flex: 1;
+  padding-bottom: 30px;
+`

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/GoogleMap/index.tsx

@@ -18,7 +18,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder
   } = props
 
   const [, t] = useLanguage()
@@ -43,7 +44,7 @@ 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 geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -68,7 +69,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 +95,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 +106,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 +162,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({

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,20 +31,20 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
     >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
       />
       <HelpSubItem
@@ -53,7 +53,7 @@ export const Help = (props: HelpParams) => {
         <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       </HelpSubItem>
       <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}      
+        onPress={() => onRedirect('HelpAccountAndPayment')}
       >
         <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       </HelpSubItem>