ordering-ui-react-native 0.17.72 → 0.17.74

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

@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  useLanguage,
+  PurchaseGiftCard as PurchaseGiftCardController
+} from 'ordering-components/native'
+import { StyleSheet, View, TouchableOpacity } 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>
+      <View>
+        {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>
+        ))}
+      </View>
+      <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,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding-horizontal: 40px;
+`

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

@@ -0,0 +1,178 @@
+import React, { useEffect } 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 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)
+  }
+
+  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='0000 0000'
+                value={value}
+                onChange={(val: any) => onChange(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>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>
+            <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;
+`