ordering-ui-react-native 0.24.16 → 0.24.18

package/src/components/StripeRedirectForm/index.tsx

@@ -1,159 +1,159 @@
-import React, { useState, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { StripeRedirectForm as StripeRedirectFormController, useSession, useLanguage, ToastType, useToast } from 'ordering-components/native';
-// import stripe from 'tipsi-stripe';
-
-import {
-  FormRedirect,
-  FormGroup,
-  ErrorMessage
-} from './styles';
-
-import { OButton, ODropDown, OInput, OText } from '../shared';
-import { useTheme } from 'styled-components/native';
-
-const StripeRedirectFormUI = (props: any) => {
-  const {
-    paymethods,
-    publicKey,
-    handleSubmitPaymentMethod
-  } = props;
-
-  const theme = useTheme()
-
-  // stripe.setOptions({
-  //   publishableKey: publicKey,
-  //   // androidPayMode: 'test', // Android only
-  // })
-
-  const [, { showToast }] = useToast();
-  const { control, handleSubmit, errors } = useForm();
-
-  const [{ user }] = useSession();
-  const [, t] = useLanguage();
-
-  const [paymentValue, setPaymentValue] = useState('-1');
-
-  const onSubmit = (values: any) => {
-    console.log('onSubmit', values);
-    // handleSubmitPaymentMethod && handleSubmitPaymentMethod();
-  }
-
-  const handleChangeBankOption = (option: any) => {
-    console.log('option', option);
-    // setPaymentValue(option.value)
-  }
-
-  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`
-      })
-      showToast(ToastType.Error, stringError)
-    }
-  }, [errors])
-
-  const handleCreateSource = async () => {
-    // try {
-    //   // this.setState({ loading: true, source: null })
-    //   const source = await stripe.createSourceWithParams({
-    //     type: 'alipay',
-    //     amount: 50,
-    //     currency: 'USD',
-    //     returnURL: 'https://www.google.com/',
-    //   })
-    //   // this.setState({ loading: false, source })
-    //   console.log('source', source);
-    // } catch (error) {
-    //   // this.setState({ loading: false })
-    //   console.log(error);
-    // }
-  }
-
-  return (
-    <FormRedirect>
-      <FormGroup>
-        <OText size={24}>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</OText>
-        <ODropDown
-          options={paymethods}
-          defaultValue={paymentValue}
-          onSelect={(option: any) => handleChangeBankOption(option)}
-        />
-        {/* {errors.type && errors.type.type === 'required' && (
-          <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
-        )} */}
-        {/* {errors && (
-          <OText>
-            {JSON.stringify(errors)}
-          </OText>
-        )} */}
-      </FormGroup>
-
-      {/* <FormGroup>
-        <Controller
-          control={control}
-          render={({ onChange, value }) => (
-            <OInput
-              placeholder={t('TYPE_ACCOUNT_HOLDER', 'Type an Account holder')}
-              // style={styles.inputStyle}
-              icon={IMAGES.user}
-              value={value}
-              onChange={(val: any) => onChange(val)}
-            />
-          )}
-          name="name"
-          rules={{
-            required: t(`VALIDATION_ERROR_NAME_REQUIRED`, 'Name is required'),
-          }}
-          defaultValue={user?.name}
-        />
-      </FormGroup>
-
-      <FormGroup>
-        <Controller
-          control={control}
-          render={({ onChange, value }) => (
-            <OInput
-              placeholder={t('TYPE_AN_EMAIL', 'Type an email')}
-              icon={IMAGES.email}
-              value={value}
-              onChange={(val: any) => onChange(val)}
-              autoCapitalize='none'
-            />
-          )}
-          name="email"
-          rules={{
-            required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
-            pattern: {
-              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-              message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-            }
-          }}
-          defaultValue={user?.email}
-        />
-      </FormGroup> */}
-
-      <OButton
-        // text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
-        text={t('OK', 'OK')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{color: 'white'}}
-        imgRightSrc={null}
-        // isDisabled={formState.isSubmitting}
-        // onClick={() => handleSubmit(onSubmit)}
-        onClick={() => handleCreateSource()}
-      />
-    </FormRedirect>
-  )
-}
-
-export const StripeRedirectForm = (props: any) => {
-  const stripeRedirectFormProps = {
-    ...props,
-    UIComponent: StripeRedirectFormUI
-  }
-  return <StripeRedirectFormController {...stripeRedirectFormProps} />
-}
+import React, { useState, useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { StripeRedirectForm as StripeRedirectFormController, useSession, useLanguage, ToastType, useToast } from 'ordering-components/native';
+// import stripe from 'tipsi-stripe';
+
+import {
+  FormRedirect,
+  FormGroup,
+  ErrorMessage
+} from './styles';
+
+import { OButton, ODropDown, OInput, OText } from '../shared';
+import { useTheme } from 'styled-components/native';
+
+const StripeRedirectFormUI = (props: any) => {
+  const {
+    paymethods,
+    publicKey,
+    handleSubmitPaymentMethod
+  } = props;
+
+  const theme = useTheme()
+
+  // stripe.setOptions({
+  //   publishableKey: publicKey,
+  //   // androidPayMode: 'test', // Android only
+  // })
+
+  const [, { showToast }] = useToast();
+  const { control, handleSubmit, errors } = useForm();
+
+  const [{ user }] = useSession();
+  const [, t] = useLanguage();
+
+  const [paymentValue, setPaymentValue] = useState('-1');
+
+  const onSubmit = (values: any) => {
+    console.log('onSubmit', values);
+    // handleSubmitPaymentMethod && handleSubmitPaymentMethod();
+  }
+
+  const handleChangeBankOption = (option: any) => {
+    console.log('option', option);
+    // setPaymentValue(option.value)
+  }
+
+  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`
+      })
+      showToast(ToastType.Error, stringError)
+    }
+  }, [errors])
+
+  const handleCreateSource = async () => {
+    // try {
+    //   // this.setState({ loading: true, source: null })
+    //   const source = await stripe.createSourceWithParams({
+    //     type: 'alipay',
+    //     amount: 50,
+    //     currency: 'USD',
+    //     returnURL: 'https://www.google.com/',
+    //   })
+    //   // this.setState({ loading: false, source })
+    //   console.log('source', source);
+    // } catch (error) {
+    //   // this.setState({ loading: false })
+    //   console.log(error);
+    // }
+  }
+
+  return (
+    <FormRedirect>
+      <FormGroup>
+        <OText size={24}>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</OText>
+        <ODropDown
+          options={paymethods}
+          defaultValue={paymentValue}
+          onSelect={(option: any) => handleChangeBankOption(option)}
+        />
+        {/* {errors.type && errors.type.type === 'required' && (
+          <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+        )} */}
+        {/* {errors && (
+          <OText>
+            {JSON.stringify(errors)}
+          </OText>
+        )} */}
+      </FormGroup>
+
+      {/* <FormGroup>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <OInput
+              placeholder={t('TYPE_ACCOUNT_HOLDER', 'Type an Account holder')}
+              // style={styles.inputStyle}
+              icon={IMAGES.user}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+            />
+          )}
+          name="name"
+          rules={{
+            required: t(`VALIDATION_ERROR_NAME_REQUIRED`, 'Name is required'),
+          }}
+          defaultValue={user?.name}
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <OInput
+              placeholder={t('TYPE_AN_EMAIL', 'Type an email')}
+              icon={IMAGES.email}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+            />
+          )}
+          name="email"
+          rules={{
+            required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+              message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
+            }
+          }}
+          defaultValue={user?.email}
+        />
+      </FormGroup> */}
+
+      <OButton
+        // text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
+        text={t('OK', 'OK')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{color: 'white'}}
+        imgRightSrc={null}
+        // isDisabled={formState.isSubmitting}
+        // onClick={() => handleSubmit(onSubmit)}
+        onClick={() => handleCreateSource()}
+      />
+    </FormRedirect>
+  )
+}
+
+export const StripeRedirectForm = (props: any) => {
+  const stripeRedirectFormProps = {
+    ...props,
+    UIComponent: StripeRedirectFormUI
+  }
+  return <StripeRedirectFormController {...stripeRedirectFormProps} />
+}

