@railzai/railz-visualizations
Version:
Railz.ai Visualizations
303 lines • 15.4 kB
JavaScript
/*!
* Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
* Built with Stencil
* Copyright (c) FIS.
*/
/* eslint-disable max-len, @typescript-eslint/no-unused-vars */
import { Component, Prop, h, State, Watch } from '@stencil/core';
import { isNil, isEqual, isEmpty } from 'lodash-es';
import Translations from '../../config/translations/en.json';
import { getBankReconciliationOptionsStyle, getConfiguration, getFilter, getOptions, validateRequiredParams, } from '../../helpers/chart.utils';
import { formatCurrencyValue, handleError, isBankReconciliation } from '../../helpers/utils';
import { ConfigurationInstance } from '../../services/configuration';
import { errorLog } from '../../services/logger';
import { CheckCircleIcon, ErrorIcon } from './bank-reconciliation-icons';
import { formatReconciliatedData, getReportData } from './bank-reconciliation.utils';
export class BankReconciliation {
constructor() {
this.loading = '';
this.updateBankReconciliationParams = (summary) => {
const params = formatReconciliatedData(summary);
if (params) {
this.loading = '';
this.accuracyScore = params.accuracyScore;
this.bankBalance = params.bankBalance;
this.accountingBalance = params.accountingBalance;
this.matchedTransactions = params.matchedTransactions;
this.totalTransations = params.totalTransations;
}
};
/**
* Validates if configuration was passed correctly before setting filter
* @param configuration - Config for authentication
* @param filter - filter to decide chart type to show
* @param options: Whitelabeling options
* @param triggerRequest - indicate if api request should be made
*/
this.validateParams = async (configuration, filter, options, triggerRequest = true) => {
this._configuration = getConfiguration(configuration);
if (this._configuration) {
ConfigurationInstance.configuration = this._configuration;
try {
this._filter = getFilter(filter);
this._options = getOptions(options);
if (validateRequiredParams(this._filter)) {
if (isBankReconciliation(this._filter.reportType)) {
if (triggerRequest) {
await this.requestReportData();
}
}
else {
this.errorStatusCode = 500;
errorLog(Translations.RV_ERROR_INVALID_REPORT_TYPE);
}
}
else {
this.errorStatusCode = 204;
}
}
catch (e) {
this.errorStatusCode = 500;
errorLog(e);
}
}
else {
this.errorStatusCode = 0;
}
};
this.propsUpdated = async (triggerRequest = true) => {
await this.validateParams(this.configuration, this.filter, this.options, triggerRequest);
};
/**
* Request report data based on filter and configuration param
* Formats retrieved data into Highcharts format using formatData
*/
this.requestReportData = async () => {
var _a;
this.errorStatusCode = undefined;
this.loading = Translations.RV_LOADING_REPORT;
try {
const reportData = (await getReportData({
filter: this._filter,
}));
if (reportData === null || reportData === void 0 ? void 0 : reportData.reports) {
this.updateBankReconciliationParams(reportData);
}
else if (((_a = reportData === null || reportData === void 0 ? void 0 : reportData.error) === null || _a === void 0 ? void 0 : _a.message[0]) === 'Business has no bank data') {
errorLog(Translations.RV_ERROR_422_TITLE);
this.errorStatusCode = 422;
}
else {
this.errorStatusCode = handleError(reportData);
}
}
catch (error) {
errorLog(Translations.RV_NOT_ABLE_TO_PARSE_REPORT_DATA, error);
}
finally {
this.loading = '';
}
};
}
async watchConfiguration(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(newValue, this.filter, this.options);
}
}
async watchFilter(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, newValue, this.options);
}
}
async watchOptions(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, this.filter, newValue);
}
}
componentWillLoad() {
this._options = getBankReconciliationOptionsStyle(this.options);
this.propsUpdated && this.propsUpdated();
}
render() {
var _a, _b, _c;
if (this.errorStatusCode !== undefined) {
return (h("railz-error-image", Object.assign({ statusCode: this.errorStatusCode || 500 }, (_a = this._options) === null || _a === void 0 ? void 0 : _a.errorIndicator)));
}
if (isNil(this.accuracyScore) ||
isNil(this.bankBalance) ||
isNil(this.accountingBalance) ||
isNil(this.matchedTransactions) ||
isNil(this.totalTransations) ||
!isEmpty(this.loading)) {
return h("span", null);
}
const getColor = (score) => {
if (score < 50) {
return '#FFD738';
}
if (score < 75) {
return '#009BBD';
}
return '#00884F';
};
const getData = (score) => {
return [score];
};
const accuracyScoreChartOptions = {
chart: {
height: '64px',
width: '64px',
type: 'circle',
gauge: {
startAngle: 0,
endAngle: 360,
size: '100%',
innerRadius: '80%',
getColor: getColor,
getData: getData,
maxScore: 100,
},
},
};
const AccuracyScore = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
return (h("div", { class: "rv-grid-accuracy-score", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.reconciliation) === null || _b === void 0 ? void 0 : _b.gridAccuracyScore },
h("div", { class: "rv-section-container", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.reconciliation) === null || _d === void 0 ? void 0 : _d.sectionContainer },
h("p", { class: "rv-title", style: (_f = (_e = this._options) === null || _e === void 0 ? void 0 : _e.reconciliation) === null || _f === void 0 ? void 0 : _f.title }, Translations.RV_BANK_RECONCILIATION_ACCURACY_SCORE),
h("railz-tooltip", { tooltipStyle: Object.assign(Object.assign({ position: 'bottom-center' }, (_g = this._options) === null || _g === void 0 ? void 0 : _g.tooltipIndicator), { style: Object.assign({ marginLeft: '5px' }, (_j = (_h = this._options) === null || _h === void 0 ? void 0 : _h.tooltipIndicator) === null || _j === void 0 ? void 0 : _j.style) }), tooltipText: ((_o = (_m = (_l = (_k = this._options) === null || _k === void 0 ? void 0 : _k.reconciliation) === null || _l === void 0 ? void 0 : _l.accuracyScoreContent) === null || _m === void 0 ? void 0 : _m.tooltip) === null || _o === void 0 ? void 0 : _o.description) ||
Translations[`RV_TOOLTIP_ACCURACY_SCORE`] })),
h("div", { class: "rv-section-container", style: (_q = (_p = this._options) === null || _p === void 0 ? void 0 : _p.reconciliation) === null || _q === void 0 ? void 0 : _q.sectionContainer },
h("railz-gauge-chart", { options: accuracyScoreChartOptions, data: {
score: this.accuracyScore,
rating: '',
lastUpdated: '',
percentage: true,
} }),
h("p", { class: "rv-subtitle", style: (_s = (_r = this._options) === null || _r === void 0 ? void 0 : _r.reconciliation) === null || _s === void 0 ? void 0 : _s.subtitle }, Translations.RV_BANK_RECONCILIATION_ACCURACY_SCORE_TRANSACTIONS))));
};
const diff = Math.abs(this.accountingBalance - this.bankBalance);
const MatchedInsight = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
return (h("div", { class: "rv-grid", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.reconciliation) === null || _b === void 0 ? void 0 : _b.grid },
h("p", { class: "rv-title", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.reconciliation) === null || _d === void 0 ? void 0 : _d.title }, Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS),
h("div", { class: "rv-section-container rv-matched-insight-section-container", style: (_f = (_e = this._options) === null || _e === void 0 ? void 0 : _e.reconciliation) === null || _f === void 0 ? void 0 : _f.sectionParentContainer },
h("div", { class: "rv-section-child-container", style: (_h = (_g = this._options) === null || _g === void 0 ? void 0 : _g.reconciliation) === null || _h === void 0 ? void 0 : _h.sectionChildContainer },
h("p", { class: "rv-subtitle rv-matched-insight-subtitle", style: (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.reconciliation) === null || _k === void 0 ? void 0 : _k.subtitle }, Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS_SUBHEADING),
h("div", { class: "rv-section-item" },
h("railz-progress-bar", { paidAmount: this.matchedTransactions, overdueAmount: 0, unpaidAmount: this.totalTransations - this.matchedTransactions, options: {
hideLabels: true,
} })),
h("p", { class: "rv-bar-text", style: (_m = (_l = this.options) === null || _l === void 0 ? void 0 : _l.reconciliation) === null || _m === void 0 ? void 0 : _m.subtitle }, `${(_o = this.matchedTransactions) === null || _o === void 0 ? void 0 : _o.toString()}
${Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS_OF}
${(_p = this.totalTransations) === null || _p === void 0 ? void 0 : _p.toString()}`)),
h("div", { class: "rv-section-child-container", style: (_r = (_q = this._options) === null || _q === void 0 ? void 0 : _q.reconciliation) === null || _r === void 0 ? void 0 : _r.sectionChildContainer },
h("p", { class: "rv-subtitle rv-matched-insight-subtitle", style: (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.reconciliation) === null || _t === void 0 ? void 0 : _t.subtitle }, Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS_ACCOUNTING_BALANCE),
h("p", { class: "rv-section-number", style: (_v = (_u = this.options) === null || _u === void 0 ? void 0 : _u.reconciliation) === null || _v === void 0 ? void 0 : _v.sectionNumber }, formatCurrencyValue(this.accountingBalance))),
h("div", { class: "rv-section-child-container", style: (_x = (_w = this._options) === null || _w === void 0 ? void 0 : _w.reconciliation) === null || _x === void 0 ? void 0 : _x.sectionChildContainer },
h("p", { class: "rv-subtitle rv-matched-insight-subtitle", style: (_z = (_y = this.options) === null || _y === void 0 ? void 0 : _y.reconciliation) === null || _z === void 0 ? void 0 : _z.subtitle }, Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS_BANK_BALANCE),
h("p", { class: "rv-section-number", style: (_1 = (_0 = this._options) === null || _0 === void 0 ? void 0 : _0.reconciliation) === null || _1 === void 0 ? void 0 : _1.sectionNumber }, formatCurrencyValue(this.bankBalance))),
h("p", { class: "rv-section-number rv-section-equals", style: (_3 = (_2 = this._options) === null || _2 === void 0 ? void 0 : _2.reconciliation) === null || _3 === void 0 ? void 0 : _3.sectionNumber }, '='),
h("div", { class: "rv-section-child-container", style: (_5 = (_4 = this._options) === null || _4 === void 0 ? void 0 : _4.reconciliation) === null || _5 === void 0 ? void 0 : _5.sectionChildContainer },
h("p", { class: "rv-subtitle rv-matched-insight-subtitle", style: (_7 = (_6 = this._options) === null || _6 === void 0 ? void 0 : _6.reconciliation) === null || _7 === void 0 ? void 0 : _7.subtitle }, Translations.RV_BANK_RECONCILIATION_MATCHED_INSIGHTS_CALCULATION),
h("div", { class: "rv-section-icon" },
h("div", { class: "rv-icon" }, diff !== 0 ? h(ErrorIcon, null) : h(CheckCircleIcon, null)),
h("p", { class: "rv-section-number rv-section-number-icon", style: (_9 = (_8 = this._options) === null || _8 === void 0 ? void 0 : _8.reconciliation) === null || _9 === void 0 ? void 0 : _9.sectionNumber }, formatCurrencyValue(diff)))))));
};
return (h("div", { class: "rv-container", style: (_c = (_b = this._options) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.style },
h(AccuracyScore, null),
h(MatchedInsight, null)));
}
static get is() { return "railz-bank-reconciliation"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["bank-reconciliation.scss"]
}; }
static get styleUrls() { return {
"$": ["bank-reconciliation.css"]
}; }
static get properties() { return {
"configuration": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVConfiguration",
"resolved": "RVConfiguration",
"references": {
"RVConfiguration": {
"location": "import",
"path": "../../types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Configuration information like authentication configuration"
}
},
"filter": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVFilterBankReconciliation",
"resolved": "RVFilterBankReconciliation",
"references": {
"RVFilterBankReconciliation": {
"location": "import",
"path": "../../types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Filter information to query the backend APIs"
}
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVOptions",
"resolved": "RVOptions",
"references": {
"RVOptions": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "For whitelabeling styling"
}
}
}; }
static get states() { return {
"_options": {},
"loading": {},
"_configuration": {},
"_filter": {},
"errorStatusCode": {},
"accuracyScore": {},
"bankBalance": {},
"accountingBalance": {},
"matchedTransactions": {},
"totalTransations": {}
}; }
static get watchers() { return [{
"propName": "configuration",
"methodName": "watchConfiguration"
}, {
"propName": "filter",
"methodName": "watchFilter"
}, {
"propName": "options",
"methodName": "watchOptions"
}]; }
}
//# sourceMappingURL=bank-reconciliation.js.map