ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -1,101 +1,148 @@
-import React, { useEffect, useState } from 'react';
-import { useApi, useSession } from 'ordering-components/native';
-
-export const StripeElementsForm = (props: any) => {
-  const {
-    UIComponent,
-    toSave,
-    setCardsList,
-    cardsList,
-    handleCardClick
-  } = props;
-
-  const [ordering] = useApi();
-  const [{ token }] = useSession();
-  const [state, setState] = useState({ loading: false, loadingAdd: false, error: null, requirements: null });
-
-  const getRequirements = async () => {
-    try {
-      setState({
-        ...state,
-        loading: true
-      })
-      const response = await fetch(
-        `${ordering.root}/payments/stripe/requirements?type=add_card`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`
-          }
-        }
-      )
-      const { result } = await response.json();
-      setState({
-        ...state,
-        loading: false,
-        requirements: result
-      })
-    } catch (error) {
-      setState({
-        ...state,
-        loading: false,
-        error
-      })
-    }
-  }
-
-  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string, isNewCard: any = true) => {
-    try {
-      setState({
-        ...state,
-        loadingAdd: true
-      })
-      const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${user?.session?.access_token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          business_id: businessId,
-          gateway: 'stripe',
-          token_id: tokenId,
-          user_id: user?.id
-        })
-      })
-      const response = await result.json();
-      isNewCard && props.onSelectCard && props.onSelectCard(response.result);
-      setCardsList && setCardsList({
-        ...cardsList,
-        cards: [
-          ...cardsList.cards,
-          response.result
-        ]
-      })
-      handleCardClick(response.result)
-      setState({
-        ...state,
-        loadingAdd: false
-      })
-    } catch (error) {
-      setState({
-        ...state,
-        loadingAdd: false,
-        error
-      })
-    }
-  }
-
-  useEffect(() => {
-    if (!token || state.requirements) return
-    toSave && getRequirements()
-  }, [token])
-
-  return (
-    <UIComponent
-      {...props}
-      values={state}
-      requirements={state.requirements}
-      stripeTokenHandler={stripeTokenHandler}
-    />
-  )
-}
+import React, { useEffect, useState } from 'react';
+import { useApi, useSession } from 'ordering-components/native';
+
+export const StripeElementsForm = (props: any) => {
+  const {
+    UIComponent,
+    toSave,
+    setCardsList,
+    cardsList,
+    handleCardClick
+  } = props;
+
+  const [ordering] = useApi();
+  const [{ token }] = useSession();
+  const [state, setState] = useState({ loading: false, loadingAdd: false, error: null, requirements: null });
+  const [publicKeyState, setPublicKeyState] = useState({ key: props.publicKey, loading: true, error: null })
+
+  const getRequirements = async () => {
+    try {
+      setState({
+        ...state,
+        loading: true
+      })
+      const response = await fetch(
+        `${ordering.root}/payments/stripe/requirements?type=add_card`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      )
+      const { result } = await response.json();
+      setState({
+        ...state,
+        loading: false,
+        requirements: result
+      })
+    } catch (error) {
+      setState({
+        ...state,
+        loading: false,
+        error
+      })
+    }
+  }
+
+  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string, isNewCard: any = true) => {
+    try {
+      setState({
+        ...state,
+        loadingAdd: true
+      })
+      const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          business_id: businessId,
+          gateway: 'stripe',
+          token_id: tokenId,
+          user_id: user?.id
+        })
+      })
+      const response = await result.json();
+      isNewCard && props.onSelectCard && props.onSelectCard(response.result);
+      setCardsList && setCardsList({
+        ...cardsList,
+        cards: [
+          ...cardsList.cards,
+          response.result
+        ]
+      })
+      handleCardClick(response.result)
+      setState({
+        ...state,
+        loadingAdd: false
+      })
+    } catch (error) {
+      setState({
+        ...state,
+        loadingAdd: false,
+        error
+      })
+    }
+  }
+
+  /**
+   * Method to get stripe credentials from API
+   */
+  const getCredentials = async () => {
+    try {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: true
+      })
+      const { content: { result, error } } = await ordering.setAccessToken(token).paymentCards().getCredentials()
+      if (!error) {
+        setPublicKeyState({
+          loading: false,
+          key: result.publishable,
+          error: null
+        })
+      } else {
+        setPublicKeyState({
+          ...publicKeyState,
+          loading: false,
+          error: result
+        })
+      }
+    } catch (error) {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: false,
+        error: error.message
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!token) return
+    if (props.publicKey) {
+      setPublicKeyState({
+        loading: false,
+        key: props.publicKey,
+        error: null
+      })
+    } else {
+      getCredentials()
+    }
+  }, [token, props.publicKey])
+
+  useEffect(() => {
+    if (!token || state.requirements) return
+    toSave && getRequirements()
+  }, [token])
+
+  return (
+    <UIComponent
+      {...props}
+      values={state}
+      requirements={state.requirements}
+      stripeTokenHandler={stripeTokenHandler}
+      publicKeyState={publicKeyState}
+    />
+  )
+}

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

@@ -1,13 +1,13 @@
-import styled, { css } from 'styled-components/native';
-
-export const ErrorMessage = styled.View`
-  color: ${(props: any) => props.theme.colors.cancelColor};
-  font-size: 24px;
-  padding-left: 10px;
-  font-weight: bold;
-  opacity: 0.8;
-  /* ${(props: any) => props.theme?.rtl && css`
-    padding-right: 10px;
-    padding-left: 0px;
-  `} */
-`;
+import styled, { css } from 'styled-components/native';
+
+export const ErrorMessage = styled.View`
+  color: ${(props: any) => props.theme.colors.cancelColor};
+  font-size: 24px;
+  padding-left: 10px;
+  font-weight: bold;
+  opacity: 0.8;
+  /* ${(props: any) => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0px;
+  `} */
+`;

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

@@ -1,159 +1,156 @@
-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 { useTheme } from 'styled-components/native';
-// import stripe from 'tipsi-stripe';
-
-import {
-	FormRedirect,
-	FormGroup,
-	ErrorMessage
-} from './styles';
-
-import { OButton, ODropDown, OInput, OText } from '../shared';
-
-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 { useTheme } from 'styled-components/native';
+// import stripe from 'tipsi-stripe';
+
+import {
+	FormRedirect,
+	FormGroup,
+	ErrorMessage
+} from './styles';
+
+import { OButton, ODropDown, OInput, OText } from '../shared';
+
+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')}
+				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/themes/original/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;
+`