ordering-ui-react-native 0.14.69 → 0.14.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.69",
+  "version": "0.14.72",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/Checkout/index.tsx

@@ -529,6 +529,7 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/PaymentOptions/index.tsx

@@ -61,11 +61,14 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymethodDataChange,
     handlePaymentMethodClickCustom,
     isOpenMethod,
-    setCardData
+    setCardData,
+    handlePlaceOrder
   } = props
 
   const theme = useTheme();
   const [, t] = useLanguage();
+  const methodsPay = ['google_pay', 'apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
   let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
@@ -119,8 +122,11 @@ const PaymentOptionsUI = (props: any) => {
   }, [props.paySelected])
 
   useEffect(() => {
-    setCardData(paymethodData)
-  }, [paymethodData])
+    setCardData && setCardData(paymethodData)
+    if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
+      handlePlaceOrder()
+    }
+  }, [paymethodData, paymethodSelected])
 
   const renderPaymethods = ({ item }: any) => {
     return (
@@ -283,7 +289,7 @@ const PaymentOptionsUI = (props: any) => {
       <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-        open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
+        open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
         onClose={() => handlePaymethodClick(null)}
       >
         <KeyboardAvoidingView
@@ -292,10 +298,13 @@ const PaymentOptionsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
+            cart={cart}
+            paymethod={isOpenMethod?.paymethod?.gateway}
+            methodsPay={methodsPay}
             businessId={props.businessId}
-            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
             handleSource={handlePaymethodDataChange}
-            onCancel={() => handlePaymethodClick(false)}
+            onCancel={() => handlePaymethodClick(null)}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/ProductForm/index.tsx

@@ -335,7 +335,7 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton
-                  onClick={navigation.navigate('AddressList')}
+                  onClick={() => navigation.navigate('AddressList')}
                 />
               )
             )}

package/src/components/StripeElementsForm/index.tsx

@@ -7,10 +7,11 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-
+import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
+import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -22,6 +23,10 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
+    methodsPay,
+    paymethod,
+    onCancel,
+    cart
   } = props;
 
   const theme = useTheme();
@@ -121,33 +126,49 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider publishableKey={publicKey}>
-            <CardField
-              postalCodeEnabled={true}
-              cardStyle={{
-                backgroundColor: '#FFFFFF',
-                textColor: '#000000',
-              }}
-              style={{
-                width: '100%',
-                height: 50,
-                marginVertical: 30,
-                zIndex: 9999,
-              }}
-              onCardChange={(cardDetails: any) => setCard(cardDetails)}
-            />
+          <StripeProvider 
+            publishableKey={publicKey}
+            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+          >
+            {methodsPay.includes(paymethod) ? (
+              <StripeMethodForm 
+                handleSource={handleSource}
+                onCancel={onCancel}
+                cart={cart}
+                setErrors={setErrors}
+                paymethod={paymethod}
+                devMode={publicKey?.includes('test')}
+              />
+            ) : (
+              <CardField
+                postalCodeEnabled={true}
+                cardStyle={{
+                  backgroundColor: '#FFFFFF',
+                  textColor: '#000000',
+                }}
+                style={{
+                  width: '100%',
+                  height: 50,
+                  marginVertical: 30,
+                  zIndex: 9999,
+                }}
+                onCardChange={(cardDetails: any) => setCard(cardDetails)}
+              />
+            )}
           </StripeProvider>
