ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,124 +0,0 @@
-import React from 'react';
-import {
-	useLanguage,
-	useConfig,
-	useOrder,
-	useUtils,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut } from './styles';
-import { StyleSheet } from 'react-native';
-import { OText, OIcon } from '../shared';
-
-export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick } = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		container: {
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.border,
-			marginBottom: 28,
-		},
-		line18: {
-			lineHeight: 18,
-		},
-		line15: {
-			lineHeight: 15,
-		},
-		soldOutBackgroundStyle: {
-			backgroundColor: '#B8B8B8',
-		},
-		soldOutTextStyle: {
-			textTransform: 'uppercase',
-		},
-		productStyle: {
-			width: 75,
-			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
-		},
-	});
-
-
-	const [, t] = useLanguage();
-	const [stateConfig] = useConfig();
-	const [{ parsePrice, optimizeImage }] = useUtils();
-	const [orderState] = useOrder();
-
-	const editMode = typeof product?.code !== 'undefined';
-
-	const removeToBalance = editMode ? product?.quantity : 0;
-	const cart = orderState.carts[`businessId:${businessId}`];
-	const productCart = cart?.products?.find(
-		(prod: any) => prod.id === product?.id,
-	);
-	const totalBalance = (productCart?.quantity || 0) - removeToBalance;
-
-	const maxCartProductConfig =
-		(stateConfig.configs.max_product_amount
-			? parseInt(stateConfig.configs.max_product_amount)
-			: 100) - totalBalance;
-
-	const productBalance =
-		(cart?.products?.reduce(
-			(sum: any, _product: any) =>
-				sum + (product && _product.id === product?.id ? _product.quantity : 0),
-			0,
-		) || 0) - removeToBalance;
-	let maxCartProductInventory =
-		(product?.inventoried ? product?.quantity : undefined) - productBalance;
-	maxCartProductInventory = !isNaN(maxCartProductInventory)
-		? maxCartProductInventory
-		: maxCartProductConfig;
-
-	const maxProductQuantity = Math.min(
-		maxCartProductConfig,
-		maxCartProductInventory,
-	);
-
-	return (
-		<CardContainer
-			style={[
-				styles.container,
-				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-			]}
-			onPress={() => onProductClick?.(product)}>
-			<CardInfo>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
-				<OText size={12} weight={'400'} style={styles.line18} color={theme.colors.textNormal}>
-					{parsePrice(product?.price)}
-				</OText>
-				<OText
-					size={10}
-					numberOfLines={2}
-					ellipsizeMode="tail"
-					color={theme.colors.textSecondary}
-					style={styles.line15}>
-					{product?.description}
-				</OText>
-			</CardInfo>
-			<OIcon
-				url={optimizeImage(product?.images, 'h_200,c_limit')}
-				style={styles.productStyle}
-			/>
-			{(isSoldOut || maxProductQuantity <= 0) && (
-				<SoldOut>
-					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
-						{t('SOLD_OUT', 'SOLD OUT')}
-					</OText>
-				</SoldOut>
-			)}
-		</CardContainer>
-	);
-};

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

