ordering-ui-react-native 0.21.19 → 0.21.20-release

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<View style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -340,7 +340,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</Placeholder>
 				</View>
 			)}
-		</InView>
+		</View>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -4,6 +4,7 @@ import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -28,29 +29,29 @@ export const StripeCardsListUI = (props: any) => {
 		cardSelected,
 		cardsList,
 		handleCardClick,
-		setAddCardOpen,
+		onOpen,
 		gateway,
-		setCardsList,
-		addCardOpen,
-		isOpenMethod,
-		handlePaymethodDataChange
+		paySelected
 	} = props;
 
 	const theme = useTheme();
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
-
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
 	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
 	useEffect(() => {
 		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen({ ...addCardOpen, stripe: true })
+			onOpen && onOpen();
 		}
 	}, [cardsList?.loading])
 
@@ -92,10 +93,10 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
-									{card.id === cardSelected?.id ? (
+									{(card.id === cardSelected?.id || card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}
@@ -117,6 +118,13 @@ export const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert
@@ -135,33 +143,6 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
-			<OModal
-				entireModal
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCardOpen.stripe}
-				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-				style={{ backgroundColor: 'red' }}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
-					enabled={Platform.OS === 'ios' ? true : false}
-				>
-					<StripeElementsForm
-						openCarts={props.openCarts}
-						toSave
-						businessId={props.businessId}
-						businessIds={props.businessIds}
-						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
-						setCardsList={setCardsList}
-						cardsList={cardsList}
-						requirements={props.clientSecret}
-						handleCardClick={handleCardClick}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
 		</>
 	)
 }

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

