protect-group-refundable-react v1.0.17

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.

Installation

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

Usage

RefundableProvider

Add the provider somewhere near the root of your application

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

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',
		compact: false
	}

	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-react'

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

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

	const handleMakePayment = async () => {
		try {
			// make the payment
			const request: WriteTransactionRequest = {
				bookingReference: '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

RefundableContent Props

ProtectionChangeEventArgs

The parameter passed into the onProtectionChange function

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

Hooks

useRefundableActions

useRefundableActions returns an object containing functions to interact with our platform

interface WriteTransactionRequest {
	bookingReference: string
	eventDate: string
	customerFirstName: string
	customerLastName: string
}

interface WriteTransactionResponse {
	refundableLink: string
	refundableConfirmationHtml: string
}

interface RefundableActions {
	writeTransaction: (request: WriteTransactionRequest) => Promise<WriteTransactionResponse>
}

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

function YourComponent() {
	const { writeTransaction } = useRefundableActions()
} 

useRefundableContext

useRefundableContext provides access to the RefundableContextOptions interface, which has functions allowing you to update the booking cost and currency code using functions, if required at runtime

interface RefundableOptions {
	environment: Environment
	vendorCode: string
	currencyCode: string
	languageCode: string
	productCode: ProductCode
	offeringMethod: OfferingMethod
	premium: number
	eventDateFormat?: string
	displayTrustPilot?: boolean
	displayRefundText?: boolean
	labelText?: LabelText
	vertical?: Vertical
	whiteLabelled?: boolean
	allowNonRefundableLabelClick?: boolean
	compact?: boolean
}

interface RefundableContextOptions extends RefundableOptions {
	bookingData: BookingData
	isWhiteLabelled: boolean
	isCompact: boolean
	toggleProtectionSelected: (isSelected: boolean) => void
	updateBookingCost: (bookingCost: number) => void
	updateCurrency: (currencyCode: string) => void
}

import {useRefundableContext} from 'protect-group-refundable-react'

function YourComponent() {
	const { updateBookingCost } = useRefundableContext() 
}