@@ -1,23 +0,0 @@
-import styled from 'styled-components/native'
-
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border-radius: 10px;
-  position: relative;
-`
-export const CardInfo = styled.View`
-  padding-start: 3px;
-  flex: 1;
-`
-export const SoldOut = styled.View`
-  position: absolute;
-  background: ${(props: any) => props.theme.colors.backgroundGray100} 0% 0% no-repeat padding-box;
-  border-radius: 23px;
-  padding: 5px 10px;
-  top: 37px;
-  end: 10px;
-`

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

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
-import { CreditCardInput } from 'react-native-credit-card-input';
-import { StripeCardForm as CardForm } from './naked';
-import { useTheme } from 'styled-components/native';
-import {
-	FormStripe,
-	FormRow,
-	ErrorMessage,
-	FormActions
-} from './styles';
-
-import { OButton, OText } from '../shared';
-
-const StripeCardFormUI = (props: any) => {
-	const {
-		stateCardForm,
-		handleCancel,
-		publicKey
-	} = props;
-
-	const theme = useTheme();
-
-	const { error, loading } = stateCardForm;
-
-	const [, t] = useLanguage();
-	const [cardState, setCardState] = useState<any>(null)
-
-	const handleChange = (values: any) => setCardState(values);
-
-	const handleSubmit = () => props.handleSubmit && props.handleSubmit(cardState)
-
-	return (
-		<FormStripe>
-			<FormRow style={{ marginTop: 30 }}>
-				<CreditCardInput
-					autoFocus
-					requiresCVC
-					labelStyle={styles.label}
-					inputStyle={styles.input}
-					validColor={'#000000'}
-					invalidColor={theme.colors.cancelColor}
-					placeholderColor={theme.colors.backgroundGray}
-					onChange={handleChange}
-				/>
-				<ErrorMessage>
-					<OText color={theme.colors.error} style={{ textAlign: 'center' }}>
-						{error}
-					</OText>
-				</ErrorMessage>
-			</FormRow>
-			<FormActions>
-				<View style={{ width: '49%' }}>
-					<OButton
-						text={t('CANCEL', 'Cancel')}
-						bgColor={theme.colors.backgroundGray}
-						borderColor={theme.colors.backgroundGray}
-						textStyle={{ color: 'white' }}
-						imgRightSrc={null}
-						onClick={() => handleCancel()}
-					/>
-				</View>
-				<View style={{ width: '49%' }}>
-					<OButton
-						text={loading ? t('LOADING', 'Loading...') : t('ADD', 'Add')}
-						isDisabled={!cardState?.valid || loading}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white' }}
-						imgRightSrc={null}
-						onClick={handleSubmit}
-					/>
-				</View>
-			</FormActions>
-		</FormStripe>
-	)
-}
-
-const styles = StyleSheet.create({
-	label: {
-		color: '#000',
-		fontSize: 14,
-	},
-	input: {
-		fontSize: 18,
-		color: '#000'
-	},
-})
-
-export const StripeCardForm = (props: any) => {
-	const cardFormProps = {
-		...props,
-		UIComponent: StripeCardFormUI
-	}
-	return <CardForm {...cardFormProps} />
-}

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

@@ -1,128 +0,0 @@
-import React, { useState } from 'react';
-import { useSession, useApi, useLanguage, useOrder } from 'ordering-components/native';
-// import stripe from 'tipsi-stripe';
-
-export const StripeCardForm = (props: any) => {
-  const {
-    UIComponent,
-    toSave,
-    onNewCard,
-    publicKey,
-    requirements,
-    handleSource,
-    handleCustomSubmit
-  } = props;
-
-  const [{ user }] = useSession();
-  const [orderState] = useOrder();
-  const [ordering] = useApi();
-  const [, t] = useLanguage();
-
-  // stripe.setOptions({
-  //   publishableKey: publicKey,
-  //   // androidPayMode: 'test', // Android only
-  // })
-
-  const [state, setState] = useState<any>({ error: null, loading: false })
-
-  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string) => {
-    try {
-      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();
-      onNewCard && onNewCard(response.result);
-    } catch (error) {
-      setState({
-        ...state,
-        loading: false,
-        error
-      })
-    }
-  }
-
-  const handleSubmit = async (creditCardData: any) => {
-    if (handleCustomSubmit) {
-      return handleCustomSubmit(creditCardData);
-    }
-
-    // if (!stripe) {
-    //   setState({
-    //     ...state,
-    //     error: t('STRIPE_LOAD_ERROR', 'Faile to load Stripe properly')
-    //   })
-    //   return
-    // }
-
-    setState({ ...state, loading: true });
-
-    // try {
-    //   const paymentMethod = await stripe.createPaymentMethod({
-    //     card: {
-    //       number : creditCardData.values.number.replace(/ /g, ''),
-    //       cvc : creditCardData.values.cvc,
-    //       expMonth : parseInt(creditCardData.values.expiry.split('/')[0], 10),
-    //       expYear : parseInt(creditCardData.values.expiry.split('/')[1], 10)
-    //     },
-    //     billingDetails: {
-    //       name: `${user.name} ${user.lastname}`,
-    //       email: user.email,
-    //       address: {
-    //         line1: orderState.options.address.address,
-    //         postalCode: orderState.options.address.zipcode
-    //       }
-    //     }
-    //   });
-    //   if (paymentMethod?.error) {
-    //     setState({
-    //       ...state,
-    //       loading: false,
-    //       error: paymentMethod?.error
-    //     })
-    //     return
-    //   }
-    //   setState({ ...state, loading: false })
-    //   if (handleSource) {
-    //     handleSource && handleSource({
-    //       id: paymentMethod?.id,
-    //       type: 'card',
-    //       card: {
-    //         brand: paymentMethod?.card?.brand,
-    //         last4: paymentMethod?.card?.last4
-    //       }
-    //     })
-    //     return
-    //   }
-    //   toSave && stripeTokenHandler(paymentMethod?.id, user, props.businessId);
-    // } catch (e) {
-    //   setState({
-    //     ...state,
-    //     loading: false,
-    //     error: e?.toString() || e?.message.toString()
-    //   })
-    // }
-    setState({ ...state, loading: false });
-  };
-
-  return (
-    <UIComponent
-      {...props}
-      stateCardForm={state}
-      handleSubmit={handleSubmit}
-    />
-  )
-}
-
-StripeCardForm.defaultProps = {
-  autosave: true
-}

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

@@ -1,32 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const FormStripe = styled.ScrollView`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex-grow: 0;
-`
-
-export const FormRow = styled.View``
-
-export const ErrorMessage = styled.View`
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 10px;
-  /* margin-bottom: 20px; */
-  color: #D81212;
-  margin: 10px 0px 0px 10px;
-
-  /* ${(props: any) => props.theme?.rtl && css`
-    margin: 10px 10px 0px 0px;
-  `} */
-`
-
-export const FormActions = styled.View`
-  width: 100%;
-  display: flex;
-  padding: 30px 20px 0px;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 20px;
-`

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

@@ -1,182 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import {
-	PaymentOptionStripe,
-	useSession,
-	useLanguage,
-} from 'ordering-components/native';
-import { PlaceholderLine } from 'rn-placeholder';
-import { useTheme } from 'styled-components/native';
-import { getIconCard } from '../../utils';
-import { OAlert, OIcon, OText } from '../shared';
-
-import { NotFoundSource } from '../NotFoundSource';
-
-import {
-	OSItem,
-	OSItemContent,
-	OSItemActions,
-} from '../PaymentOptionStripe/styles';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import Icon from 'react-native-vector-icons/Feather';
-
-const StripeCardsListUI = (props: any) => {
-	const {
-		onSelectCard,
-		deleteCard,
-		cardSelected,
-		cardsList,
-		handleCardClick,
-	} = props;
-
-	const theme = useTheme();
-
-	const [{ token }] = useSession();
-	const [, t] = useLanguage();
-	const [showOption, setShowOption] = useState({id: 0, status: false});
-
-	const handleCardSelected = (card: any) => {
-		handleCardClick(card);
-		onSelectCard(card);
-		setShowOption({id: showOption.id, status: false});
-	}
-
-	const handleShowOption = (idx: number) => {
-		if (idx == showOption.id) {
-			setShowOption({id: idx, status: !showOption.status});
-		} else {
-			setShowOption({id: idx, status: true});
-		}
-	}
-
-	return (
-		<>
-			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
-				<OSItem style={{ justifyContent: 'center', paddingTop: 0 }}>
-					<OText size={22}>
-						{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}
-					</OText>
-				</OSItem>
-			)}
-
-			{token && cardsList.error && cardsList.error.length > 0 && (
-				<NotFoundSource
-					content={cardsList?.error[0]?.message || cardsList?.error[0]}
-				/>
-			)}
-
-			{token && cardsList.loading && (
-				<View style={{ width: '100%' }}>
-					{[...Array(2)].map((_, i) => (
-						<PlaceholderLine
-							key={i}
-							height={50}
-							noMargin
-							style={{ marginBottom: 20 }}
-						/>
-					))}
-				</View>
-			)}
-
-			{token && cardsList.cards && cardsList.cards.length > 0 && (
-				<ScrollView
-					horizontal={false}
-					showsVerticalScrollIndicator={false}
-					showsHorizontalScrollIndicator={false}
-					nestedScrollEnabled={true}
-					style={styles.cardsList}
-				>
-					{cardsList.cards.map((card: any, idx: number) => (
-						<OSItem key={card.id} style={{zIndex: 99 - idx}}>
-							<OSItemContent onPress={() => {}} style={{justifyContent: 'space-between'}} activeOpacity={0.8}>
-								{/* <View style={styles.viewStyle}>
-									{card.id === cardSelected?.id ? (
-										<OIcon
-											src={theme.images.general.radio_act}
-											width={16}
-											color={theme.colors.primary}
-										/>
-									) : (
-										<OIcon
-											src={theme.images.general.radio_nor}
-											width={16}
-											color={theme.colors.disabled}
-										/>
-									)}
-								</View> */}
-								<View style={styles.viewStyle}>
-									{getIconCard(card.brand, 20)}
-									<OText size={12} style={{textTransform: 'capitalize'}} color={theme.colors.textNormal} mLeft={10} mRight={10}>
-										{`${card.brand} ${card.last4}`}
-									</OText>
-								</View>
-								{card.id === cardSelected?.id &&
-									<OText size={10} weight={'bold'}>{t('DEFAULT', 'Default')}</OText>
-								}
-							</OSItemContent>
-							<OSItemActions>
-								<TouchableOpacity onPress={() => handleShowOption(idx)}>
-									<Icon
-										name='more-vertical'
-										color={theme.colors.textPrimary}
-										size={16}
-									/>
-								</TouchableOpacity>
-								{showOption.status && showOption.id === idx && 
-									<View style={styles.optWrap}>
-										<TouchableOpacity onPress={() => handleCardSelected(card)} style={{paddingBottom: 4}}>
-											<OText size={10} lineHeight={15}>{t('USE_AS_DEFAULT', 'Use as default')}</OText>
-										</TouchableOpacity>
-										<OAlert
-											title={t('CARD', 'Card')}
-											message={t('QUESTION_DELETE_CARD', 'Are you sure that you want to delete the card?')}
-											onAccept={() =>{ deleteCard(card); setShowOption({id: idx, status: false}) }}
-										>
-											<OText size={10} lineHeight={15} color={theme.colors.red}>{t('DELETE', 'Delete')}</OText>
-										</OAlert>
-									</View>
-								}
-							</OSItemActions>
-						</OSItem>
-					))}
-				</ScrollView>
-			)}
-		</>
-	)
-}
-
-const styles = StyleSheet.create({
-	viewStyle: {
-		marginRight: 7,
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
-	cardsList: {
-		width: '100%',
-		maxHeight: 130
-	},
-	optWrap: {
-		position: 'absolute',
-		end: 4,
-		top: 20,
-		minWidth: 100,
-		backgroundColor: 'white',
-		paddingHorizontal: 12,
-		paddingVertical: 7,
-		borderRadius: 7.6,
-		shadowColor: '#000000',
-		shadowOffset: {width: 0, height: 1},
-		shadowRadius: 2,
-		shadowOpacity: 0.2,
-	}
-})
-
-export const StripeCardsList = (props: any) => {
-	const stripeCardsListProps = {
-		...props,
-		UIComponent: StripeCardsListUI
-	}
-	return (
-		<PaymentOptionStripe {...stripeCardsListProps} />
-	)
-}