@@ -9,7 +9,7 @@ import {
 } from '@stripe/stripe-react-native';
 import { useTheme } from 'styled-components/native';
 import { ErrorMessage } from './styles';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,7 +17,7 @@ import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm
 
 const StripeElementsFormUI = (props: any) => {
 	const {
-		publicKey,
+		publicKeyState,
 		handleSource,
 		values,
 		businessId,
@@ -33,7 +33,10 @@ const StripeElementsFormUI = (props: any) => {
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
-		cartTotal
+		cartTotal,
+		publicKeyAddCard,
+		urlScheme,
+		androidAppId
 	} = props;
 
 	const theme = useTheme();
@@ -52,10 +55,11 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const isToSave = methodsPay?.includes(paymethod) ? publicKeyState?.key : (publicKeyAddCard || publicKeyState?.key)
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			justifyContent: 'space-between',
 			paddingBottom: 12
 		},
@@ -197,69 +201,78 @@ const StripeElementsFormUI = (props: any) => {
 
 	return (
 		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
-			{publicKey ? (
-				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={publicKey}
-						merchantIdentifier={merchantId}
-						urlScheme={merchantId}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								cartTotal={cartTotal}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-								setMethodPaySupported={setMethodPaySupported}
-								placeByMethodPay={placeByMethodPay}
-								methodPaySupported={methodPaySupported}
-								setPlaceByMethodPay={setPlaceByMethodPay}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={zipCodeEnabled}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-									borderWidth: 1,
-									borderRadius: 8,
-									borderColor: theme.colors.border
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
-					</StripeProvider>
-					{!!errors && (
+			{publicKeyState.loading ? (
+				<Placeholder Animation={Fade}>
+					<PlaceholderLine height={50} style={{ marginTop: 20 }} />
+				</Placeholder>
+			) : (
+				<>
+					{publicKeyState?.key ? (
+						<View style={{ flex: 1 }}>
+							<StripeProvider
+								publishableKey={isToSave}
+								merchantIdentifier={merchantId}
+								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+							>
+								{methodsPay?.includes(paymethod) ? (
+									<StripeMethodForm
+										handleSource={handleSource}
+										onCancel={onCancel}
+										cart={cart}
+										cartTotal={cartTotal}
+										setErrors={setErrors}
+										paymethod={paymethod}
+										devMode={publicKeyState?.key?.includes('test')}
+										setMethodPaySupported={setMethodPaySupported}
+										placeByMethodPay={placeByMethodPay}
+										methodPaySupported={methodPaySupported}
+										setPlaceByMethodPay={setPlaceByMethodPay}
+										androidAppId={androidAppId}
+									/>
+								) : (
+									<CardField
+										postalCodeEnabled={zipCodeEnabled}
+										cardStyle={{
+											backgroundColor: '#FFFFFF',
+											textColor: '#000000',
+											borderWidth: 1,
+											borderRadius: 8,
+											borderColor: theme.colors.border
+										}}
+										style={{
+											width: '100%',
+											height: 50,
+											marginVertical: 30,
+											zIndex: 9999,
+										}}
+										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, textAlign: 'center' }}
+								style={{ marginTop: 20 }}
 							>
-								{errors}
+								{t('SOMETHING_WRONG', 'Something is wrong!')}
 							</OText>
 						</ErrorMessage>
 					)}
-				</View>
-			) : (
-				<ErrorMessage>
-					<OText
-						size={20}
-						color={theme.colors.error}
-						style={{ marginTop: 20 }}
-					>
-						{t('SOMETHING_WRONG', 'Something is wrong!')}
-					</OText>
-				</ErrorMessage>
+				</>
 			)}
 			{!methodsPay?.includes(paymethod) && (
 				<OButton

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

@@ -13,6 +13,7 @@ export const StripeElementsForm = (props: any) => {
   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 {
@@ -85,6 +86,51 @@ export const StripeElementsForm = (props: any) => {
     }
   }
 
+  /**
+   * 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()
@@ -96,6 +142,7 @@ export const StripeElementsForm = (props: any) => {
       values={state}
       requirements={state.requirements}
       stripeTokenHandler={stripeTokenHandler}
+      publicKeyState={publicKeyState}
     />
   )
 }

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useLanguage,
+    useOrder,
+    useConfig
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../shared'
+import {
+    CartList,
+    CartDivider,
+    TopActionsHeader,
+    TopHeader
+} from './styles'
+import { OrderSummary } from '../OrderSummary';
+import { Cart } from '../Cart';
+import { ScrollView } from 'react-native-gesture-handler';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UpsellingLayout } from './UpsellingLayout';
+
+export const UpsellingContent = (props : any) => {
+    const {
+        onGoBack,
+        handleUpsellingPage,
+        onNavigationRedirect,
+        cart,
+        productsList
+    } = props
+
+    const theme = useTheme();
+
+    const [{ carts }] = useOrder()
+    const [{ configs }] = useConfig()
+    const [, t] = useLanguage()
+    const { bottom } = useSafeAreaInsets()
+    const [isCartsLoading, setIsCartsLoading] = useState(false)
+    const [showTitle, setShowTitle] = useState(false)
+
+    const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+    const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+    const showCartList = isChewLayout
+    const commentDelayTime = isChewLayout ? 500 : null
+
+    const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
+    
+    const styles = StyleSheet.create({
+        closeUpsellingButton: {
+            borderRadius: 7.6,
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            borderWidth: 1,
+            alignSelf: 'center',
+            height: 44,
+            shadowOpacity: 0,
+            width: '80%',
+        },
+        cancelBtn: {
+            paddingHorizontal: 18,
+            borderWidth: 1,
+            borderRadius: 7.6,
+            borderColor: theme.colors.textSecondary,
+            height: 38
+        },
+        headerItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 2,
+            marginHorizontal: 20,
+        },
+        btnBackArrow: {
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: theme.colors.clear,
+            borderColor: theme.colors.clear,
+            shadowColor: theme.colors.clear,
+            paddingLeft: 0,
+            paddingRight: 0,
+            marginLeft: 20,
+            marginBottom: 10
+        },
+        wrapperNavbar: {
+            paddingHorizontal: 20,
+            paddingTop: 0,
+        }
+    })
+
+
+    const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+        setShowTitle(contentOffset.y > 30)
+    }
+
+    return (
+        <>
+            <View style={styles.wrapperNavbar}>
+                <TopHeader>
+                    <>
+                        <TopActionsHeader onPress={() => onGoBack()}>
+                            <IconAntDesign
+                                name='arrowleft'
+                                size={26}
+                            />
+                        </TopActionsHeader>
+                        {showTitle && (
+                            <OText
+                                size={16}
+                                style={{ flex: 1, textAlign: 'center', right: 15 }}
+                                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                                numberOfLines={2}
+                                ellipsizeMode='tail'
+                            >
+                                {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+                            </OText>
+                        )}
+                    </>
+                </TopHeader>
+            </View>
+            <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false} onScroll={handleScroll}>
+                {productsList.length > 0 &&
+                    <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+                        <UpsellingLayout {...props} />
+                    </View>
+                }
+                <View style={{ paddingHorizontal: 40 }}>
+                    <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+                    <OrderSummary
+                        cart={cart}
+                        commentDelayTime={commentDelayTime}
+                        isCartPending={cart?.status === 2}
+                        onNavigationRedirect={onNavigationRedirect}
+                    />
+                </View>
+                {showCartList && cartList.map((cart: any, i: number) => (
+                    <CartList key={i}>
+                        <Cart
+                            isFromUpselling
+                            cart={cart}
+                            cartuuid={cart.uuid}
+                            hideUpselling
+                            singleBusiness={props.singleBusiness}
+                            isFranchiseApp={props.isFranchiseApp}
+                            isCartsLoading={isCartsLoading}
+                            setIsCartsLoading={setIsCartsLoading}
+                            isMultiCheckout={isMultiCheckout}
+                            onNavigationRedirect={props.onNavigationRedirect}
+                        />
+                        <CartDivider />
+                    </CartList>
+                ))}
+            </ScrollView>
+            <View
+                style={{
+                    alignItems: 'center',
+                    bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+                }}
+            >
+                <OButton
+                    imgRightSrc=''
+                    text={t('CHECKOUT', 'Checkout')}
+                    style={{ ...styles.closeUpsellingButton }}
+                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                    onClick={() => handleUpsellingPage(cart)}
+                />
+            </View>
+        </>
+    )
+}

package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useUtils,
+    useLanguage
+} from 'ordering-components/native'
+import {
+    Container,
+    UpsellingContainer,
+    Item,
+    Details,
+    AddButton,
+} from './styles'
+import { OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native';
+
+export const UpsellingLayout = (props : any) => {
+    const {
+        upsellingProducts,
+        productsList,
+        onNavigationRedirect,
+        business
+    } = props
+    const theme = useTheme()
+    const [{ parsePrice }] = useUtils()
+    const [, t] = useLanguage()
+
+    const styles = StyleSheet.create({
+        imageStyle: {
+            width: 73,
+            height: 73,
+            resizeMode: 'cover',
+            borderRadius: 7.6,
+        },
+    })
+
+    const handleFormProduct = (product: any) => {
+        onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+            product: product,
+            businessId: product?.api?.businessId,
+            businessSlug: business.slug,
+        })
+    }
+
+
+    return (
+        <>
+            <Container>
+                <UpsellingContainer
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
+                >
+                    {
+                        !upsellingProducts.loading && (
+                            <>
+                                {
+                                    !upsellingProducts.error ? productsList.map((product: any, i: number) => (
+                                        <Item key={`${product.id}_${i}`}>
+                                            <View style={{ flexBasis: '57%' }}>
+                                                <Details>
+                                                    <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
+                                                    <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
+                                                </Details>
+                                                <AddButton onPress={() => handleFormProduct(product)}>
+                                                    <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
+                                                </AddButton>
+                                            </View>
+                                            <View>
+                                                <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                                            </View>
+                                        </Item>
+                                    )) : (
+                                        <OText>
+                                            {upsellingProducts.message}
+                                        </OText>
+                                    )
+                                }
+                            </>
+                        )
+                    }
+                </UpsellingContainer>
+            </Container>
+        </>
+    )
+}