protect-group-dynamic-refundable-react v1.4.1

Protect Group Dynamic Refundable React Component

This component is designed to place our Refundable Content (served via our dynamic api) on your React app, and allow you to also send transactions into our platform using a simple hook.

Installation

npm i --save protect-group-dynamic-refundable-react

Usage

RefundableProvider

Add the provider somewhere near the root of your application

import {
	RefundableOptions,
	RefundableProvider
} from 'protect-group-dynamic-refundable-react'

function MyApp() {
	const options: RefundableOptions = {
        currencyCode: 'GBP',
        environment: 'test',
        languageCode: 'en',
        vendorCode: '<YOUR-VENDOR-CODE>',
        eventDateFormat: 'DD/MM/YYYY', // optional
        containerSize: 'medium', //optional
        useSaleAction: true, // optional, set this to false if you intend to call our sale endpoint manually
        nonce: '[nonce code for the inline script, if you have a CSP set up on your site]', //optional
        salesTax: 10 // optional, apply sales tax to the refundable booking cost
      
    }

	return (
		<RefundableProvider options={options}>
			<TheRestOfYourApp/>
		</RefundableProvider>
	)
}

updateQuoteData

The useRefudableActions hook provides a function to update the quote data at any point on your app

import {useRefundableActions} from 'protect-group-dynamic-refundable-react'

function MyTicketTypeSelector(){
  const {updateQuoteData} = useRefundableActions()
  const {myInternalState} = useMyInternalStateContext()
  
  useEffect(() => {
    const {bookingCost, numberOfTickets, eventDate} = myInternalState
    updateQuoteData({
      totalValue: bookingCost, 
      numberOfTickets, 
      eventTravelDateTime: eventDate,
      nonce: '[nonce code can also be provided here, if required]'
    })
  }, [myInternalState])
  
  const handleChange = event => updateQuoteData({
    totalValue: myInternalState.bookingCost,
    numberOfTickets: myInternalState.numberOfTickets,
    eventTravelDateTime: myInternalState.eventDate,
    ticketType: event.target.value,
    nonce: '[nonce code can also be provided here, if required]',
    salesTax: 5 // sales tax can also be applied here, if required
  })
  
  return (
    <div>
      <label>Select a ticket type</label>
      <select onChange={handleChange}>
        <option value="standard">Standard</option>
        <option value="premium">Premium</option>
        <option value="vip">VIP</option>
      </select>
    </div>
  )
}

RefundableContent

Add the RefundableContent component where you would like our Refundable Content to be placed on your page. Use the writeSale function on the useRefundableActions hook to write a transaction into our platform

import {
	ApiRequestFailedEventArgs,
	ProtectionChangeEventArgs,
	RefudableContent,
	SaleData,
	useRefundableActions
} from 'protect-group-dynamic-refundable-react'

function MyCheckoutPage() {
	const {writeSale} = useRefundableActions()

	const handleProtectionChange = (args: ProtectionChangeEventArgs) => {
		//Do something with the args
	}

	const handleApiError = (args: ApiRequestFailedEventArgs) => {
		// Maybe some invalid data was supplied?
	}

	const handleMakePayment = async () => {
		// Do your sale thing

		const request: SaleData = {
			bookingReference: '<YOUR-BOOKING-REFERENCE>',
			customers: [
				{firstName: 'Test', lastName: 'Test'}
			]
		}

		try {
			const response = await writeSale(request)
			// Do something with the response
		} catch (e: any) {
			const {data: {error}} = e
			// Something went wrong
		}
	}

	return (
		<MyPageWrapper>
			//some components
			<RefundableContent
				onApiError={handleApiError}
				onProtectionChange={handleProtectionChange}
			/>
			//some components
			<MakePaymentButton onClick={handleMakePayment}></MakePaymentButton>
		</MyPageWrapper>
	)
}

Types

• Environment - 'test' | 'prod'
• ContainerSize - 'small' | 'medium' | 'large'

RefundableProvider Props

RefundableContent Props

ProtectionChangeEventArgs

The parameter passed into the onProtectionChange function

interface ChangeEventProduct {
  productId: number
  sold?: boolean
}

interface ProtectionChangeEventArgs {
    protectionSelected: boolean|null
    protectionValue: number
    bookingCost: number
    totalValue: number
    formattedProtectionValue: string
    formattedBookingCost: string
    formattedTotalValue: string
    quoteId?: string // only populated when useSaleAction is set to false
    products?: ChangeEventProduct[] // only populated when useSaleAction is set to false
}

quoteId and products will only be set when you set the useSaleAction value to false. These two values are what's required for you to manually make a request to our sale endpoint. You will also need credentials to call our api, which can be provided by your commercial manager.

Interfaces

interface QuoteData {
	accommodationName?: string
	airline?: string
	arrivalAirportCode?: string
	arrivalCountry?: string
	customerDateOfBirth?: string
	customerGender?: string
	departureAirportCode?: string
	departureCountry?: string
	eventName?: string
	eventTravelClass?: string
	eventTravelContinent?: string
	eventTravelCity?: string
	eventTravelCountry?: string
	eventTravelDateTime: string
	eventTravelLatitude?: number
	eventTravelLongitude?: number
	flightType?: string
	nonce?: string
	numberOfTickets: number
	riskType?: string
	salesTax?: number // This will overwrite what was supplied in the provider config
	ticketType?: string
	totalValue: number
	tourOperator?: string
	user?: string
	venue?: string
}

interface Customer {
	firstName: string
	lastName: string
}

interface SaleData {
	bookingReference: string
	customers: Customer[]
}

interface PatchSaleData extends SaleData {
	quoteId: string
	products: SaleProduct[]
}

interface SaleResult {
	data: SaleResponse
	error: any
}

interface SaleResponse {
	saleId: string
	refundableLink?: string // Only returned on a refundable booking
	refundableConfirmationHtml?: string // Only returned on a refunable booking
}

interface RefundableActions {
	updateQuoteData: (data: QuoteData) => void
	writeSale: (request: SaleData) => Promise<SaleResult>
	patchSale: (request: PatchSaleData) => Promise<SaleResponse>
	holdSale: (saleId: string) => Promise<any> // saleId can be either our sale id, from the original sale response OR your booking refernce
	cancelSale: (saleId: string) => Promise<any>
	reset: () => void
}

RefundableActions.reset

This function is for members who set the useSaleAction prop to false. It's designed to be used after a customer has completed a booking, to clear the session data, which would normally happen automatically during the writeSale process

Release Notes

Version 1.4.1

• Fixed rounding bug when calculating values on event arguments.
• Added patchSale function to useRefundableActions hook
• Added holdSale function to useRefundableActions hook
• Added cancelSale function to useRefundableActions hook