@securecall/client-component
Version:
SecureCall Core Web Component
89 lines (84 loc) • 4.83 kB
JavaScript
'use strict';
var index = require('./index-DcU5riY9.js');
var logger = require('./logger-MkCqSOk_.js');
const securecallTransactionCss = ":host{display:block}.component-form{display:grid;flex-direction:column;gap:0.5rem}.component-field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem;margin-top:1rem}.component-button{padding:0.75rem 1.5rem;background-color:var(--theme-button-color, #007bff);color:var(--theme-primary-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:1rem;width:fit-content}.component-button:disabled{background-color:var(--theme-button-color-disabled, #ccc);cursor:not-allowed}.component-button:hover:not(:disabled){background-color:var(--theme-button-color-hover, #0056b3)}securecall-request-radio,securecall-request-currency,securecall-request-string,securecall-request-secure-pan,securecall-request-secure{display:block;width:100%}.field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem}.custom-label{text-align:right;align-items:center;font-weight:bold;gap:0.5rem}.custom-input{padding:0.2rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}";
const SecurecallTransaction = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.submitTransactionEvent = index.createEvent(this, "submitTransactionEvent");
}
fieldData;
transactionToggle;
isFormValid = false;
submitTransactionEvent;
log = new logger.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;
}
});
index.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 index.h(Tag, { id: field.name, "field-name": field.name, config: field.config });
});
}
renderButtons() {
return (index.h("div", { class: "component-field-container" }, index.h("div", null), index.h("button", { type: "button", class: "component-button", onClick: () => this.handleSubmit(), disabled: !this.isFormValid }, "Submit Transaction")));
}
render() {
return (index.h(index.Host, { key: '5e4de6a8b6a6ecdd368865d67e162c84f53c3e2d' }, index.h("form", { key: '7a51fea141bb40e0a29c966b42778b320df6a61b', class: "component-form" }, this.renderFields(), this.renderButtons())));
}
static get watchers() { return {
"transactionToggle": ["transactionTogglePropHandler"],
"fieldData": ["fieldDataPropHandler"]
}; }
};
SecurecallTransaction.style = securecallTransactionCss;
exports.securecall_transaction = SecurecallTransaction;
//# sourceMappingURL=securecall-transaction.entry.cjs.js.map