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