https://dashboard.web.bharatx.tech/assets/js/customization.js

1let pickr = null;
2if ($(".color-picker").length != 0) {
3    pickr = new Pickr({
4        el: ".color-picker",
5        container: ".color-picker-container",
6        theme: 'classic',
7        components: {
8            preview: true,
9            opacity: true,
10            hue: true,
11            interaction: {
12                hex: true,
13                rgba: true,
14                hsla: true,
15                hsva: true,
16                cmyk: true,
17                input: true,
18                save: true
19            }
20        }
21    });
22}
23
24if ($("#customization-container").length != 0) {
25    $(`input[type="radio"].disabled`).on("click", (e) => {
26        e.preventDefault();
27    });
28    $(".selectable-sdk-element").on("click", (e) => {
29        const target = $(e.target);
30        if (!target.hasClass("selected-sdk-element")) {
31            target.closest(".row").find(".selected-sdk-element").removeClass("selected-sdk-element");
32            target.addClass("selected-sdk-element");
33            target.closest(".row").find(`.element-container[show="show"]`).attr("show", "");
34            target.closest(".row").find(`.element-container[data-element="${target.data("element")}"]`).attr("show", "show");
35        }
36    });
37    let savedCustomization = {};
38    const onPublishingStatusChange = (published) => {
39        $("#customization-container input,#customization-container button").prop("disabled", !published)
40    };
41    const onLogoChange = (newUrl, oldUrl, publish) => {
42        if (publish) {
43            onPublishingStatusChange(false);
44            saveLogo(newUrl).done(() => {
45                onLogoChange(newUrl);
46            }).fail(() => {
47                onLogoChange(oldUrl);
48            });
49        } else {
50            onPublishingStatusChange(true);
51            $("img.partner-logo").attr("src", newUrl ? newUrl : "/assets/img/logo/logo_black.svg");
52            $("#logo-input input").val(newUrl);
53        }
54    };
55    const onIntro1TitleChange = (newTitle, oldTitle, publish) => {
56        if (publish) {
57            onPublishingStatusChange(false);
58            saveServiceName(newTitle).done(() => {
59                onIntro1TitleChange(newTitle);
60            }).fail(() => {
61                onIntro1TitleChange(oldTitle);
62            });
63        } else {
64            onPublishingStatusChange(true);
65            $(".i1-title").html(newTitle);
66            $("#i1-title-input input").val(newTitle);
67        }
68    };
69    const onIntro1DescChange = (newDesc, oldDesc, publish) => {
70        if (publish) {
71            onPublishingStatusChange(false);
72            saveIntro1Desc(newDesc).done(() => {
73                onIntro1DescChange(newDesc);
74            }).fail(() => {
75                onIntro1DescChange(oldDesc);
76            });
77        } else {
78            onPublishingStatusChange(true);
79            $(".i1-description").html(newDesc);
80            $("#i1-description-input textarea").val(newDesc);
81        }
82    };
83    const onIntro2TitleChange = (newTitle, oldTitle, publish) => {
84        if (publish) {
85            onPublishingStatusChange(false);
86            saveIntro2Title(newTitle).done(() => {
87                onIntro2TitleChange(newTitle);
88            }).fail(() => {
89                onIntro2TitleChange(oldTitle);
90            });
91        } else {
92            onPublishingStatusChange(true);
93            $(".i2-title").html(newTitle);
94            $("#i2-title-input input").val(newTitle);
95        }
96    };
97    const onIntro3DescChange = (newDesc, oldDesc, publish) => {
98        if (publish) {
99            onPublishingStatusChange(false);
100            saveIntro3Desc(newDesc).done(() => {
101                onIntro3DescChange(newDesc);
102            }).fail(() => {
103                onIntro3DescChange(oldDesc);
104            });
105        } else {
106            onPublishingStatusChange(true);
107            $(".i3-description").html(newDesc);
108            $("#i3-description-input textarea").val(newDesc);
109        }
110    };
111    const onPayButtonTextChange = (newPayButtonText, oldPayButtonText, publish) => {
112        if (publish) {
113            onPublishingStatusChange(false);
114            savePayButtonText(newPayButtonText).done(() => {
115                onPayButtonTextChange(newPayButtonText);
116            }).fail(() => {
117                onPayButtonTextChange(oldPayButtonText);
118            });
119        } else {
120            onPublishingStatusChange(true);
121            $(".tc-confirm").html(newPayButtonText);
122            $("#tc-confirm-input input").val(newPayButtonText);
123        }
124    };
125    const onThemeColorChange = (newColorHexString, oldColorHexString, publish) => {
126        if (publish) {
127            onPublishingStatusChange(false);
128            saveThemeColor(newColorHexString).done(() => {
129                savedCustomization.hexColor = newColorHexString;
130                onThemeColorChange(newColorHexString);
131            }).fail(() => {
132                onThemeColorChange(oldColorHexString);
133            });
134        } else {
135            onPublishingStatusChange(true);

136            $(".tc-confirm").css("background-color", newColorHexString);
137            pickr.setColor(newColorHexString);
138        }
139    };
140    getCustomizationDetails().done((res) => {
141        res.logo = res.logoRes ? res.logoRes : res.logoUrl;
142        delete res.logoRes;
143        delete res.logoUrl;
144        if (res.logo == "bharatx_text_logo_black") {
145            res.logo = "";
146        }
147        if(!res.hexColor) {
148            res.hexColor = "#4892CB";
149        }
150        savedCustomization = res;
151        onLogoChange(res.logo);
152        onIntro1TitleChange(res.serviceName);
153        onIntro1DescChange(res.introScreen1Description);
154        onIntro2TitleChange(res.introScreen2Title);
155        onIntro3DescChange(res.introScreen3Description);
156        onPayButtonTextChange(res.payButtonText);
157        onThemeColorChange(res.hexColor);
158    });
159    $("#logo-input button").on("click", (e) => {
160        onLogoChange($("#logo-input input").val(), savedCustomization.logo, true);
161    });
162    $("#i1-title-input button").on("click", (e) => {
163        onIntro1TitleChange($("#i1-title-input input").val(), savedCustomization.serviceName, true);
164    });
165    $("#i1-description-input button").on("click", (e) => {
166        onIntro1DescChange($("#i1-description-input textarea").val(), savedCustomization.introScreen1Description, true);
167    });
168    $("#i2-title-input button").on("click", (e) => {
169        onIntro2TitleChange($("#i2-title-input input").val(), savedCustomization.introScreen2Title, true);
170    });
171    $("#i3-description-input button").on("click", (e) => {
172        onIntro3DescChange($("#i3-description-input textarea").val(), savedCustomization.introScreen3Description, true);
173    });
174    $("#tc-confirm-input button").on("click", (e) => {
175        onPayButtonTextChange($("#tc-confirm-input input").val(), savedCustomization.payButtonText, true);
176    });
177    pickr.on("save", (colorObj) => {
178        const color = colorObj.toHEXA().toString();
179        if(color.toLowerCase() != savedCustomization.hexColor.toLowerCase()) {
180            onThemeColorChange(color, savedCustomization.hexColor, true);
181        }
182    });
183}