ordering-ui-react-native 0.12.55 → 0.12.59

package/themes/franchises/src/components/StripeElementsForm/index.tsx

@@ -1,204 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, useWindowDimensions } from 'react-native';
-import { useLanguage, useSession } from 'ordering-components/native';
-import {
-	StripeProvider,
-	CardField,
-	useConfirmSetupIntent,
-	createPaymentMethod
-} from '@stripe/stripe-react-native';
-import { useTheme } from 'styled-components/native';
-import { ErrorMessage } from './styles';
-
-import { StripeElementsForm as StripeFormController } from './naked';
-import { OButton, OText } from '../shared';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const StripeElementsFormUI = (props: any) => {
-	const {
-		publicKey,
-		handleSource,
-		values,
-		businessId,
-		requirements,
-		stripeTokenHandler,
-	} = props;
-
-	const theme = useTheme();
-
-	const [, t] = useLanguage();
-	const [{ user }] = useSession();
-	const [card, setCard] = useState<any>(null);
-	const [isCompleted, setIsCompleted] = useState(false);
-	const [errors, setErrors] = useState('')
-	const { confirmSetupIntent, loading: confirmSetupLoading } = useConfirmSetupIntent();
-	const [createPmLoading, setCreatePmLoading] = useState(false);
-	const { height } = useWindowDimensions();
-	const { top, bottom } = useSafeAreaInsets();
-
-	const billingDetails = {
-		name: `${user.name} ${user.lastname}`,
-		email: user.email,
-		addressLine1: user.address
-	};
-
-	const createPayMethod = async () => {
-		try {
-			setCreatePmLoading(true)
-			const { paymentMethod } = await createPaymentMethod({
-				type: 'Card',
-				billingDetails,
-			});
-
-			setCreatePmLoading(false)
-			handleSource && handleSource({
-				id: paymentMethod.id,
-				type: 'card',
-				card: {
-					brand: paymentMethod.Card.brand,
-					last4: paymentMethod.Card.last4
-				}
-			})
-
-			// if (error) {
-			//   setErrors(
-			//     error?.code === 'Unknown'
-			//       ? t('ERROR_ADD_CARD', 'An error occurred while trying to add a card')
-			//       : error.message
-			//   );
-			// }
-		} catch (error: any) {
-			setErrors(error?.message || error?.toString());
-		}
-	}
-
-	const handleSaveCard = async () => {
-		setErrors('');
-		if (!requirements) {
-			createPayMethod();
-			return
-		}
-		try {
-			const { setupIntent, error } = await confirmSetupIntent(requirements, {
-				type: 'Card',
-				billingDetails,
-			});
-
-			if (setupIntent?.status === 'Succeeded') {
-				stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
-			}
-
-			if (error) {
-				setErrors(
-					error?.code === 'Unknown'
-						? t('ERROR_ADD_CARD', 'An error occurred while trying to add a card')
-						: error.message
-				);
-			}
-		} catch (error: any) {
-			setErrors(error?.message || error?.toString());
-		}
-	};
-
-	useEffect(() => {
-		if (card) {
-			setIsCompleted(
-				!!card?.last4 &&
-				!!card?.expiryMonth &&
-				!!card?.expiryYear &&
-				!!card?.brand &&
-				!!card?.postalCode
-			)
-		}
-	}, [card])
-
-	return (
-		<View style={{ ...styles.container, ...{ height: height - top - bottom - 60 } }}>
-			{publicKey ? (
-				<View style={{ flex: 1 }}>
-					<StripeProvider publishableKey={publicKey}>
-						<CardField
-							postalCodeEnabled={true}
-							cardStyle={{
-								backgroundColor: '#FFFFFF',
-								textColor: '#000000',
-								styles: {
-
-								}
-							}}
-							style={{
-								width: '100%',
-								height: 50,
-								marginVertical: 50,
-								borderWidth: 1,
-								borderColor: theme.colors.border,
-								borderRadius: 7.6
-							}}
-							onCardChange={(cardDetails: any) => setCard(cardDetails)}
-						/>
-					</StripeProvider>
-					{!!errors && (
-						<ErrorMessage>
-							<OText
-								size={20}
-								color={theme.colors.error}
-								style={{ marginTop: 20, textAlign: 'center' }}
-							>
-								{errors}
-							</OText>
-						</ErrorMessage>
-					)}
-				</View>
-			) : (
-				<ErrorMessage>
-					<OText
-						size={20}
-						color={theme.colors.error}
-						style={{ marginTop: 20 }}
-					>
-						{t('SOMETHING_WRONG', 'Something is wrong!')}
-					</OText>
-				</ErrorMessage>
-			)}
-			<OButton
-				text={t('SAVE_CARD', 'Save card')}
-				bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-				borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-				style={styles.btnAddStyle}
-				textStyle={{ color: 'white', fontSize: 14 }}
-				imgRightSrc={null}
-				onClick={isCompleted ? () => handleSaveCard() : () => { }}
-				isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-			/>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		width: '100%',
-		paddingHorizontal: 40,
-		justifyContent: 'space-between',
-		paddingBottom: 12
-	},
-	btnAddStyle: {
-		marginTop: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44
-	},
-})
-
-export const StripeElementsForm = (props: any) => {
-	const stripeProps = {
-		...props,
-		UIComponent: StripeElementsFormUI,
-		onSelectCard: (card: any) => {
-			props.onSelectCard(card);
-			if (card) {
-				props.onCancel && props.onCancel();
-			}
-		}
-	}
-	return <StripeFormController {...stripeProps} />
-}

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

