@rainbow-d9/thai-plan-selection

d9-thai-plan-selection

Plan selection for Thai Cloud.

Attribute Name	Type	Description
columns	number	max plans count in one page, default is 3. set tp <=0 value to represent no limit, which means show horizontal scrollbar and column width and line header width are in pixels (number).
columnWidth	number, text	plan column width
lineHeaderWidth	number, text	first column width, default use columns and columnWidth to compute
maxHeight	number, text	max body height, plan header and footer are not included
defs	PlanDefs, PlanDefsFunc	plan candidate definitions
valuesInit	PlanValuesInitFunc	initialize plan values, invoked after defs first initialized
valuesClear	PlanValuesClearFunc	clear plan values, invoked after defs reloaded
currencySymbol	string, ReactNode	currency symbol
premiumDescription	string, ReactNode	premium description
buyText	string, ReactNode	buy button text
buy	ButtonClick	buy button click handler
planTitle	PlanTitleFunc	plan header title
planSubTitle	PlanSubTitleFunc	plan header subtitle
elementTitle	PlanElementTitleFunc	plan element title, level starts from 0
elementFixedValue	PlanElementFixedValueFunc	plan element fixed value
elementOptionsValue	PlanElementOptionsValueFunc	plan element options value
elementNumberValue	PlanElementNumberValueFunc	plan element number value
elementNumberValueValidator	PlanElementNumberValueValidatorFunc	plan element number value validator
planOperators	PlanOperatorsFunc	plan operators
calculationDelay	number	default 1s
calculate	PlanCalculateFunc	do calculation

Force Reload Plan Definitions

Sometimes, the definition of the available options for a plan needs to be reloaded. In such cases, you can force a plan reload by sending a custom event to the component. It is important to note that reloading the plan definition may result in a mismatch between the memory data associated with the current plan and the newly loaded plan. In this scenario, you can perform appropriate cleanup by using the valuesClear method. If the valuesClear parameter is not specified, the component will not operate on the model after reloading the plan definition. Here is an example of sending an event:

import {useSimpleCustomGlobalEvent} from '@rainbow-d9/n2';

// useSimpleCustomGlobalEvent is same as useCustomGlobalEvent, but it is a simple version, which will build parameter key inside.
const fireCustomEvent = useSimpleCustomGlobalEvent();
// marker is required, it is used to identify the plan selection widget even there is only one exists.
// should be same as the marker declared in PlanSelectionDef.
const marker = 'plan-unique-marker';
// model is based on where to fire this event, not model of plan selection.
fireCustomEvent(PlanSelectionGlobalEventPrefix.RELOAD_DEFS, marker, {root, model});

A sample

- PlanSelect::::plans
	- defs: @ext.defs
	- currencySymbol: ฿
	- premiumDescription: After Tax
	- buy: @ext.buy
	- calculationDelay: 3
	- calculate: @ext.calculate