package/src/components/StripeRedirectForm/styles.tsx

@@ -1,23 +1,23 @@
-import styled, { css } from 'styled-components/native';
-
-export const FormRedirect = styled.View`
-  display: flex;
-  flex-direction: column;
-  padding-left: 10px;
-  /* ${(props: any) => props.theme?.rtl && css`
-    padding-right: 10px;
-    padding-left: 0px;
-  `} */
-`
-
-export const FormGroup = styled.View`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-`
-
-export const ErrorMessage = styled.View`
-  color: #D81212;
-  margin: 10px 0 0 0;
-  font-weight: bold;
-`
+import styled, { css } from 'styled-components/native';
+
+export const FormRedirect = styled.View`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  /* ${(props: any) => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0px;
+  `} */
+`
+
+export const FormGroup = styled.View`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+`
+
+export const ErrorMessage = styled.View`
+  color: #D81212;
+  margin: 10px 0 0 0;
+  font-weight: bold;
+`

package/src/components/TaxInformation/index.tsx

@@ -1,83 +1,83 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { SingleProductCard } from '../SingleProductCard'
-import { TaxInformationContainer, ProductContainer } from './styles'
-import { OText } from '../shared'
-
-interface taxInformationParams {
-  data: {
-    name: string,
-    description?: string,
-    rate: string | number,
-    type: number,
-    fixed?: number,
-    percentage?: number,
-    id: number,
-    discounts?: any
-  },
-  products: Array<any>,
-  type: string
-}
-
-export const TaxInformation = (props: taxInformationParams) => {
-  const {
-    data,
-    products,
-    type
-  } = props
-
-  const [, t] = useLanguage()
-
-  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
-
-  const getFilterValidation = (product: any) => {
-    return (
-      type === 'tax'
-        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
-        : type === 'fee'
-          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
-    )
-  }
-
-  const getTypeString = () => {
-    return (
-      type === 'offer_target_1'
-        ? t('PRODUCT_DISCOUNT', 'Product discount')
-        : type === 'tax'
-          ? t('TAX', 'Tax')
-          : t('Fee', 'Fee')
-    )
-  }
-
-  return (
-    <TaxInformationContainer>
-      {!!data?.description ? (
-        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
-        </OText>
-      ) : (
-        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('WITHOUT_DESCRIPTION', 'Without description')}
-        </OText>
-      )}
-      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
-        <>
-          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
-          <ProductContainer>
-            {
-              products.filter((product: any) => getFilterValidation(product)).map(product => (
-                <SingleProductCard
-                  key={product.id}
-                  product={product}
-                  isSoldOut={false}
-                  businessId={product?.business_id}
-                />
-              ))
-            }
-          </ProductContainer>
-        </>
-      )}
-    </TaxInformationContainer>
-  )
-}
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { SingleProductCard } from '../SingleProductCard'
+import { TaxInformationContainer, ProductContainer } from './styles'
+import { OText } from '../shared'
+
+interface taxInformationParams {
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  },
+  products: Array<any>,
+  type: string
+}
+
+export const TaxInformation = (props: taxInformationParams) => {
+  const {
+    data,
+    products,
+    type
+  } = props
+
+  const [, t] = useLanguage()
+
+  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
+  return (
+    <TaxInformationContainer>
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
+        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
+        </OText>
+      )}
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
+    </TaxInformationContainer>
+  )
+}

package/src/components/TaxInformation/styles.tsx

@@ -1,9 +1,9 @@
-import styled from 'styled-components/native'
-
-export const TaxInformationContainer = styled.ScrollView`
-  padding: 10px;
-`
-
-export const ProductContainer = styled.View`
-  flex: 1
-`
+import styled from 'styled-components/native'
+
+export const TaxInformationContainer = styled.ScrollView`
+  padding: 10px;
+`
+
+export const ProductContainer = styled.View`
+  flex: 1
+`