https://www.05366.com.ua/assets/4c4fed9c/js/payments/cisPaymentGrid.js?v=1789825603

1/**
2 * @param {BasePaymentWidget} widget
3 * @param {CisPaymentSettings} settings
4 * @constructor
5 */
6var CisPaymentGrid = function (widget, settings) {
7    /** @var {BasePaymentWidget} */
8    this._widget = widget;
9    /** @var {CisPaymentSettings} */
10    this._settings = settings;
11    /** @var Object.<number, GridItem> */
12    this._grid = {};
13
14    var self = this;
15    $(this._settings.getElement("serviceRow"), this._widget.$element).each(function () {
16        var $this = $(this),
17            itemId = $this.data("key"),
18            item = {
19                itemId: itemId,
20                $row: $this,
21                $enableCheckbox: $(self._settings.getElement("enableServiceInput"), $this),
22                $service: $(self._settings.getElement("serviceId"), $this),
23                $tariff: $(self._settings.getElement("serviceTariffsList"), $this),
24                $tariffTerm: $(self._settings.getElement("tariffTerm"), $this),
25                $tariffMetric: $(self._settings.getElement("tariffMetric"), $this),
26                $tariffSimpleMetric: $(self._settings.getElement("tariffSimpleMetric"), $this),
27                $tariffInfiniteMetric: $(self._settings.getElement("tariffInfiniteMetric"), $this),
28                $tariffTermTitle: $(self._settings.getElement("tariffTitle"), $this),
29                $tariffCustomDateTo: $(self._settings.getElement("tariffCustomDateTo"), $this),
30                $triggerCustomDateTo: $(self._settings.getElement("triggerCustomDateTo"), $this),
31                $tariffCustomPrice: $(self._settings.getElement("tariffCustomPrice"), $this),
32                $tariffPrice: $(self._settings.getElement("tariffPrice"), $this),
33                $tariffPriceSign: $(self._settings.getElement("currencySign"), $this),
34
35                $tariffCustomTermContainer: $(self._settings.getElement("tariffCustomTermContainer"), $this),
36                $tariffDescriptionContainer: $(self._settings.getElement("tariffDescriptionContainer"), $this),
37                $tariffCustomPriceContainer: $(self._settings.getElement("tariffCustomPriceContainer"), $this),
38                $tariffPriceTitleContainer: $(self._settings.getElement("tariffPriceTitleContainer"), $this),
39                $overlay: $(self._settings.getElement("itemOverlay"), $this),
40                $extraInputs: $(self._settings.getElement("extraInputs"), $this),
41                $extraTriggers: $(self._settings.getElement("extraTriggers"), $this)
42            };
43        item.isCheckbox = "checkbox" === item.$enableCheckbox.prop("type");
44        item.hasTariffsList = item.$tariff.length > 0;
45        item.hasCustomDateTo = item.$tariffCustomDateTo.length > 0;
46        item.hasCustomMetricModeSelector = item.$tariffSimpleMetric.length > 0 && item.$tariffInfiniteMetric.length > 0;
47
48        self._grid[itemId] = item;
49    });
50};
51$.extend(CisPaymentGrid.prototype, {
52    /**
53     * @this CisPaymentGrid
54     * @param {number|string} id
55     * @return {GridItem|null}
56     */
57    getItemForService: function (id) {
58        return this.hasItemForService(id) ? this._grid[id] : null;
59    },
60    /**
61     * @this CisPaymentGrid
62     * @param {number|string} id
63     * @return {boolean}
64     */
65    hasItemForService: function (id) {
66        return this._grid.hasOwnProperty("number" === typeof id ? id.toString() : id);
67    },
68    /**
69     * @this CisPaymentGrid
70     * @return {boolean}
71     */
72    hasSelectedServices: function () {
73        for (var serviceId in this._grid) {
74            if (this._grid[serviceId].$enableCheckbox.prop("checked")) {
75                return true;
76            }
77        }
78
79        return false;
80    },
81    /**
82     * @this CisPaymentGrid
83     * @return {boolean}
84     */
85    hasVisibleItems: function () {
86        for (var serviceId in this._grid) {
87            if (this._grid[serviceId].$row.hasClass("service-visible")) {
88                return true;
89            }
90        }
91
92        return false;
93    },
94    /**
95     * @this CisPaymentGrid
96     * @param {number|string} id
97     */
98    hideItemRow: function (id) {
99        var gridItem = this.getItemForService(id);
100        if (null === gridItem) {
101            return;
102        }
103        this.uncheckItem(id);
104        gridItem.$row
105            .removeClass("service-visible")
106            .hide();
107    },
108    /**
109     * @this CisPaymentGrid
110     * @param {number|string} id
111     */
112    showItemRow: function (id) {
113        var gridItem = this.getItemForService(id);
114        if (null === gridItem) {
115            return;
116        }
117        gridItem.$row
118            .addClass("service-visible")
119            .show();
120    },
121    /**
122     * @this CisPaymentGrid
123     * @param {number|string} id
124     * @return {boolean}
125     */
126    checkItem: function (id) {
127        var gridItem = this.getItemForService(id);
128        if (null === gridItem) {
129            throw "Unknown service ID";
130        }
131        var oldValue = gridItem.$enableCheckbox.prop("checked");
132        gridItem.$enableCheckbox.prop("checked", true);
133        this.updateItemStatus(id);
134
135        return !oldValue;
136    },
137    /**
138     * @this CisPaymentGrid
139     * @param {number|string} id
140     * @return {boolean}
141     */
142    uncheckItem: function (id) {
143        var gridItem = this.getItemForService(id);
144        if (null === gridItem) {
145            throw "Unknown service ID";
146        }
147        var oldValue = gridItem.$enableCheckbox.prop("checked");
148        gridItem.$enableCheckbox.prop("checked", false);
149        this.updateItemStatus(id);
150
151        return oldValue;
152    },
153    /**
154     * @this CisPaymentGrid
155     * @param {number|string} id
156     * @return {boolean}
157     */
158    toggleItem: function (id) {
159        var gridItem = this.getItemForService(id);
160        if (null === gridItem) {
161            throw "Unknown service ID";
162        }
163        return gridItem.$enableCheckbox.prop("checked") ? this.uncheckItem(id) : this.checkItem(id);
164    },
165    /**
166     * @this CisPaymentGrid
167     * @param {number|string} id
168     */
169    updateItemStatus: function (id) {
170        var self = this,
171            gridItem = this.getItemForService(id);
172        if (null === gridItem) {
173            return;
174        }
175        var isChecked = gridItem.$enableCheckbox.prop("checked");
176        gridItem.$service.add(gridItem.$tariff).add(gridItem.$extraInputs)
177            .prop("disabled", !isChecked);
178        this.updateTariffsList(id);
179        if (isChecked && !gridItem.isCheckbox) {
180            var $rows = $("input[name=" + gridItem.$enableCheckbox.prop("name") + "]", this._widget.$element)
181                .closest("[data-key]")
182                .not(gridItem.$row);
183            $rows.each(function () {
184                self.uncheckItem($(this).data("key"));
185            });
186        }
187        gridItem.$enableCheckbox.trigger("change", [true]);
188    },
189    /**
190     * @this CisPaymentGrid
191     * @param {number|string} id
192     * @param {string} [overlayContent]
193     */
194    showOverlayForItem: function (id, overlayContent) {
195        var gridItem = this.getItemForService(id);
196        if (null === gridItem) {
197            return;
198        }
199        gridItem.$row.addClass("tariff-box__row--with-overlay");
200        gridItem.$overlay.text(undefined !== overlayContent ? overlayContent : "");
201        gridItem.$enableCheckbox.prop("disabled", true);
202    },
203    /**
204     * @this CisPaymentGrid
205     * @param {number|string} id
206     */
207    hideOverlayForItem: function (id) {
208        var gridItem = this.getItemForService(id);
209        if (null === gridItem) {
210            return;
211        }
212        gridItem.$row.removeClass("tariff-box__row--with-overlay");
213        gridItem.$overlay.text("");
214        gridItem.$enableCheckbox.prop("disabled", !this._widget.paymentForm.isFormReady());
215    },
216    /**
217     * @this CisPaymentGrid
218     * @param {number|string} id
219     */
220    updateTariffsList: function (id) {
221        var gridItem = this.getItemForService(id);
222        if (null === gridItem) {
223            return;
224        }
225        var allowChangeServicePrice = this._settings.getOption("allowChangeServicePrice", false),
226            isCustomTariff = !gridItem.hasTariffsList || !gridItem.$tariff.val() /* учитываем пустой список */,
227            isServiceChecked = gridItem.$enableCheckbox.prop("checked");
228        gridItem.$tariffCustomTermContainer.toggle(isCustomTariff);
229        gridItem.$tariffDescriptionContainer.toggle(!isCustomTariff);
230        gridItem.$tariffCustomPriceContainer.toggle(allowChangeServicePrice || isCustomTariff);
231        gridItem.$tariffPriceTitleContainer.toggle(!allowChangeServicePrice && !isCustomTariff);
232
233        gridItem.$tariffCustomPrice.prop(
234            "disabled",
235            !isServiceChecked || (!allowChangeServicePrice && !isCustomTariff)
236        );
237        gridItem.$tariffSimpleMetric
238            .add(gridItem.$tariffInfiniteMetric)
239                .prop("disabled", !isServiceChecked || !isCustomTariff);
240        if (!isCustomTariff) {
241            var $option = gridItem.$tariff.find("option:selected");
242            if (gridItem.hasTariffsList && 0 === $option.length) {
243                $option = gridItem.$tariff.find("option:first");
244                if (0 === $option.length) {
245                    throw "Empty tariffs list";
246                }
247                $option.prop("selected", true);
248            }
249            if (gridItem.hasCustomDateTo) {
250                this._widget.paymentGrid.updateCustomDateTo(gridItem.itemId);
251            }
252            var tariffData = $option.data(),
253                tariffMetric = tariffData.metric,
254                isTariffMetricInfinite = this._settings.getOption("infiniteMetricValue") === tariffMetric;
255            if (isTariffMetricInfinite) {
256                gridItem.$tariffInfiniteMetric.prop("checked", true);
257            } else {
258                gridItem.$tariffTerm.val(tariffData.term);
259                gridItem.$tariffMetric.val([tariffMetric]);
260                gridItem.$tariffSimpleMetric.prop("checked", true);
261            }
262            gridItem.$tariffCustomPrice
263                .val(tariffData.priceTitle)
264                .data("price", tariffData.price);
265
266            gridItem.$tariffTermTitle.text(tariffData.termTitle);
267            gridItem.$tariffPrice
268                .text(tariffData.priceTitle)
269                .data("price", tariffData.price);
270        } else {
271            if ("" === gridItem.$tariffTerm.val()) {
272                gridItem.$tariffTerm.val(1);
273            }
274            if ("" === gridItem.$tariffCustomPrice.val()) {
275                gridItem.$tariffCustomPrice
276                    .val(0)
277                    .data("price", 0)
278                    .trigger("blur");
279            }
280
281            if (!gridItem.$tariffSimpleMetric.prop("checked") && !gridItem.$tariffInfiniteMetric.prop("checked")) {
282                gridItem.$tariffSimpleMetric.prop("checked", true);
283            }
284            if (gridItem.hasCustomDateTo && "" === gridItem.$tariffCustomDateTo.val()) {
285                gridItem.$tariffCustomDateTo.datepicker(
286                    "setDate",
287                    gridItem.$tariffCustomDateTo.datepicker("option", "minDate")
288                );
289            }
290        }
291        this.updateCustomMetricMode(gridItem.itemId);
292        if (gridItem.hasTariffsList) {
293            gridItem.$tariff
294                .trigger("change", [true])
295                .trigger("chosen:updated");
296        }
297    },
298    /**
299     * @this CisPaymentGrid
300     * @param {number|string} id
301     */
302    updateItemCustomPrice: function (id) {
303        var gridItem = this.getItemForService(id);
304        if (null === gridItem) {
305            return;
306        }

307        var value = this._widget.utils.convertLocaleStringToFloat(gridItem.$tariffCustomPrice.val());
308        gridItem.$tariffCustomPrice
309            .val(value.toLocaleString(this._settings.getOption("locale", "en"), {
310                minimumFractionDigits: 2,
311                maximumFractionDigits: 2
312            }))
313            .data("price", value)
314            .trigger("change", [true]);
315    },
316    /**
317     * @this CisPaymentGrid
318     * @param {number|string} id
319     */
320    updateCustomDateTo: function (id) {
321        var gridItem = this.getItemForService(id);
322        if (null === gridItem || !gridItem.hasCustomDateTo || "" === gridItem.$tariff.val()) {
323            return;
324        }
325        var $datepicker = gridItem.$tariffCustomDateTo,
326            $option = gridItem.$tariff.find("option:selected");
327        if (0 === $option.length) {
328            return;
329        }
330        $datepicker.datepicker(
331            "setDate",
332            this._widget.utils.calculateDateTo(
333                $datepicker.datepicker("option", "minDate"),
334                $option.data("duration"),
335                $datepicker.datepicker("option", "dateFormat")
336            )
337        );
338    },
339    /**
340     * @this CisPaymentGrid
341     * @param {number|string} id
342     */
343    updateCustomMetricMode: function (id) {
344        var gridItem = this.getItemForService(id);
345        if (null === gridItem) {
346            return;
347        }
348        var isItemSelected = gridItem.$enableCheckbox.prop("checked"),
349            isCustomTariff = !gridItem.hasTariffsList || !gridItem.$tariff.val(),
350            isSimpleMode = !gridItem.hasCustomMetricModeSelector || gridItem.$tariffSimpleMetric.prop("checked"),
351            isInfiniteMode = gridItem.hasCustomMetricModeSelector && gridItem.$tariffInfiniteMetric.prop("checked"),
352            isInputsEnabled = isItemSelected && isCustomTariff && isSimpleMode && !isInfiniteMode;
353        gridItem.$tariffTerm
354            .add(gridItem.$tariffMetric)
355            .add(gridItem.$tariffCustomDateTo)
356                .prop("disabled", !isInputsEnabled);
357        if (gridItem.hasCustomDateTo) {
358            gridItem.$triggerCustomDateTo.css({cursor: isInputsEnabled ? "pointer" : "not-allowed"});
359        }
360    },
361    /**
362     * @this CisPaymentGrid
363     * @param {Object.<number, number|null>} preSelectedItems
364     */
365    saveFormState: function (preSelectedItems) {
366        var result = {};
367        for (var id in this._grid) {
368            var gridItem = this._grid[id],
369                isChecked = preSelectedItems.hasOwnProperty(id),
370                formItem = {
371                    checked: isChecked,
372                    tariff: isChecked ? preSelectedItems[id] : false
373                };
374            if (gridItem.$tariffTerm.length > 0) {
375                formItem.term = gridItem.$tariffTerm.val();
376            }
377            if (gridItem.$tariffMetric.length > 0) {
378                formItem.metric = gridItem.$tariffMetric.val();
379            }
380            if (gridItem.$tariffCustomDateTo.length > 0) {
381                formItem.dateTo = gridItem.$tariffCustomDateTo.val();
382            }
383            if (gridItem.$tariffSimpleMetric.length > 0) {
384                formItem.isSimpleMetric = gridItem.$tariffSimpleMetric.prop("checked");
385            }
386            if (gridItem.$tariffInfiniteMetric.length > 0) {
387                formItem.isInfiniteMetric = gridItem.$tariffInfiniteMetric.prop("checked");
388            }
389            if (gridItem.$tariffCustomPrice.length > 0) {
390                formItem.price = gridItem.$tariffCustomPrice.val();
391            }
392            result[id] = formItem;
393        }
394
395        return result;
396    },
397    /**
398     * @this CisPaymentGrid
399     * @param formState
400     */
401    restoreFormState: function (formState) {
402        for (var id in this._grid) {
403            if (!formState.hasOwnProperty(id)) {
404                continue;
405            }
406            var gridItem = this._grid[id],
407                formItem = formState[id];
408            if (gridItem.hasTariffsList && false !== formItem.tariff) {
409                gridItem.$tariff.val(formItem.tariff);
410            }
411            if (formItem.checked) {
412                this.checkItem(id);
413            } else {
414                this.uncheckItem(id);
415            }
416            if (gridItem.$tariffTerm.length > 0 && formItem.term) {
417                gridItem.$tariffTerm.val(formItem.term);
418            }
419            if (gridItem.$tariffMetric.length > 0 && formItem.metric) {
420                gridItem.$tariffMetric.val(formItem.metric);
421            }
422            if (gridItem.$tariffSimpleMetric.length > 0 && formItem.isSimpleMetric) {
423                gridItem.$tariffSimpleMetric.prop("checked", true);
424                this.updateCustomMetricMode(id);
425            }
426            if (gridItem.$tariffInfiniteMetric.length > 0 && formItem.isInfiniteMetric) {
427                gridItem.$tariffInfiniteMetric.prop("checked", true);
428                this.updateCustomMetricMode(id);
429            }
430            if (gridItem.$tariffCustomDateTo.length > 0 && formItem.dateTo) {
431                var datePicker = gridItem.$tariffCustomDateTo;
432                datePicker.datepicker(
433                    "setDate",
434                    $.datepicker.parseDate(datePicker.datepicker("option", "dateFormat"), formItem.dateTo)
435                );
436            }
437            if (gridItem.$tariffCustomPrice.length > 0 && formItem.price) {
438                gridItem.$tariffCustomPrice.val(formItem.price);
439                this.updateItemCustomPrice(id);
440            }
441        }
442    }
443});