-          <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'}}
-            imgRightSrc={null}
-            onClick={() => handleSaveCard()}
-            isDisabled={!isCompleted}
-            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-          />
+          {!methodsPay?.includes(paymethod) && (
+            <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'}}
+              imgRightSrc={null}
+              onClick={() => handleSaveCard()}
+              isDisabled={!isCompleted}
+              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+            />
+          )}
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/StripeMethodForm/index.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
+import { OButton } from '../shared';
+import { Platform, View } from 'react-native';
+import { StripeMethodFormParams } from '../../types';
+
+export const StripeMethodForm = (props: StripeMethodFormParams) => {
+  const {
+    cart,
+    handleSource,
+    onCancel,
+    setErrors,
+    paymethod,
+    devMode
+  } = props
+  const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
+  const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [initialized, setInitialized] = useState(false);
+  const [, t] = useLanguage()
+ 
+  useEffect(() => {
+    if (paymethod !== 'google_pay') return
+    if (Platform.OS === 'ios') {
+      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      return
+    }
+    const initialize = async () => {
+      try {
+        const { error } = await initGooglePay({
+          testEnv: devMode,
+          merchantName: 'Widget Store',
+          countryCode: 'US',
+          billingAddressConfig: {
+            format: 'FULL',
+            isPhoneNumberRequired: true,
+            isRequired: false,
+          },
+          existingPaymentMethodRequired: false,
+          isEmailRequired: true,
+        });
+
+        if (error) {
+          setErrors(error.code + ' - ' + error.message);
+          return;
+        }
+        setInitialized(true);
+      } catch (err: any) {
+        setErrors('Catch ' + err?.message)
+      }
+    }
+    initialize();
+  }, [initGooglePay]);
+
+  useEffect(() => {
+    if (paymethod !== 'apple_pay') return
+    if (Platform.OS === 'android') {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+  }, [])
+
+  const createPaymentMethod = async () => {
+
+    const { error, paymentMethod } = await createGooglePayPaymentMethod({
+      amount: cart?.balance ?? cart?.total,
+      currencyCode: 'USD',
+    });
+
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+      return;
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+    setInitialized(false);
+  };
+
+  const pay = async () => {
+    if (!isApplePaySupported) {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+
+    const { error, paymentMethod } = await presentApplePay({
+      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      country: 'US',
+      currency: 'USD',
+      shippingMethods: [
+        {
+          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
+          identifier: 'DPS',
+          label: 'Courier',
+          detail: 'Delivery',
+          type: 'final',
+        },
+      ],
+
+      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
+      requiredBillingContactFields: ['phoneNumber', 'name'],
+    });
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+  }
+
+  return (
+    <>
+      {paymethod === 'google_pay' ? (
+        <View>
+          {!loading && initialized && (
+            <OButton
+              textStyle={{
+                color: '#fff'
+              }}
+              imgRightSrc={null}
+              onClick={createPaymentMethod}
+              isDisabled={!initialized}
+              text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
+            />
+          )}
+        </View>
+      ) : (
+        <View>
+          {isApplePaySupported && (
+            <ApplePayButton
+              onPress={pay}
+              type="plain"
+              buttonStyle="black"
+              borderRadius={4}
+              style={{
+                width: '100%',
+                height: 50,
+              }}
+            />
+          )}
+        </View>
+      )}
+    </>
+  )
+}

package/src/config.json

@@ -3,6 +3,8 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
+  "apple_app_id": "com.delivery",
+  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/types/index.tsx

@@ -473,3 +473,12 @@ export interface HelpGuideParams {
 export interface HelpAccountAndPaymentParams {
   navigation: any;
 }
+
+export interface StripeMethodFormParams {
+  cart: any;
+  handleSource: ({id, card} : {id : string, card : any}) => void;
+  onCancel: () => void;
+  setErrors: (error: string) => void;
+  paymethod: string;
+  devMode?: boolean;
+}

package/themes/kiosk/src/components/BusinessController/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import {
+  BusinessController as BusinessSingleCard,
+  useUtils,
+} from 'ordering-components/native';
+
+import { Card, BusinessLogo } from './styles';
+
+import { OText } from '../shared';
+
+export const BusinessControllerUI = (props: any) => {
+  const { business, handleClick, isLoading } = props;
+  const [{ optimizeImage }] = useUtils();
+  const theme = useTheme()
+
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  const styles = StyleSheet.create({
+    businessName: {
+      width: '100%',
+      alignItems: 'center',
+      textAlign: 'center',
+      marginTop: 10
+    }
+  });
+
+  const handleBusinessClick = (selectedBusiness: any) => {
+    if (isLoading) return
+    handleClick && handleClick(selectedBusiness)
+  }
+
+  return (
+    <Card
+      activeOpacity={1}
+      onPress={() => handleBusinessClick(business)}
+    >
+      <BusinessLogo
+        source={business?.logo ? {
+          uri: optimizeImage(business?.logo, 'h_120,c_limit'),
+        } : theme.images.dummies.businessLogo}
+        resizeMode='contain'
+      />
+      <OText
+        size={WIDTH_SCREEN * 0.012}
+        numberOfLines={2}
+        ellipsizeMode='tail'
+        style={styles.businessName}
+      >
+        {business?.name}
+      </OText>
+    </Card>
+  );
+};
+
+export const BusinessController = (props: any) => {
+  const BusinessControllerProps = {
+    ...props,
+    UIComponent: BusinessControllerUI,
+  };
+
+  return <BusinessSingleCard {...BusinessControllerProps} />;
+};

package/themes/kiosk/src/components/BusinessController/styles.tsx

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components/native';
+
+export const Card = styled.TouchableOpacity`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 15px 20px;
+  width: 120px;
+`
+
+export const BusinessLogo = styled.ImageBackground`
+  position: relative;
+  height: 120px;
+  width: 120px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+`

package/themes/kiosk/src/components/BusinessesListing/index.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { View, ScrollView, Platform } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import {
+  BusinessList as BusinessesListingController,
+  useLanguage,
+  useOrder,
+} from 'ordering-components/native';
+
+import { ListWrapper, CardsContainer, WrapperList } from './styles';
+
+import { NotFoundSource } from '../NotFoundSource';
+import { BusinessController } from '../BusinessController';
+import { OText } from '../shared';
+import { LogoutButton } from '../LogoutButton';
+
+const BusinessesListingUI = (props: any) => {
+  const {
+    navigation,
+    businessesList,
+    handleBusinessClick,
+    paginationProps,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  return (
+    <ScrollView showsVerticalScrollIndicator={false}>
+      <ListWrapper>
+        {!businessesList.loading ? (
+          <>
+            <OText
+              size={WIDTH_SCREEN * 0.02}
+              weight='bold'
+              style={{ paddingHorizontal: 15 }}
+            >
+              {t('STORES', 'Stores')}
+            </OText>
+            <OText
+              size={WIDTH_SCREEN * 0.014}
+              color={theme.colors.paleGray}
+              style={{
+                paddingHorizontal: 15,
+                paddingBottom: 40
+              }}
+            >
+              {t('SELECT_STORE_MESSAGE', 'Please select the store that do you need')}
+            </OText>
+            <View style={{ position: 'absolute', top: 25, right: 20 }}>
+              <LogoutButton />
+            </View>
+          </>
+        ) : (
+          <View style={{ paddingHorizontal: 20 }}>
+            <PlaceholderLine width={80} height={50} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={50} style={{ marginBottom: 40 }} />
+          </View>
+        )}
+        <CardsContainer>
+          {!businessesList.loading && businessesList.businesses?.map(
+            (business: any) => (
+              <BusinessController
+                key={business.id}
+                business={business}
+                isBusinessOpen={business.open}
+                handleCustomClick={handleBusinessClick}
+                orderType={orderState?.options?.type}
+                navigation={navigation}
+              />
+            )
+          )}
+        </CardsContainer>
+
+
+        {!businessesList.loading && businessesList.businesses.length === 0 && (
+          <NotFoundSource
+            content={t(
+              'NOT_FOUND_BUSINESSES',
+              'No businesses to delivery / pick up at this address, please change filters or change address.',
+            )}
+          />
+        )}
+
+        {businessesList.loading && (
+          <WrapperList>
+            {[...Array(24).keys()].map(i => (
+              <PlaceholderLine
+                key={i}
+                width={15}
+                height={120}
+                style={{
+                  marginBottom: 20,
+                  borderRadius: 8
+                }}
+              />
+            ))}
+          </WrapperList>
+        )}
+      </ListWrapper>
+    </ScrollView>
+  );
+};
+
+export const BusinessesListing = (props: any) => {
+  const BusinessesListingProps = {
+    ...props,
+    isForceSearch: Platform.OS === 'ios',
+    UIComponent: BusinessesListingUI,
+  };
+
+  return <BusinessesListingController {...BusinessesListingProps} />;
+};

package/themes/kiosk/src/components/BusinessesListing/styles.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components/native'
+
+export const ListWrapper = styled.View`
+	background-color: ${(props: any) => props.theme.colors.backgroundLight};
+	padding: 20px 5px 0;
+`;
+
+export const CardsContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+export const WrapperList = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 20px;
+`