@securecall/client-component
Version:
SecureCall Core Web Component
185 lines (184 loc) • 6.9 kB
JavaScript
import { Host, h, forceUpdate } from "@stencil/core";
import { Logger } from "../../utils/logger";
export class SecurecallTransaction {
fieldData;
transactionToggle;
isFormValid = false;
submitTransactionEvent;
log = Logger('SecurecallTransaction');
transactionTogglePropHandler(newValue, oldValue) {
if (newValue !== oldValue) {
this.updateFormValidity();
}
}
fieldDataPropHandler(newValue, oldValue) {
this.log.debug('fieldDataPropHandler: newValue:', newValue, 'oldValue:', oldValue);
if (newValue !== oldValue) {
this.updateFormValidity();
}
}
handleSubmit() {
this.log.debug('handleSubmit:', this, this.submitTransactionEvent);
this.submitTransactionEvent.emit(this.fieldData.asAPITransaction());
}
handleIsValidEvent(event) {
const { field, valid, value } = event.detail;
this.log.debug('isValidEvent: field:', field, 'valid:', valid, 'value:', value);
if (field && this.fieldData.transaction[field]) {
this.fieldData.transaction[field].valid = valid;
this.fieldData.transaction[field].value = value;
this.updateFormValidity();
}
}
async handleRadioChange(event) {
this.log.debug("requestRadioChangeEvent: " + event.detail);
// this.isFormValid = false;
const { field, value } = event.detail;
let fields = this.fieldData.calculatedFields();
Object.entries(fields[field]['hideRelatedFields']?.[value] || {}).forEach(([relatedField, val]) => {
let f = this.fieldData.transaction[relatedField];
if (f) {
f['hidden'] = val;
}
});
forceUpdate(this);
}
updateFormValidity() {
const invalidFields = Object.entries(this.fieldData.calculatedFields())
.filter(([_fieldName, field]) => !field.hidden && !field.valid)
.map(([fieldName]) => fieldName);
this.isFormValid = invalidFields.length === 0;
this.log.debug('updateFormValidity: isFormValid:', this.isFormValid, 'invalidFields:', JSON.stringify(invalidFields));
}
////////////////////////////
// Render Methods
////////////////////////////
renderFields() {
this.log.debug("renderFields: fieldData=", this.fieldData);
const fields = this.fieldData?.asComponentChildren() || [];
this.log.debug("renderFields: fields=", fields);
return fields.map((field) => {
const Tag = 'securecall-request-' + field.component;
return h(Tag, { id: field.name, "field-name": field.name, config: field.config });
});
}
renderButtons() {
return (h("div", { class: "component-field-container" }, h("div", null), h("button", { type: "button", class: "component-button", onClick: () => this.handleSubmit(), disabled: !this.isFormValid }, "Submit Transaction")));
}
render() {
return (h(Host, { key: '701a12cd451094313dd7dbf6f1ca30d08384276d' }, h("form", { key: 'd4fc5c577ab01f306350f3e02fff6e60340d8c98', class: "component-form" }, this.renderFields(), this.renderButtons())));
}
static get is() { return "securecall-transaction"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["securecall-transaction.css"]
};
}
static get styleUrls() {
return {
"$": ["securecall-transaction.css"]
};
}
static get properties() {
return {
"fieldData": {
"type": "unknown",
"attribute": "field-data",
"mutable": false,
"complexType": {
"original": "RequestFieldGroup",
"resolved": "RequestFieldGroup",
"references": {
"RequestFieldGroup": {
"location": "import",
"path": "../../classes/request_field_group",
"id": "src/classes/request_field_group.ts::RequestFieldGroup"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"transactionToggle": {
"type": "boolean",
"attribute": "transaction-toggle",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"isFormValid": {}
};
}
static get events() {
return [{
"method": "submitTransactionEvent",
"name": "submitTransactionEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "ITransactionValues",
"resolved": "ITransactionValues",
"references": {
"ITransactionValues": {
"location": "import",
"path": "../../interfaces/transaction",
"id": "src/interfaces/transaction.ts::ITransactionValues"
}
}
}
}];
}
static get watchers() {
return [{
"propName": "transactionToggle",
"methodName": "transactionTogglePropHandler"
}, {
"propName": "fieldData",
"methodName": "fieldDataPropHandler"
}];
}
static get listeners() {
return [{
"name": "isValidEvent",
"method": "handleIsValidEvent",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "requestRadioChangeEvent",
"method": "handleRadioChange",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=securecall-transaction.js.map