protect-group-refundable

Protect Group Refundable React Component

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

Usage

RefundableProvider

Add the provider somewhere near the root of your application

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

function MyApp() {
	const options: RefundableOptions = {
		environment: 'test',
		currencyCode: 'GBP',
		languageCode: 'en',
		offeringMethod: 'OPT-OUT',
		productCode: 'PKG',
		vendorCode: '<YOUR-VENDOR-CODE>',
		eventDateFormat: 'DD/MM/YYYY',
		premium: 10,
		whiteLabelled: false,
		displayTrustPilot: true,
		displayRefundText: true,
		allowNonRefundableLabelClick: false,
		labelText: 'Default',
		vertical: 'Default'
	}

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

RefundableContent

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

import {
	RefundableContent, ProtectionChangeEventArgs, useRefundableActions, WriteTransactionRequest
} from 'protect-group-refundable'

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

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

	const handleMakePayment = async () => {
		try {
			// make the payment
			const request: WriteTransactionRequest = {
				bookingRef: 'your-booking-reference',
				eventDate: '31/12/2022',
				customerFirstName: 'Test',
				customerLastName: 'Test'
			}
			const response = await writeTransaaction(request)
			// Do something with the response

		} catch (e) {
			// Something went wrong somewhere
		}
	}

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

Types

• Environment - 'test' | 'prod'
• OfferingMethod - 'OPT-OUT' | 'SELECT'
• ProductCode - 'TKT' | 'HTL' | 'PKG'
• LabelText - 'Default' | 'Enhance' | 'Upgrade' | 'Question'
• Vertical - 'Default' | 'Transport' | 'Accommodation' | 'Sport' | 'Tours' | 'VenuesEvents' | 'MassParticipation'

RefundableProvider Props

Property	Type	Required?	Default	Description
environment	Environment	yes		Send requests to either our test or production api. Should be either 'test' or 'prod'
currencyCode	string	yes		A valid currency code
languageCode	string	yes		A valid language code. Currently supported languages are 'en', 'fr', 'es' and 'pt'
offeringMethod	OfferingMethod	yes		Controls whether a refundable booking is pre-selected or not
productCode	ProductCode	yes		The type of product offered to the customer
vendorCode	string	yes		Your vendor code supplied by our commercial team. Please ensure the correct vendor code is supplied for the environment
eventDateFormat	string	no		Our api expects a date format of ISO 861 yyyy-MM-ddTHH:mm:ss.FFFFFzzz. If you are unable to supply a date in this format you can optionally configure the format here. The format you supply must match a javascript date format from the moment.js library
premium	number	yes		The protection rate applied to the cost of a booking
whiteLabelled	boolean	no	false	Our Refundable Content comes styled. If you wish to theme the content to match our site, set this to true. Each of the sections in the content will then have well names classes you can target
displayTrustPilot	boolean	no	true	Displays our TrustPilot widget
displayRefundText	boolean	no	false	Displays a line of text showing the average time it takes to process a refund application
allowNonRefundableLabelClick	boolean	no	false	Allow the entire label of the non-refundable booking option to be selected
labelText	LabelText	no	'Default'	Allows a subtly different title to be displayed
vertical	Vertical	no	'Default'	We can tailor the wording of different verticals to provide an optimum experience for a customer

RefundableContent Props

Property	Type	Required?	Default	Description
bookingCost	number	yes		The cost of the booking
onProtectionChange	function	yes		Function that is invoked when any of the components internal state changes

ProtectionChangeEventArgs

The parameter passed into the onProtectionChange function

interface ProtectionChangeEventArgs {
	protectionSelected: boolean
	protectionValue: number
	bookingCost: number
	totalValue: number
	formattedProtectionValue: string
	formattedBookingCost: string
	formattedTotalValue: string
}