@@ -1,90 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useApi, useSession } from 'ordering-components/native';
-
-export const StripeElementsForm = (props: any) => {
-  const {
-    UIComponent,
-    toSave
-  } = 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) => {
-    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();
-      props.onSelectCard && props.onSelectCard(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}
-    />
-  )
-}

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

@@ -1,13 +0,0 @@
-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/franchises/src/components/StripeRedirectForm/index.tsx

@@ -1,159 +0,0 @@
-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} />
-}

package/themes/franchises/src/components/StripeRedirectForm/styles.tsx

@@ -1,23 +0,0 @@
-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/themes/franchises/src/components/TagSelector/index.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
-import { useTheme } from 'styled-components/native';
-// import { TouchableOpacity } from 'react-native-gesture-handler';
-
-interface TProps {
-	items: Array<string>;
-	onUpdated?: (items: Array<TItem>) => void;
-	activeColor?: string;
-	normalColor?: string; 
-}
-
-interface TItem {
-	id: number;
-	label: string;
-	checked: boolean;
-}
-
-const TagSelector = (props: TProps) => {
-	const { items, onUpdated, activeColor, normalColor } = props;
-	const theme = useTheme();
-	const [tags, setTags] = useState<TItem[]>([]);
-
-	const onCheck = (tag: TItem, remove?: boolean) => {
-		let temp = [...tags];
-		temp[tag.id].checked = remove ? !temp[tag.id].checked : true;
-		setTags(temp);
-	}
-	
-	useEffect(() => {
-		const tagItems = items.map((str, idx) => 
-			{
-				return {
-					id: idx,
-					label: str,
-					checked: false,
-				}	
-			}
-		)
-		setTags(tagItems);
-	}, [items]);
-
-	useEffect(() => {
-		if (onUpdated) onUpdated(tags);
-	}, [tags]);
-
-	return (
-		<View style={tcStyles.wrapper}>
-			{tags.map((t, idx) => 
-				<TouchableOpacity key={idx} activeOpacity={0.8} onPress={() => onCheck(t)} 
-					style={{...tcStyles.item, backgroundColor: t.checked === true ? activeColor || 'blue' : normalColor || '#eee'}}>
-					<Text style={{fontSize: 10, color: t.checked ? 'white' : 'black'}}>{t.label}</Text>
-					{t.checked &&
-						<TouchableOpacity onPress={() => onCheck(t, true)} style={tcStyles.remove}>
-							<Image source={theme.images.general.close} style={tcStyles.removeIcon} />
-						</TouchableOpacity>
-					}
-				</TouchableOpacity>
-			)}
-		</View>
-	)
-}
-
-const tcStyles = StyleSheet.create({
-	wrapper: {
-		flexDirection: 'row',
-		flexShrink: 1,
-		flexWrap: 'wrap'
-	},
-	item: {
-		borderRadius: 20,
-		paddingHorizontal: 12,
-		paddingVertical: 5,
-		marginEnd: 10,
-		backgroundColor: '#EEE',
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'space-between',
-		marginBottom: 14,
-		minHeight: 24
-	},
-	remove: {
-		padding: 2,
-		marginStart: 12,
-	},
-	removeIcon: {
-		width: 7,
-		height: 7,
-		resizeMode: 'contain',
-		tintColor: 'white'
-	},
-});
-
-export default TagSelector;

package/themes/franchises/src/components/TaxInformation/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { useLanguage, useUtils } 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 },
-  products: Array<any>
-}
-
-export const TaxInformation = (props: taxInformationParams) => {
-  const {
-    data,
-    products
-  } = props
-
-  const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
-
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
-  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
-
-  return (
-    <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
-        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
-        </OText>
-      )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
-    </TaxInformationContainer>
-  )
-}

package/themes/franchises/src/components/TaxInformation/styles.tsx

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