/**
 * High order component that will wrap a specified component with logic to
 * handle one or more digital wallets such as Apple Pay.
 *
 * Optional properties:
 * applePayMerchantIdentifier: string - Identifier to enable ApplePay
 * applePayOnPress: () => void - Function to be invoked when Apple Pay button is pressed
 *
 * Properties passed to the wrapped component:
 * showApplePayButton: boolean - Whether to show the Apple Pay button
 * showApplePaySetupButton: boolean - Whether to show the Apple Pay setup button
 * applePaySetupPress: () => void - Function to be invoked when AP setup button is pressed
 */ import React , { ComponentClass , StatelessComponent } from 'react' ; import { default as ApplePay } from '../lib/wallets/ApplePay' ; import { Alert } from './Alert' ; import FSI18n , { translationKeys } from '@brandingbrand/fsi18n' ; export interface WithDigitalWalletState { showApplePayButton : boolean ; showApplePaySetupButton : boolean ; } export interface ExternalProps { applePayMerchantIdentifier : string ; applePayOnPress ? : ( ) => void ; } export interface InjectedProps { showApplePayButton ? : boolean ; showApplePaySetupButton ? : boolean ; applePaySetupPress ? : ( ) => void ; } export function withDigitalWallet < P extends { } > ( Component ) { type ResultProps = P & ExternalProps ; return class DigitalWalletProvider extends React . Component < ResultProps , WithDigitalWalletState > { applePay : ApplePay ; promises : Promise < any > [ ] = [ ] ; constructor ( props ) { super ( props ) ; this . applePay = new ApplePay ( props . applePayMerchantIdentifier ) ; this . promises . push ( this . initApplePay ( ) ) ; } handleApplePaySetup = async ( ) => { return this . applePay . setupApplePay ( ) . then ( success => { if ( success ) { this . setState ( { showApplePayButton : true , showApplePaySetupButton : false } ) ; } else { Alert . alert ( FSI18n . string ( translationKeys . flagship . cart . digitalWallet . appleError ) ) ; } } ) . catch ( e => { console . error ( e ) ; Alert . alert ( 'Apple Pay was unable to complete your request.' ) ; } ) ; } ; async initApplePay ( ) { return new Promise < void > ( ( resolve , reject ) => { if ( this . applePay . isEnabled ( ) ) { this . applePay . hasActiveCard ( ) . then ( hasActiveCard => { if ( hasActiveCard ) { this . setState ( { showApplePayButton : true , showApplePaySetupButton : false } ) ; return resolve ( ) ; } else if ( this . applePay . canCallSetup ( ) ) { this . setState ( { showApplePayButton : false , showApplePaySetupButton : true } ) ; return resolve ( ) ; } } ) . catch ( e => { return reject ( e ) ; } ) ; } } ) ; } componentDidMount ( ) { Promise . all ( this . promises ) . catch ( e => { console . error ( e ) ; } ) ; } render ( ) { return ( < Component { ... this . props } { ... this . state } applePaySetupPress = { this . handleApplePaySetup } / > ) ; } } ; }