tango-app-ui-manage-settings 3.0.22-dev → 3.0.24-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/brand-details/signatory-details/signatory-details.component.mjs +3 -3
- package/esm2022/lib/components/configurations/configurations.component.mjs +4 -3
- package/esm2022/lib/components/configurations/email-configuration/email-configuration.component.mjs +215 -0
- package/esm2022/lib/components/configurations/ticket-configuration/ticket-configuration.component.mjs +17 -3
- package/esm2022/lib/components/payments-subscription/payments-subscription.component.mjs +11 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/credit-note/credit-note.component.mjs +3 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/need-help/need-help.component.mjs +3 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/subscription-approval/subscription-approval.component.mjs +32 -2
- package/esm2022/lib/components/payments-subscription/subscription-popups/update/update.component.mjs +3 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/upgrade-plan/upgrade-plan.component.mjs +19 -3
- package/esm2022/lib/services/client-api.service.mjs +9 -1
- package/esm2022/lib/services/payment-subscription.service.mjs +6 -1
- package/esm2022/lib/tango-manage-settings.module.mjs +6 -3
- package/fesm2022/tango-app-ui-manage-settings.mjs +308 -19
- package/fesm2022/tango-app-ui-manage-settings.mjs.map +1 -1
- package/lib/components/configurations/email-configuration/email-configuration.component.d.ts +57 -0
- package/lib/components/configurations/ticket-configuration/ticket-configuration.component.d.ts +4 -0
- package/lib/components/payments-subscription/subscription-popups/subscription-approval/subscription-approval.component.d.ts +1 -0
- package/lib/components/payments-subscription/subscription-popups/upgrade-plan/upgrade-plan.component.d.ts +6 -1
- package/lib/services/client-api.service.d.ts +3 -0
- package/lib/services/payment-subscription.service.d.ts +3 -0
- package/lib/tango-manage-settings.module.d.ts +13 -12
- package/package.json +1 -1
|
@@ -40,6 +40,7 @@ class ClientApiService {
|
|
|
40
40
|
storeApiUrl;
|
|
41
41
|
reportApiUrl;
|
|
42
42
|
userApiUrl;
|
|
43
|
+
ticketsApiUrl;
|
|
43
44
|
clientId = new BehaviorSubject('');
|
|
44
45
|
clientData = new BehaviorSubject(null);
|
|
45
46
|
clientFormData = new BehaviorSubject({ value: null, type: null, form: null });
|
|
@@ -53,6 +54,7 @@ class ClientApiService {
|
|
|
53
54
|
this.storeApiUrl = e.storeApiUrl;
|
|
54
55
|
this.reportApiUrl = e.reportApiUrl;
|
|
55
56
|
this.userApiUrl = e.userApiUrl;
|
|
57
|
+
this.ticketsApiUrl = e.ticketsApiUrl;
|
|
56
58
|
}
|
|
57
59
|
});
|
|
58
60
|
this.gs.dataRangeValue.subscribe((e) => {
|
|
@@ -151,6 +153,12 @@ class ClientApiService {
|
|
|
151
153
|
getAssignedUsers(clientId) {
|
|
152
154
|
return this.http.get(`${this.userApiUrl}/get-assign-client?clientId=${clientId}`);
|
|
153
155
|
}
|
|
156
|
+
emailUserList(data) {
|
|
157
|
+
return this.http.post(`${this.ticketsApiUrl}/infra/emailUserList`, data);
|
|
158
|
+
}
|
|
159
|
+
saveInfraEmailConfig(data) {
|
|
160
|
+
return this.http.post(`${this.ticketsApiUrl}/infra/saveInfraEmailConfig`, data);
|
|
161
|
+
}
|
|
154
162
|
saveAsTemplate(buffer, fileName) {
|
|
155
163
|
const data = new Blob([buffer], {
|
|
156
164
|
type: EXCEL_TYPE$1
|
|
@@ -555,11 +563,11 @@ class SignatoryDetailsComponent {
|
|
|
555
563
|
this.apiService.clientFormData.next({ value: this.signatoryDetailsForm.value, type: 'submit', form: 'signatory-details' });
|
|
556
564
|
}
|
|
557
565
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SignatoryDetailsComponent, deps: [{ token: i1$1.FormBuilder }, { token: ClientApiService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SignatoryDetailsComponent, selector: "lib-signatory-details", ngImport: i0, template: "<form [formGroup]=\"signatoryDetailsForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_brandDetails_isEdit\" >\r\n <div *ngIf=\"signatoryDetailsForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button type=\"button\" (click)=\"signatoryDetailsForm.disabled ? signatoryDetailsForm.enable() : signatoryDetailsForm.disable()\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"username\" class=\"form-label\">Username <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"name\" type=\"
|
|
566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SignatoryDetailsComponent, selector: "lib-signatory-details", ngImport: i0, template: "<form [formGroup]=\"signatoryDetailsForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_brandDetails_isEdit\" >\r\n <div *ngIf=\"signatoryDetailsForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button type=\"button\" (click)=\"signatoryDetailsForm.disabled ? signatoryDetailsForm.enable() : signatoryDetailsForm.disable()\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"username\" class=\"form-label\">Username <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"name\" type=\"text\" class=\"form-control\" id=\"username\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"email\" type=\"email\" class=\"form-control\" id=\"email\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"number\" type=\"text\" class=\"form-control\" id=\"contactNumber\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"designation\" type=\"text\" class=\"form-control\" id=\"designation\"\r\n autocomplete=\"off\">\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"signatoryDetailsForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onCancel()\" type=\"button\" class=\"btn btn-outline me-4\">Cancel</a>\r\n <a (click)=\" onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
559
567
|
}
|
|
560
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SignatoryDetailsComponent, decorators: [{
|
|
561
569
|
type: Component,
|
|
562
|
-
args: [{ selector: 'lib-signatory-details', template: "<form [formGroup]=\"signatoryDetailsForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_brandDetails_isEdit\" >\r\n <div *ngIf=\"signatoryDetailsForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button type=\"button\" (click)=\"signatoryDetailsForm.disabled ? signatoryDetailsForm.enable() : signatoryDetailsForm.disable()\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"username\" class=\"form-label\">Username <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"name\" type=\"
|
|
570
|
+
args: [{ selector: 'lib-signatory-details', template: "<form [formGroup]=\"signatoryDetailsForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_brandDetails_isEdit\" >\r\n <div *ngIf=\"signatoryDetailsForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button type=\"button\" (click)=\"signatoryDetailsForm.disabled ? signatoryDetailsForm.enable() : signatoryDetailsForm.disable()\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"username\" class=\"form-label\">Username <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"name\" type=\"text\" class=\"form-control\" id=\"username\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required\"></span></label>\r\n <input formControlName=\"email\" type=\"email\" class=\"form-control\" id=\"email\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"number\" type=\"text\" class=\"form-control\" id=\"contactNumber\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation <span\r\n class=\"alert-required\"></span></label>\r\n <input formControlName=\"designation\" type=\"text\" class=\"form-control\" id=\"designation\"\r\n autocomplete=\"off\">\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"signatoryDetailsForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a (click)=\"onCancel()\" type=\"button\" class=\"btn btn-outline me-4\">Cancel</a>\r\n <a (click)=\" onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n</form>\r\n", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
563
571
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i3.GlobalStateService }] });
|
|
564
572
|
|
|
565
573
|
class BrandDetailsComponent {
|
|
@@ -731,6 +739,8 @@ class PaymentSubscriptionService {
|
|
|
731
739
|
http;
|
|
732
740
|
gs;
|
|
733
741
|
paymentSubscriptionApiUrl;
|
|
742
|
+
reloadDataSubject = new BehaviorSubject(false);
|
|
743
|
+
reloadData$ = this.reloadDataSubject.asObservable();
|
|
734
744
|
// clientId = new BehaviorSubject<string>('')
|
|
735
745
|
// clientData = new BehaviorSubject<any>(null)
|
|
736
746
|
paymentinvoiceFormData = new BehaviorSubject({ value: null, type: null, form: null });
|
|
@@ -749,6 +759,9 @@ class PaymentSubscriptionService {
|
|
|
749
759
|
// }
|
|
750
760
|
// })
|
|
751
761
|
}
|
|
762
|
+
triggerReload() {
|
|
763
|
+
this.reloadDataSubject.next(true);
|
|
764
|
+
}
|
|
752
765
|
exportAsExcelFile(json, excelFileName) {
|
|
753
766
|
const worksheet = XLSX.utils.json_to_sheet(json);
|
|
754
767
|
const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
|
|
@@ -961,11 +974,11 @@ class UpdateComponent {
|
|
|
961
974
|
}
|
|
962
975
|
submitUpdate() { }
|
|
963
976
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpdateComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i1$2.NgbModal }, { token: PaymentSubscriptionService }, { token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i4$2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
964
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpdateComponent, selector: "lib-update", inputs: { modalData: "modalData" }, outputs: { passEntry: "passEntry" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <
|
|
977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpdateComponent, selector: "lib-update", inputs: { modalData: "modalData" }, outputs: { passEntry: "passEntry" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <div class=\"headerclass\">Add Address</div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary\" data-bs-dismiss=\"modal\">\r\n <span (click)=\"activeModal.dismiss()\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <!-- <i class=\"ki-duotone ki-cross fs-1\"><span class=\"path1\"></span><span\r\n class=\"path2\"></span></i> -->\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"updateForm\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column mb-7 fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">Brand Name</label>\r\n <input formControlName=\"brandName\" id=\"brandName\" readonly type=\"text\" class=\" ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">GST No / Tax ID</label>\r\n <input formControlName=\"gstNumber\" id=\"gstNumber\" type=\"text\" class=\"ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n <!-- <div *ngIf=\"gstnumber?.errors?.required\" class=\"text-danger\"> \r\n GST Number is required.\r\n </div> -->\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">Billing Address</label>\r\n <input formControlName=\"billingAddress\" id=\"billingAddress\" type=\"text\" class=\"ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n <!-- <div *ngIf=\"billingaddress?.errors?.required\" class=\"text-danger\">\r\n Billing Address is required.\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button type=\"submit\" (click)=\"closeModal()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" [disabled]=\"updateForm.invalid\" (click)=\"onSubmit()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit </span></button>\r\n </div>\r\n \r\n </form>\r\n </div>\r\n <!--end::Modal body-->\r\n</div>", styles: [".close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.submit{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.headerclass{font-family:Inter;font-size:20px;font-weight:600;line-height:24.2px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
965
978
|
}
|
|
966
979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpdateComponent, decorators: [{
|
|
967
980
|
type: Component,
|
|
968
|
-
args: [{ selector: 'lib-update', template: "<div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <
|
|
981
|
+
args: [{ selector: 'lib-update', template: "<div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <div class=\"headerclass\">Add Address</div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary\" data-bs-dismiss=\"modal\">\r\n <span (click)=\"activeModal.dismiss()\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <!-- <i class=\"ki-duotone ki-cross fs-1\"><span class=\"path1\"></span><span\r\n class=\"path2\"></span></i> -->\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"updateForm\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column mb-7 fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">Brand Name</label>\r\n <input formControlName=\"brandName\" id=\"brandName\" readonly type=\"text\" class=\" ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">GST No / Tax ID</label>\r\n <input formControlName=\"gstNumber\" id=\"gstNumber\" type=\"text\" class=\"ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n <!-- <div *ngIf=\"gstnumber?.errors?.required\" class=\"text-danger\"> \r\n GST Number is required.\r\n </div> -->\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"required headingtext mb-2\">Billing Address</label>\r\n <input formControlName=\"billingAddress\" id=\"billingAddress\" type=\"text\" class=\"ng-pristine ng-invalid ng-touched\"\r\n style=\"text-transform: capitalize;\">\r\n <!-- <div *ngIf=\"billingaddress?.errors?.required\" class=\"text-danger\">\r\n Billing Address is required.\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button type=\"submit\" (click)=\"closeModal()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" [disabled]=\"updateForm.invalid\" (click)=\"onSubmit()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Submit </span></button>\r\n </div>\r\n \r\n </form>\r\n </div>\r\n <!--end::Modal body-->\r\n</div>", styles: [".close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.submit{color:var(--White, #FFF);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize}.headerclass{font-family:Inter;font-size:20px;font-weight:600;line-height:24.2px;text-align:left}\n"] }]
|
|
969
982
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$2.NgbModal }, { type: PaymentSubscriptionService }, { type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i4$2.ToastService }], propDecorators: { modalData: [{
|
|
970
983
|
type: Input
|
|
971
984
|
}], passEntry: [{
|
|
@@ -1068,11 +1081,11 @@ class NeedHelpComponent {
|
|
|
1068
1081
|
});
|
|
1069
1082
|
}
|
|
1070
1083
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NeedHelpComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: i4$2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NeedHelpComponent, selector: "lib-need-help", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"modal-content\" *ngIf=\"status === 'help'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/needhelp-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Need Help !</div>\r\n </div>\r\n <div class=\"modal-body mb-4 \">\r\n <a class=\"bgcontent\" (click)=\"status = 'extend'\">\r\n Need to raise a ticket for extending trail request <span class=\"ms-
|
|
1084
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NeedHelpComponent, selector: "lib-need-help", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"modal-content\" *ngIf=\"status === 'help'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/needhelp-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Need Help !</div>\r\n </div>\r\n <div class=\"modal-body mb-4 \">\r\n <a class=\"bgcontent\" (click)=\"status = 'extend'\">\r\n Need to raise a ticket for extending trail request <span class=\"ms-10\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </a>\r\n <a class=\"bgcontent mt-4\" (click)=\"status = 'subscription'\">\r\n Need to raise a ticket for subscription cancellation <span class=\"ms-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </a>\r\n </div>\r\n</div>\r\n\r\n<div [formGroup]=\"extendtrailform\" class=\"modal-content\" *ngIf=\"status === 'extend'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Extend Trial</div>\r\n </div>\r\n<div class=\"modal-body\">\r\n\r\n <div class=\"\">\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"contenttext mb-4\">The 14 days trial has got expired. You can request for <span class=\"contenttextbold\">trial extension</span></label>\r\n <label for=\"producttype\" class=\"headingtext mb-2\">Pick a Product</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"producttype\" (click)=\"trailextendDropdown($event)\"\r\n aria-label=\"Default select example\">{{trailextendIssue}}</div>\r\n <div *ngIf=\"trailextenddropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of trailextenditem\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.trailextendIssue.name === item.name ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"trailextendItem(item.name)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status = 'help'\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"extendtrail()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Extend</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"status === 'subscription'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Are you sure you want to raise ticket for subscription cancellation?</div>\r\n </div>\r\n<div class=\"modal-body\">\r\n\r\n <div class=\"\">\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"headingtext mb-4\">Reason for cancelling</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"cancellingDropdown($event)\"\r\n aria-label=\"Default select example\">{{cancellingIssue}}</div>\r\n <div *ngIf=\"cancellingdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let cancellingitem of cancellingtype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.cancellingIssue === cancellingitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"cancellingItem(cancellingitem)\">{{cancellingitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <textarea [(ngModel)]=\"this.cancellingDescription\" placeholder=\"Enter a description...\" class=\" mt-6 custom-textarea\"></textarea>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status = 'help';cancellingDescription=''\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"status ='unsubscribe'\"\r\n tabindex=\"0\" class=\"btn btn-danger px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Request Unsubscribing</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"status === 'unsubscribe'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Unsubscribed</div>\r\n <div class=\"text-sub mt-4 ms-1\">Are you sure you want the unsubscribe?</div>\r\n </div>\r\n<div class=\"modal-body\" >\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status ='subscription';cancellingDescription=''\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"unscubscribed()\"\r\n tabindex=\"0\" class=\"btn btn-danger px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Yes, Confirm</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.bgcontent{border-radius:8px;background:var(--Gray-50, #F9FAFB);display:flex;padding:11px;align-items:center;gap:16px;align-self:stretch;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px;cursor:pointer}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.custom-textarea{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:8px;width:100%;height:100px;resize:vertical}.custom-textarea:active,.custom-textarea:focus,.custom-textarea:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);outline:none!important;box-shadow:0 1px 2px #1018280d}.modal-body{padding:0% 4% 3%!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.contenttextbold{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1072
1085
|
}
|
|
1073
1086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NeedHelpComponent, decorators: [{
|
|
1074
1087
|
type: Component,
|
|
1075
|
-
args: [{ selector: 'lib-need-help', template: "<div class=\"modal-content\" *ngIf=\"status === 'help'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/needhelp-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Need Help !</div>\r\n </div>\r\n <div class=\"modal-body mb-4 \">\r\n <a class=\"bgcontent\" (click)=\"status = 'extend'\">\r\n Need to raise a ticket for extending trail request <span class=\"ms-
|
|
1088
|
+
args: [{ selector: 'lib-need-help', template: "<div class=\"modal-content\" *ngIf=\"status === 'help'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/needhelp-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Need Help !</div>\r\n </div>\r\n <div class=\"modal-body mb-4 \">\r\n <a class=\"bgcontent\" (click)=\"status = 'extend'\">\r\n Need to raise a ticket for extending trail request <span class=\"ms-10\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </a>\r\n <a class=\"bgcontent mt-4\" (click)=\"status = 'subscription'\">\r\n Need to raise a ticket for subscription cancellation <span class=\"ms-4\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </a>\r\n </div>\r\n</div>\r\n\r\n<div [formGroup]=\"extendtrailform\" class=\"modal-content\" *ngIf=\"status === 'extend'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Extend Trial</div>\r\n </div>\r\n<div class=\"modal-body\">\r\n\r\n <div class=\"\">\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"contenttext mb-4\">The 14 days trial has got expired. You can request for <span class=\"contenttextbold\">trial extension</span></label>\r\n <label for=\"producttype\" class=\"headingtext mb-2\">Pick a Product</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"producttype\" (click)=\"trailextendDropdown($event)\"\r\n aria-label=\"Default select example\">{{trailextendIssue}}</div>\r\n <div *ngIf=\"trailextenddropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of trailextenditem\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.trailextendIssue.name === item.name ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"trailextendItem(item.name)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status = 'help'\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"extendtrail()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Extend</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"status === 'subscription'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Are you sure you want to raise ticket for subscription cancellation?</div>\r\n </div>\r\n<div class=\"modal-body\">\r\n\r\n <div class=\"\">\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"headingtext mb-4\">Reason for cancelling</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"cancellingDropdown($event)\"\r\n aria-label=\"Default select example\">{{cancellingIssue}}</div>\r\n <div *ngIf=\"cancellingdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let cancellingitem of cancellingtype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.cancellingIssue === cancellingitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"cancellingItem(cancellingitem)\">{{cancellingitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <textarea [(ngModel)]=\"this.cancellingDescription\" placeholder=\"Enter a description...\" class=\" mt-6 custom-textarea\"></textarea>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status = 'help';cancellingDescription=''\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"status ='unsubscribe'\"\r\n tabindex=\"0\" class=\"btn btn-danger px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Request Unsubscribing</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"status === 'unsubscribe'\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Unsubscribed</div>\r\n <div class=\"text-sub mt-4 ms-1\">Are you sure you want the unsubscribe?</div>\r\n </div>\r\n<div class=\"modal-body\" >\r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"submit\" (click)=\"status ='subscription';cancellingDescription=''\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"unscubscribed()\"\r\n tabindex=\"0\" class=\"btn btn-danger px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Yes, Confirm</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.bgcontent{border-radius:8px;background:var(--Gray-50, #F9FAFB);display:flex;padding:11px;align-items:center;gap:16px;align-self:stretch;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px;cursor:pointer}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.custom-textarea{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:8px;width:100%;height:100px;resize:vertical}.custom-textarea:active,.custom-textarea:focus,.custom-textarea:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);outline:none!important;box-shadow:0 1px 2px #1018280d}.modal-body{padding:0% 4% 3%!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.contenttextbold{font-weight:600}\n"] }]
|
|
1076
1089
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: i4$2.ToastService }], propDecorators: { clientId: [{
|
|
1077
1090
|
type: Input
|
|
1078
1091
|
}] } });
|
|
@@ -1153,7 +1166,7 @@ class SubscriptionApprovalComponent {
|
|
|
1153
1166
|
this.destroy$.next(true);
|
|
1154
1167
|
this.destroy$.complete();
|
|
1155
1168
|
}
|
|
1156
|
-
|
|
1169
|
+
suscribed_old() {
|
|
1157
1170
|
let data = {
|
|
1158
1171
|
clientId: this.clientInfo.clientId,
|
|
1159
1172
|
price: this.clientInfo.currentPlanInfo.price,
|
|
@@ -1176,6 +1189,35 @@ class SubscriptionApprovalComponent {
|
|
|
1176
1189
|
});
|
|
1177
1190
|
this.gifVisible = true;
|
|
1178
1191
|
}
|
|
1192
|
+
suscribed() {
|
|
1193
|
+
let data = {
|
|
1194
|
+
clientId: this.clientInfo.clientId,
|
|
1195
|
+
price: this.clientInfo.currentPlanInfo.price,
|
|
1196
|
+
priceType: this.clientInfo.currentPlanInfo.priceType,
|
|
1197
|
+
subscriptionType: this.clientInfo.currentPlanInfo.subscriptionType,
|
|
1198
|
+
subscriptionPeriod: this.clientInfo.currentPlanInfo.subscriptionPeriod,
|
|
1199
|
+
totalCamera: this.clientInfo.currentPlanInfo.totalCamera,
|
|
1200
|
+
totalStores: this.clientInfo.currentPlanInfo.totalStores,
|
|
1201
|
+
storeSize: this.clientInfo.currentPlanInfo.storeSize,
|
|
1202
|
+
products: this.productList
|
|
1203
|
+
};
|
|
1204
|
+
this.PaymentSubscriptionService.updateSubscription(data).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1205
|
+
if (res && res.code == 200) {
|
|
1206
|
+
this.activeModel.close();
|
|
1207
|
+
const modalRef = this.modalService.open(UpgradePlanComponent, {
|
|
1208
|
+
centered: true, size: 'md'
|
|
1209
|
+
});
|
|
1210
|
+
modalRef.componentInstance.clientId = this.clientInfo.clientId;
|
|
1211
|
+
modalRef.componentInstance.subscription = "confirmationmessage";
|
|
1212
|
+
modalRef.componentInstance.confirmedProducts = this.productList.filter((item) => item.type != 'cancel').map((item) => item.productName);
|
|
1213
|
+
modalRef.result.then((result) => {
|
|
1214
|
+
if (result) {
|
|
1215
|
+
}
|
|
1216
|
+
});
|
|
1217
|
+
}
|
|
1218
|
+
});
|
|
1219
|
+
this.gifVisible = true;
|
|
1220
|
+
}
|
|
1179
1221
|
updateProduct(index, type) {
|
|
1180
1222
|
this.productList[index].type = type;
|
|
1181
1223
|
}
|
|
@@ -1260,7 +1302,10 @@ class UpgradePlanComponent {
|
|
|
1260
1302
|
disableBtn = true;
|
|
1261
1303
|
trialproducts = [];
|
|
1262
1304
|
expiredProducts = [];
|
|
1305
|
+
subscription = 'pricingplan';
|
|
1306
|
+
confirmedProducts = [];
|
|
1263
1307
|
destroy$ = new Subject();
|
|
1308
|
+
clientinfo;
|
|
1264
1309
|
constructor(modalService, activeModel, toast, PaymentSubscriptionService, changeDetector) {
|
|
1265
1310
|
this.modalService = modalService;
|
|
1266
1311
|
this.activeModel = activeModel;
|
|
@@ -1413,12 +1458,25 @@ class UpgradePlanComponent {
|
|
|
1413
1458
|
});
|
|
1414
1459
|
modalRef.componentInstance.user = data;
|
|
1415
1460
|
}
|
|
1461
|
+
closePopupAndReloadData() {
|
|
1462
|
+
this.clientBillingInfo(this.clientId);
|
|
1463
|
+
this.PaymentSubscriptionService.triggerReload();
|
|
1464
|
+
this.activeModel.close();
|
|
1465
|
+
}
|
|
1466
|
+
clientBillingInfo(id) {
|
|
1467
|
+
this.PaymentSubscriptionService.clientBillingInfo(id).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1468
|
+
if (res && res.code == 200) {
|
|
1469
|
+
this.clientinfo = res.data;
|
|
1470
|
+
this.changeDetector.detectChanges();
|
|
1471
|
+
}
|
|
1472
|
+
});
|
|
1473
|
+
}
|
|
1416
1474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }, { token: i4$2.ToastService }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpgradePlanComponent, selector: "lib-upgrade-plan", inputs: { clientId: "clientId" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'monthly' ? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"month\" (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'annual'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"annual\" (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.totalStores ||\r\n noofstorestype[0]}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstores of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.totalStores === noofstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresdata(noofstores)\">\r\n {{ noofstores }}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.storeSize ||\r\n Avgstorestype[0].value}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstores of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.storeSize === Avgstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"Avgstoresdata(Avgstores.value)\">\r\n {{Avgstores.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum {{clientInfo?.currentPlanInfo?.totalCamera}} Cameras are permitted in stores with square feet between {{clientInfo?.currentPlanInfo?.storeSize}}.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div *ngFor=\"let productlist of clientInfo?.currentPlanInfo?.product\" class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"tangorevop\"\r\n [checked]=\"productlist.active === true\" (change)=\"updateProduct($event,productlist.productName)\" [disabled]=\"productlist.status === 'live'\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">{{productlist.aliseProductName}} \r\n <span [class]=\"getColorClass(productlist.toolTip)\">\r\n {{productlist.toolTip}} <span *ngIf=\"expiredProducts.length && productlist.productName.includes(expiredProducts)\"><img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\"> \r\n </span> <span *ngIf=\"trialproducts.length && productlist.productName.includes(trialproducts)\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\"> \r\n </span>\r\n </span>\r\n \r\n \r\n </label>\r\n </div>\r\n <span class=\"view\" (click)=\"showInfo(productlist.productName)\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!-- <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br>Zone & Tango RevOps >\r\n </div>\r\n </div> -->\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B9{{originalPrice}}</s></span><span\r\n class=\"billingtext ms-4\">\u20B9{{clientInfo?.currentPlanInfo?.price || 0}}</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: {{clientInfo?.clientName}}</div>\r\n <div>Billing Address: {{clientInfo?.billingDetails?.billingAddress || '--'}}</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\"> \r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\" *ngIf=\"!clientInfo?.billingDetails?.billingAddress\"><span class=\"submit\">Enter\r\n Billing Details </span></button>\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\" *ngIf=\"clientInfo?.billingDetails?.billingAddress\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\" [disabled]=\"disableBtn\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:50%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpgradePlanComponent, selector: "lib-upgrade-plan", inputs: { clientId: "clientId" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<section *ngIf=\"subscription == 'pricingplan'\">\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'monthly' ? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"month\" (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'annual'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"annual\" (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.totalStores ||\r\n noofstorestype[0]}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstores of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.totalStores === noofstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresdata(noofstores)\">\r\n {{ noofstores }}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.storeSize ||\r\n Avgstorestype[0].value}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstores of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.storeSize === Avgstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"Avgstoresdata(Avgstores.value)\">\r\n {{Avgstores.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum {{clientInfo?.currentPlanInfo?.totalCamera}} Cameras are permitted in stores with square feet between {{clientInfo?.currentPlanInfo?.storeSize}}.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div *ngFor=\"let productlist of clientInfo?.currentPlanInfo?.product\" class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div>\r\n <span><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"tangorevop\"\r\n [checked]=\"productlist.active === true\" (change)=\"updateProduct($event,productlist.productName)\" [disabled]=\"productlist.status === 'live' || productlist.status === 'trial' \"></span>\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">{{productlist.aliseProductName}} \r\n <span [class]=\"getColorClass(productlist.toolTip)\">\r\n {{productlist.toolTip}} <span *ngIf=\"expiredProducts.length && productlist.productName.includes(expiredProducts)\"><img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\"> \r\n </span> <span *ngIf=\"trialproducts.length && productlist.productName.includes(trialproducts)\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\"> \r\n </span>\r\n </span>\r\n </label>\r\n </div>\r\n <span class=\"view\" (click)=\"showInfo(productlist.productName)\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!-- <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br>Zone & Tango RevOps >\r\n </div>\r\n </div> -->\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B9{{originalPrice}}</s></span><span\r\n class=\"billingtext ms-4\">\u20B9{{clientInfo?.currentPlanInfo?.price || 0}}</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: {{clientInfo?.clientName}}</div>\r\n <div>Billing Address: {{clientInfo?.billingDetails?.billingAddress || '--'}}</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\"> \r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\" *ngIf=\"!clientInfo?.billingDetails?.billingAddress\"><span class=\"submit\">Enter\r\n Billing Details </span></button>\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\" *ngIf=\"clientInfo?.billingDetails?.billingAddress\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\" [disabled]=\"disableBtn\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n</section>\r\n\r\n<div *ngIf=\"subscription == 'confirmationmessage'\" class=\"modal-content gifimage\" >\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/check-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Thanks for the subscription!</div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n \r\n <div class=\"contenttext mt-4 mx-2\">You have successfully subscribed to our products \r\n <ul class=\"mt-4\">\r\n <li *ngFor=\"let product of confirmedProducts\">{{product}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"button\" tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-100\" (click)=\"closePopupAndReloadData()\" style=\"white-space: nowrap;\">\r\n <span class=\"submit\">Okay</span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:50%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.gifimage{background-size:cover;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1418
1476
|
}
|
|
1419
1477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, decorators: [{
|
|
1420
1478
|
type: Component,
|
|
1421
|
-
args: [{ selector: 'lib-upgrade-plan', template: "<div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'monthly' ? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"month\" (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'annual'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"annual\" (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.totalStores ||\r\n noofstorestype[0]}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstores of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.totalStores === noofstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresdata(noofstores)\">\r\n {{ noofstores }}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.storeSize ||\r\n Avgstorestype[0].value}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstores of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.storeSize === Avgstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"Avgstoresdata(Avgstores.value)\">\r\n {{Avgstores.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum {{clientInfo?.currentPlanInfo?.totalCamera}} Cameras are permitted in stores with square feet between {{clientInfo?.currentPlanInfo?.storeSize}}.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div *ngFor=\"let productlist of clientInfo?.currentPlanInfo?.product\" class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"tangorevop\"\r\n [checked]=\"productlist.active === true\" (change)=\"updateProduct($event,productlist.productName)\" [disabled]=\"productlist.status === 'live'\">\r\n <label _ngcontent-wkh-c249=\"\" for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">{{productlist.aliseProductName}} \r\n <span [class]=\"getColorClass(productlist.toolTip)\">\r\n {{productlist.toolTip}} <span *ngIf=\"expiredProducts.length && productlist.productName.includes(expiredProducts)\"><img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\"> \r\n </span> <span *ngIf=\"trialproducts.length && productlist.productName.includes(trialproducts)\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\"> \r\n </span>\r\n </span>\r\n \r\n \r\n </label>\r\n </div>\r\n <span class=\"view\" (click)=\"showInfo(productlist.productName)\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!-- <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br>Zone & Tango RevOps >\r\n </div>\r\n </div> -->\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B9{{originalPrice}}</s></span><span\r\n class=\"billingtext ms-4\">\u20B9{{clientInfo?.currentPlanInfo?.price || 0}}</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: {{clientInfo?.clientName}}</div>\r\n <div>Billing Address: {{clientInfo?.billingDetails?.billingAddress || '--'}}</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\"> \r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\" *ngIf=\"!clientInfo?.billingDetails?.billingAddress\"><span class=\"submit\">Enter\r\n Billing Details </span></button>\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\" *ngIf=\"clientInfo?.billingDetails?.billingAddress\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\" [disabled]=\"disableBtn\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:50%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"] }]
|
|
1479
|
+
args: [{ selector: 'lib-upgrade-plan', template: "<section *ngIf=\"subscription == 'pricingplan'\">\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mx-auto mt-8 d-flex justify-content-center\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'monthly' ? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"month\" (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"clientInfo?.currentPlanInfo?.subscriptionPeriod === 'annual'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"annual\" (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n\r\n</div>\r\n\r\n<div class=\"modal-body row \">\r\n <div class=\"col-lg-6 pe-8 vertical\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">No of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"noofstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.totalStores ||\r\n noofstorestype[0]}}</div>\r\n <div *ngIf=\"noofstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let noofstores of noofstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.totalStores === noofstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"noofstoresdata(noofstores)\">\r\n {{ noofstores }}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"py-2\">\r\n <label class=\"headingtext mb-3\">Average Size of Stores </label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"AvgstoresDropdown($event)\"\r\n aria-label=\"Default select example\">{{clientInfo?.currentPlanInfo?.storeSize ||\r\n Avgstorestype[0].value}}</div>\r\n <div *ngIf=\"AvgstoresdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let Avgstores of Avgstorestype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"clientInfo?.currentPlanInfo?.storeSize === Avgstores ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"Avgstoresdata(Avgstores.value)\">\r\n {{Avgstores.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maxcam mt-2\">\r\n Maximum {{clientInfo?.currentPlanInfo?.totalCamera}} Cameras are permitted in stores with square feet between {{clientInfo?.currentPlanInfo?.storeSize}}.\r\n </div>\r\n </div>\r\n\r\n <div class=\"selecttext my-5 mt-12\">Select Products</div>\r\n\r\n <div *ngFor=\"let productlist of clientInfo?.currentPlanInfo?.product\" class=\"form-check form-switch d-flex justify-content-between mt-6\">\r\n <div>\r\n <span><input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"tangorevop\"\r\n [checked]=\"productlist.active === true\" (change)=\"updateProduct($event,productlist.productName)\" [disabled]=\"productlist.status === 'live' || productlist.status === 'trial' \"></span>\r\n <label for=\"flexSwitchCheckDefault\"\r\n class=\"form-check-label headingtext d-flex\">{{productlist.aliseProductName}} \r\n <span [class]=\"getColorClass(productlist.toolTip)\">\r\n {{productlist.toolTip}} <span *ngIf=\"expiredProducts.length && productlist.productName.includes(expiredProducts)\"><img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\" alt=\"\"> \r\n </span> <span *ngIf=\"trialproducts.length && productlist.productName.includes(trialproducts)\">\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\"> \r\n </span>\r\n </span>\r\n </label>\r\n </div>\r\n <span class=\"view\" (click)=\"showInfo(productlist.productName)\">View Info <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7\"\r\n stroke=\"#009BF3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-lg-6 px-8\">\r\n <div class=\"pb-6\">\r\n\r\n <div class=\"pricingtext\">Free</div>\r\n\r\n <div class=\"semi mt-2\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!-- <div class=\"d-flex\"><span class=\"me-3 mt-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2231_42342)\">\r\n <path\r\n d=\"M7.99967 10.6673V8.00065M7.99967 5.33398H8.00634M14.6663 8.00065C14.6663 11.6826 11.6816 14.6673 7.99967 14.6673C4.31778 14.6673 1.33301 11.6826 1.33301 8.00065C1.33301 4.31875 4.31778 1.33398 7.99967 1.33398C11.6816 1.33398 14.6663 4.31875 14.6663 8.00065Z\"\r\n stroke=\"#B54708\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2231_42342\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <div class=\"subtext mt-6\">You will only be charged for < Tango Traffic,Tango <br>Zone & Tango RevOps >\r\n </div>\r\n </div> -->\r\n <div class=\"sub1text mt-5\">Starts from <span class=\"billedtext ms-2\"><s>\u20B9{{originalPrice}}</s></span><span\r\n class=\"billingtext ms-4\">\u20B9{{clientInfo?.currentPlanInfo?.price || 0}}</span></div>\r\n <div class=\"sub1text mt-2\">Per store Per month</div>\r\n\r\n </div>\r\n <div class=\"detailstext\">Billing Details</div>\r\n\r\n <div class=\"sub1text py-4\">\r\n <div class=\"mb-4\">Brand Name: {{clientInfo?.clientName}}</div>\r\n <div>Billing Address: {{clientInfo?.billingDetails?.billingAddress || '--'}}</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end subscribe\"> \r\n <button (click)=\"update()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block text-nowrap\" *ngIf=\"!clientInfo?.billingDetails?.billingAddress\"><span class=\"submit\">Enter\r\n Billing Details </span></button>\r\n <button (click)=\"confirmation()\" type=\"button\" tabindex=\"0\" *ngIf=\"clientInfo?.billingDetails?.billingAddress\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted w-100 btn-block\" style=\"white-space: nowrap;\" [disabled]=\"disableBtn\"><span\r\n class=\"submit\">Subscribe Now </span></button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n</section>\r\n\r\n<div *ngIf=\"subscription == 'confirmationmessage'\" class=\"modal-content gifimage\" >\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/check-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Thanks for the subscription!</div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n \r\n <div class=\"contenttext mt-4 mx-2\">You have successfully subscribed to our products \r\n <ul class=\"mt-4\">\r\n <li *ngFor=\"let product of confirmedProducts\">{{product}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex mt-2 py-2\">\r\n <button type=\"button\" tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-100\" (click)=\"closePopupAndReloadData()\" style=\"white-space: nowrap;\">\r\n <span class=\"submit\">Okay</span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".tabchange{align-items:center;gap:8px;padding:1% 25%}.pricingtext{color:var(--Gray-900, #101828);font-family:Inter;font-size:20px;font-weight:600;line-height:30px}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.subtext{color:var(--Error-700, #B42318);font-family:Inter;font-size:12px;font-weight:400;line-height:18px}.billingtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.billedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:18px;font-weight:600;line-height:32px;text-decoration-line:\"strikethrough\"}.sub1text{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.detailstext{color:var(--Gray-500, #667085);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.maxcam{color:var(--Primary-800, #008EDF);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.selecttext{color:#000;font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:12px;font-weight:500;line-height:18px;cursor:pointer}.modal-body{padding:4%!important}.vertical{border-right:1px solid var(--Gray-200, #EAECF0)}.subscribe{margin-top:50%}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.gifimage{background-size:cover;height:100%}\n"] }]
|
|
1422
1480
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: i4$2.ToastService }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }], propDecorators: { clientId: [{
|
|
1423
1481
|
type: Input
|
|
1424
1482
|
}], onDocumentClick: [{
|
|
@@ -1519,7 +1577,7 @@ class CreditNoteComponent {
|
|
|
1519
1577
|
if (res && res.code == 200) {
|
|
1520
1578
|
this.invoiceitem = res?.data;
|
|
1521
1579
|
this.invoiceIssue = this.invoiceitem[0]?.invoice;
|
|
1522
|
-
const totalAmount = this.invoiceitem[0]?.
|
|
1580
|
+
const totalAmount = this.invoiceitem[0]?.totalAmount || "";
|
|
1523
1581
|
this.creditnoteform.patchValue({
|
|
1524
1582
|
totalAmount: totalAmount,
|
|
1525
1583
|
discount: this.invoiceitem[0]?.discount
|
|
@@ -1530,7 +1588,7 @@ class CreditNoteComponent {
|
|
|
1530
1588
|
}
|
|
1531
1589
|
invoiceItem(invoicevalue) {
|
|
1532
1590
|
this.creditnoteform.patchValue({
|
|
1533
|
-
totalAmount: invoicevalue.
|
|
1591
|
+
totalAmount: invoicevalue.totalAmount,
|
|
1534
1592
|
...(invoicevalue?.discount ? { discount: invoicevalue?.discount } : { discount: '' }),
|
|
1535
1593
|
...(invoicevalue?.revisedAmount ? { revisedAmount: invoicevalue?.revisedAmount } : { revisedAmount: '' })
|
|
1536
1594
|
});
|
|
@@ -2305,6 +2363,9 @@ class PaymentsSubscriptionComponent {
|
|
|
2305
2363
|
this.invoiceTableData();
|
|
2306
2364
|
}
|
|
2307
2365
|
});
|
|
2366
|
+
this.PaymentSubscriptionService.reloadData$.subscribe(() => {
|
|
2367
|
+
this.clientBillingInfo(this.clientId);
|
|
2368
|
+
});
|
|
2308
2369
|
}
|
|
2309
2370
|
ngAfterViewInit() {
|
|
2310
2371
|
this.paymentinvoiceform.get('invoiceTo')?.valueChanges.pipe(switchMap((val) => {
|
|
@@ -2657,6 +2718,11 @@ class PaymentsSubscriptionComponent {
|
|
|
2657
2718
|
newItem.showImg = true;
|
|
2658
2719
|
newItem.showEditDelete = true;
|
|
2659
2720
|
newItem.lastIndex = true;
|
|
2721
|
+
if (newItem.discountPercentage) {
|
|
2722
|
+
newItem.negotiatePrice = newItem.basePrice;
|
|
2723
|
+
newItem.discountPercentage = 0;
|
|
2724
|
+
newItem.discountPrice = 0;
|
|
2725
|
+
}
|
|
2660
2726
|
newItem.storeCount = this.priceValueDetails.product[index].storeCount - differ;
|
|
2661
2727
|
if (newItem.storeCount < 0) {
|
|
2662
2728
|
continue;
|
|
@@ -3220,11 +3286,11 @@ class PaymentsSubscriptionComponent {
|
|
|
3220
3286
|
return data.slice(2 - data.length);
|
|
3221
3287
|
}
|
|
3222
3288
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$1.FormBuilder }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i4$2.ToastService }, { token: i3.GlobalStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaymentsSubscriptionComponent, selector: "lib-payments-subscription", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"clientBillingInfo(clientId)\">Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===false\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===true\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: We haven't received your\r\n payment yet. To continue enjoying our services, please renew your\r\n subscription by making the payment. Thank you for your\r\n cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">\r\n {{clientinfo?.currentPlanInfo?.priceType\r\n || '--'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n \u20B9 {{clientinfo?.currentPlanInfo?.price\r\n || '--'}}<span class=\"pricingspan ms-2\">Store/Month</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n\r\n <div class=\"d-flex justify-content-start flex-column plancard\">\r\n <div class=\" heading mb-3\">\r\n <span *ngIf=\"clientinfo?.currentPlanInfo?.subscriptionType\">{{clientinfo?.currentPlanInfo?.subscriptionType | titlecase}}</span> <span *ngIf=\"!clientinfo?.currentPlanInfo?.subscriptionType\">--</span>\r\n plan - {{clientinfo?.currentPlanInfo?.storeCount\r\n || '--'}}\r\n <span class=\"subheading ms-2\">store\r\n onboarded</span>\r\n <span ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"\r\n class=\"badge badge-light-warning ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.trialProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n <span tooltipClass=\"custom-tooltip\"\r\n ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n class=\"badge badge-light-primary ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.expiredProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras :\r\n {{clientinfo?.currentPlanInfo?.totalCamera\r\n || '--'}} | Avg sq.ft : {{clientinfo?.currentPlanInfo?.storeSize\r\n || '--'}} sq.ft | Products : <span\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.liveProducts\">\r\n {{ product.aliseProductName }} </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\" d-flex align-items-end\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\">\r\n <span\r\n [disableTooltip]=\"!clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n ngbTooltip=\"Request is Already initiated waiting for admin approval\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <button type=\"submit\"\r\n [disabled]=\"clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2\"> Need Help</span>\r\n </button>\r\n\r\n </span>\r\n <button (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">Virtual Acc\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accountNo ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.ifscCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-8\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n\r\n <!-- Add Billing start -->\r\n <div class=\"billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"!clientinfo?.billingDetails?.billingAddress\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"submit\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Add Billing end -->\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"clientinfo?.billingDetails?.billingAddress && clientinfo?.billingDetails?.billingAddress!==''\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.nextBillingDate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-8\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"notificationList()\">Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan === 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'Trial'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan}}</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\"\r\n type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\"\r\n *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span\r\n class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'trial product'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free <span class=\"subtextbold\">trial</span>.To keep your projects running after the trial end, upgrade to a paid option.</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\"\r\n cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\"\r\n stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text-{{i}}\" x=\"50\"\r\n y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span\r\n class=\"justify-content-end cursor-pointer ms-20\"><svg\r\n width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g\r\n filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\"\r\n height=\"56\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g\r\n clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_5221_60143\"\r\n x=\"0\" y=\"0\" width=\"60\"\r\n height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6 cursor-pointer\">\r\n <div class=\"position-relative ms-2\">\r\n <div class=\"form-select levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue === viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan === 'subscription' && viewplanIssue === 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\" [product]=\"productList\"\r\n [productList]=\"dataObject[0].Issues\" type=\"products\"\r\n [clientId]=\"clientId\" (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue === 'Store Level View' && plan === 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchRecords($event)\" *ngIf=\"storeList.length\"/>\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\" *ngIf=\"storeList.length\"\r\n (appliedFilters)=receiveData($event)></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"\r\n [productList]=\"dataObject[0].Issues\" type=\"stores\"\r\n [stores]=\"getStores()\" [product]=\"getProduct()\"\r\n [clientId]=\"clientId\" [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\" [selectAll]=\"selectAll\"\r\n *ngIf=\"storeList.length && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"loading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Product Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>\r\n <div (click)=\"sortStoreSize()\">\r\n No of Stores\r\n <span *ngIf=\"sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Cost Per Store</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let product of productList;let i=index;\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{convertUpper(product?.product) || '--'}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product?.storeCount\r\n || 0}}</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product?.basePrice || 0}}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Store Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n [(ngModel)]=\"selectAll\" type=\"checkbox\"\r\n (click)=\"selectAllStore($event)\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList;let i=index;\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateCheck($event,store?.storeId)\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>{{store?.storeName ||\r\n '--'}}</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n {{store?.storeId || '--'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{store?.storeProfile?.city || '--'}}</div>\r\n </td>\r\n\r\n <td *ngIf=\"store?.product && store?.product.length\">\r\n <span\r\n *ngFor=\"let product of store?.product;let i=index;\"><span\r\n *ngIf=\"i<2\"\r\n class=\"badge badge-light-primary me-1\">{{product}}</span></span><span\r\n *ngIf=\"store.product.length > 2\" [ngbTooltip]=\"showProduct(store.product)\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product || !store?.product.length\"> -- </td>\r\n <td>\r\n <lib-multidropdown\r\n [product]=\"store?.product || []\"\r\n [productList]=\"dataObject[0].Issues\"\r\n type=\"stores\" [stores]=\"[store?.storeId]\"\r\n [clientId]=\"clientId\"\r\n [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"disabledAddIcon\" [index]=\"i\"></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination [itemsPerPage]=\"dynamicData.limit\"\r\n [currentPage]=\"dynamicData.offset\"\r\n [totalItems]=\"totalCount\" [paginationSizes]=\"[10,20,30]\"\r\n [pageSize]=\"dynamicData.limit\"\r\n (pageChange)=\"onStorePageChange($event)\"\r\n (pageSizeChange)=\"onStorePageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan === 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standard'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standard')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'step'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('step')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\"\r\n class=\"btn-outline btn needhelp text-nowrap\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"priceNoData\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"priceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"priceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan === 'standard' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails.product;let i=index;\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\" \r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product.price}}</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n \r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails?.product;let i=index\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}\r\n <span class=\"ms-4\" *ngIf=\"product.showImg\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control w-150px\"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.storeRange\" readonly>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.price}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"\r\n *ngIf=\"!product.showEditDelete\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"cursor-pointer table-title d-flex\"\r\n *ngIf=\"product.showEditDelete\">\r\n <span\r\n (click)=\"addstepprice('delete',product,i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit',product,i)\"\r\n class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n\r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"card-body pt-14\" *ngIf=\"!priceLoading && !priceNoData\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalActualPrice}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">{{priceValueDetails.discountPercentage}}% (- \u20B9 {{priceValueDetails.discountPrice}})</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.finalValue}}</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\"\r\n (click)=\"revertOriginalPrice()\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan === 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\"\r\n >\r\n <form [formGroup]=\"paymentinvoiceform\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\" *ngIf=\"paymentinvoiceshow\">\r\n <button (click)=\"onpaymentedit()\" type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container py-4 px-4\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'before15')\">\r\n <input formControlName=\"radiooptions\"\r\n class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" id=\"inlineRadio1\" value=\"before15\"\r\n name=\"radiooptions\">\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'after15')\">\r\n <input class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" formControlName=\"radiooptions\"\r\n id=\"inlineRadio2\" value=\"after15\" name=\"radiooptions\"\r\n readonly>\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue !== '' ? selectedIssue === 'monthly'\r\n ? 'Monthly' : selectedIssue === 'quaterly' ?\r\n 'Quaterly' : 'Annual' : ''}}</div>\r\n <div *ngIf=\"dropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue === item.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item.value)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"invoiceTo\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let invoiceTo of generateinvoiceList; let i = index\">\r\n\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{invoiceTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"invoiceTo\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue !== '' ? invoiceonIssue ===\r\n 'lastday' ? 'Last Day of the Month' :'25th of the Month':''}}\r\n </div>\r\n <div *ngIf=\"invoicedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue === invoiceitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem.value)\">\r\n {{invoiceitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue !== '' \r\n ? paymentIssue === 'online' ? 'Online Payment' : 'Bank Transfer' :''}}</div>\r\n <div *ngIf=\"paymenttypedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue === paymentitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem.value)\">\r\n {{paymentitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-7\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue !== ''\r\n ? currencyIssue === 'inr' ? 'INR' :'Dollar' : ''}}</div>\r\n <div *ngIf=\"currencydropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue === currencyitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem.value)\">\r\n {{currencyitem.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let paymentAgreementTo of paymentallowedList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{paymentAgreementTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"paymentAgreementTo\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendPaymentPeriodDays\"\r\n class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value - 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n id=\"extendPaymentPeriodDays\" readonly\r\n formControlName=\"extendPaymentPeriodDays\" [(ngModel)]=\"extendPaymentPeriodDays\"\r\n style=\"text-align: center;\"\r\n autocomplete=\"off\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value + 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end mt-6\" *ngIf=\"!paymentinvoiceshow\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\"\r\n (click)=\"onpaymentCancel()\">Cancel</a><button type=\"button\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n (click)=\"onpaymentSubmit()\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></button></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- payment invoice form end -->\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"card-header paymenthistory\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" \r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\" [disabled]=\"searchDisabled\"/>\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown invheader\">\r\n <select class=\"form-select invheader\" aria-label=\"Default select example\" [(ngModel)]=\"isFilter\" (change)=\"invoiceFilter()\">\r\n <option value=\"current\">Current Month</option>\r\n <option value=\"prev\">Previous Month</option>\r\n <option value=\"last\">Last 3 Months</option>\r\n </select>\r\n </div>\r\n </div>\r\n \r\n <button (click)=\"creditnote()\" type=\"button\" class=\"btn-outline btn align-items-end invheader text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"!invoiceList.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\" [disabled]=\"!invoiceList.length\"\r\n ><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"invoiceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"invoiceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!invoiceLoading && !invoiceNoData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div (click)=\"sortData()\">\r\n Invoice #\r\n <span *ngIf=\"sortColumName === 'invoice' && sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'invoice' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">Products</th>\r\n <th>Amount</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">Payment Method</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let invoice of invoiceList\">\r\n <td>\r\n <div class=\"table-title-primary invoice mb-2\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\" *ngIf=\"['free','Payment Received'].includes(invoice?.status)\">{{invoice?.status | titlecase}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"invoice?.status === 'trial'\">{{invoice?.status | titlecase}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.billingDate}} </div>\r\n \r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.stores}}</div>\r\n \r\n </td>\r\n \r\n <td *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\"><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span></span><span class=\"productextend\" *ngIf=\"invoice?.products.length>2\" [ngbTooltip]=\"showProduct(invoice.products)\">+{{invoice?.products.length - 2 }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice.amount ? invoice?.amount : invoice.status | titlecase }}</div>\r\n </td>\r\n <td *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">\r\n <div class=\"table-title\">{{invoice?.paymentMethod || '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\" (click)=\"downloadInvoice(invoice)\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.paymenthistory{padding:0px .25rem!important}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#fff!important}input[type=text]{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:70%}.discountprice{width:15%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.Historyheader{padding:0 .25rem}.product-traffic{color:var(--Blue-700, #175CD3);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Blue-50, #EFF8FF)}.productextend{border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:500;padding:2px 8px}.product-zone{border-radius:16px;background:var(--Indigo-50, #EEF4FF);padding:2px 8px;color:var(--Indigo-700, #3538CD);text-align:center;font-family:Inter;font-size:12px;font-weight:500}.product-sop{color:var(--Purple-700, #5925DC);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Purple-50, #F4F3FF)}.prioritysupport{color:var(--Pink-700, #C11574);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Pink-50, #FDF2FA)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.plancard{width:65%!important}.invheader{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.error{border:1px solid red!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}tr{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i1$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: ["text", "product", "productList", "type", "stores", "clientId", "selectAll", "clientProduct", "disabled", "index"], outputs: ["data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
|
|
3289
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaymentsSubscriptionComponent, selector: "lib-payments-subscription", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"clientBillingInfo(clientId)\">Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===false\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===true\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: We haven't received your\r\n payment yet. To continue enjoying our services, please renew your\r\n subscription by making the payment. Thank you for your\r\n cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">\r\n {{clientinfo?.currentPlanInfo?.priceType\r\n || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n <span>\r\n {{ clientinfo?.currentPlanInfo?.currencyType === 'dollar' ? ('$' + (clientinfo?.currentPlanInfo?.dollarPrice || '--')?.toLocaleString('en-IN')) : ('\u20B9' + (clientinfo?.currentPlanInfo?.price || '--')?.toLocaleString('en-IN'))}}</span>\r\n <span class=\"pricingspan ms-2\">Store/Month</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex justify-content-start flex-column plancard\">\r\n <div class=\" heading mb-3\">\r\n <span *ngIf=\"clientinfo?.currentPlanInfo?.subscriptionType\">{{clientinfo?.currentPlanInfo?.subscriptionType | titlecase}}</span> <span *ngIf=\"!clientinfo?.currentPlanInfo?.subscriptionType\">--</span>\r\n plan - {{(clientinfo?.currentPlanInfo?.storeCount\r\n || '--')?.toLocaleString('en-IN')}}\r\n <span class=\"subheading ms-2\">store\r\n onboarded</span>\r\n <span ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"\r\n class=\"badge badge-light-primary ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.trialProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\"\r\n \r\n alt=\"\"> </span>\r\n <span tooltipClass=\"custom-tooltip\"\r\n ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n class=\"badge badge-light-warning ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.expiredProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras :\r\n {{clientinfo?.currentPlanInfo?.totalCamera\r\n || '--'}} | Avg sq.ft : {{clientinfo?.currentPlanInfo?.storeSize\r\n || '--'}} sq.ft | Products : <span\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.liveProducts\">\r\n {{ product.aliseProductName }} </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\" d-flex align-items-end\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\">\r\n <span\r\n [disableTooltip]=\"!clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n ngbTooltip=\"Request is Already initiated waiting for admin approval\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <button type=\"submit\"\r\n [disabled]=\"clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2\"> Need Help</span>\r\n </button>\r\n\r\n </span>\r\n <button (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">Virtual Acc\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accountNo ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.ifscCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-8\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n\r\n <!-- Add Billing start -->\r\n <div class=\"billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"!clientinfo?.billingDetails?.billingAddress\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"submit\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Add Billing end -->\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"clientinfo?.billingDetails?.billingAddress && clientinfo?.billingDetails?.billingAddress!==''\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.nextBillingDate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-8\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"notificationList()\">Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan === 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'Trial'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\"\r\n type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\"\r\n *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span\r\n class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'trial product'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free <span class=\"subtextbold\">trial</span>.To keep your projects running after the trial end, upgrade to a paid option.</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\"\r\n cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\"\r\n stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text-{{i}}\" x=\"50\"\r\n y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span\r\n class=\"justify-content-end cursor-pointer ms-20\"><svg\r\n width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g\r\n filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\"\r\n height=\"56\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g\r\n clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_5221_60143\"\r\n x=\"0\" y=\"0\" width=\"60\"\r\n height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6 cursor-pointer\">\r\n <div class=\"position-relative ms-2\">\r\n <div class=\"form-select levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue === viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan === 'subscription' && viewplanIssue === 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\" [product]=\"productList\"\r\n [productList]=\"dataObject[0].Issues\" type=\"products\"\r\n [clientId]=\"clientId\" (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue === 'Store Level View' && plan === 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchRecords($event)\" *ngIf=\"storeList.length\"/>\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\" *ngIf=\"storeList.length\"\r\n (appliedFilters)=receiveData($event)></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"\r\n [productList]=\"dataObject[0].Issues\" type=\"stores\"\r\n [stores]=\"getStores()\" [product]=\"getProduct()\"\r\n [clientId]=\"clientId\" [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\" [selectAll]=\"selectAll\"\r\n *ngIf=\"storeList.length && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"loading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Product Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>\r\n <div (click)=\"sortStoreSize()\">\r\n No of Stores\r\n <span class=\"cursor-pointer\" *ngIf=\"sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Cost Per Store</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let product of productList;let i=index;\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{convertUpper(product?.product) || '--'}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product?.storeCount\r\n || 0}}</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{(product?.basePrice || 0) ?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Store Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n [(ngModel)]=\"selectAll\" type=\"checkbox\"\r\n (click)=\"selectAllStore($event)\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList;let i=index;\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateCheck($event,store?.storeId)\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>{{store?.storeName ||\r\n '--'}}</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n {{store?.storeId || '--'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{store?.storeProfile?.city || '--'}}</div>\r\n </td>\r\n\r\n <td *ngIf=\"store?.product && store?.product.length\">\r\n <span\r\n *ngFor=\"let product of store?.product;let i=index;\"><span\r\n *ngIf=\"i<2\"\r\n class=\"badge badge-light-primary me-1\">{{product}}</span></span><span\r\n *ngIf=\"store.product.length > 2\" [ngbTooltip]=\"showProduct(store.product)\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product || !store?.product.length\"> -- </td>\r\n <td>\r\n <lib-multidropdown\r\n [product]=\"store?.product || []\"\r\n [productList]=\"dataObject[0].Issues\"\r\n type=\"stores\" [stores]=\"[store?.storeId]\"\r\n [clientId]=\"clientId\"\r\n [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"disabledAddIcon\" [index]=\"i\"></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination [itemsPerPage]=\"dynamicData.limit\"\r\n [currentPage]=\"dynamicData.offset\"\r\n [totalItems]=\"totalCount\" [paginationSizes]=\"[10,20,30]\"\r\n [pageSize]=\"dynamicData.limit\"\r\n (pageChange)=\"onStorePageChange($event)\"\r\n (pageSizeChange)=\"onStorePageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan === 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standard'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standard')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'step'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('step')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\"\r\n class=\"btn-outline btn needhelp text-nowrap\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"priceNoData\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"priceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"priceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan === 'standard' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails.product;let i=index;\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\" \r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product.price?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice?.toLocaleString('en-IN')}}</div>\r\n \r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice?.toLocaleString('en-IN')}}</div></th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9{{priceValueDetails.totalNegotiatePrice?.toLocaleString('en-IN')}}</div>\r\n </th>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails?.product;let i=index\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}\r\n <span class=\"ms-4\" *ngIf=\"product.showImg\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control w-150px\"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.storeRange\" readonly>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.price}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"\r\n *ngIf=\"!product.showEditDelete\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"cursor-pointer table-title d-flex\"\r\n *ngIf=\"product.showEditDelete\">\r\n <span\r\n (click)=\"addstepprice('delete',product,i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit',product,i)\"\r\n class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n\r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"card-body pt-14\" *ngIf=\"!priceLoading && !priceNoData\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalActualPrice?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">{{priceValueDetails.discountPercentage}}% (- \u20B9 {{priceValueDetails.discountPrice}})</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalNegotiatePrice?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.finalValue?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\"\r\n (click)=\"revertOriginalPrice()\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan === 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\"\r\n >\r\n <form [formGroup]=\"paymentinvoiceform\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\" *ngIf=\"paymentinvoiceshow\">\r\n <button (click)=\"onpaymentedit()\" type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container py-4 px-4\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'before15')\">\r\n <input formControlName=\"radiooptions\"\r\n class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" id=\"inlineRadio1\" value=\"before15\"\r\n name=\"radiooptions\">\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'after15')\">\r\n <input class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" formControlName=\"radiooptions\"\r\n id=\"inlineRadio2\" value=\"after15\" name=\"radiooptions\"\r\n readonly>\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue !== '' ? selectedIssue === 'monthly'\r\n ? 'Monthly' : selectedIssue === 'quaterly' ?\r\n 'Quaterly' : 'Annual' : ''}}</div>\r\n <div *ngIf=\"dropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue === item.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item.value)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"invoiceTo\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let invoiceTo of generateinvoiceList; let i = index\">\r\n\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{invoiceTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"invoiceTo\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue !== '' ? invoiceonIssue ===\r\n 'lastday' ? 'Last Day of the Month' :'25th of the Month':''}}\r\n </div>\r\n <div *ngIf=\"invoicedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue === invoiceitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem.value)\">\r\n {{invoiceitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue !== '' \r\n ? paymentIssue === 'online' ? 'Online Payment' : 'Bank Transfer' :''}}</div>\r\n <div *ngIf=\"paymenttypedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue === paymentitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem.value)\">\r\n {{paymentitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-7\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue !== ''\r\n ? currencyIssue === 'inr' ? 'INR' :'Dollar' : ''}}</div>\r\n <div *ngIf=\"currencydropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue === currencyitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem.value)\">\r\n {{currencyitem.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let paymentAgreementTo of paymentallowedList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{paymentAgreementTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"paymentAgreementTo\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendPaymentPeriodDays\"\r\n class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value - 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n id=\"extendPaymentPeriodDays\" readonly\r\n formControlName=\"extendPaymentPeriodDays\" [(ngModel)]=\"extendPaymentPeriodDays\"\r\n style=\"text-align: center;\"\r\n autocomplete=\"off\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value + 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end mt-6\" *ngIf=\"!paymentinvoiceshow\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\"\r\n (click)=\"onpaymentCancel()\">Cancel</a><button type=\"button\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n (click)=\"onpaymentSubmit()\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></button></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- payment invoice form end -->\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"card-header paymenthistory\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" \r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\" [disabled]=\"searchDisabled\"/>\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown invheader\">\r\n <select class=\"form-select invheader\" aria-label=\"Default select example\" [(ngModel)]=\"isFilter\" (change)=\"invoiceFilter()\">\r\n <option value=\"current\">Current Month</option>\r\n <option value=\"prev\">Previous Month</option>\r\n <option value=\"last\">Last 3 Months</option>\r\n </select>\r\n </div>\r\n </div>\r\n \r\n <button (click)=\"creditnote()\" type=\"button\" class=\"btn-outline btn align-items-end invheader text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"!invoiceList.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\" [disabled]=\"!invoiceList.length\"\r\n ><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"invoiceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"invoiceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!invoiceLoading && !invoiceNoData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div (click)=\"sortData()\">\r\n Invoice #\r\n <span class=\"cursor-pointer\" *ngIf=\"sortColumName === 'invoice' && sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"sortColumName === 'invoice' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">Products</th>\r\n <th>Amount</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">Payment Method</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let invoice of invoiceList\">\r\n <td>\r\n <div class=\"table-title-primary invoice mb-2\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\" *ngIf=\"['free','Payment Received'].includes(invoice?.status)\">{{invoice?.status | titlecase}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"invoice?.status === 'trial'\">{{invoice?.status | titlecase}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.billingDate}} </div>\r\n \r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.stores}}</div>\r\n \r\n </td>\r\n \r\n <td *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\"><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span></span><span class=\"productextend\" *ngIf=\"invoice?.products.length>2\" [ngbTooltip]=\"showProduct(invoice.products)\">+{{invoice?.products.length - 2 }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{invoice.amount ? invoice?.amount?.toLocaleString('en-IN') : invoice.status | titlecase }}</div>\r\n </td>\r\n <td *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">\r\n <div class=\"table-title\">{{invoice?.paymentMethod || '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\" (click)=\"downloadInvoice(invoice)\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.paymenthistory{padding:0px .25rem!important}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#fff!important}input[type=text]{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:70%}.discountprice{width:15%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.Historyheader{padding:0 .25rem}.product-traffic{color:var(--Blue-700, #175CD3);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Blue-50, #EFF8FF)}.productextend{border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:500;padding:2px 8px}.product-zone{border-radius:16px;background:var(--Indigo-50, #EEF4FF);padding:2px 8px;color:var(--Indigo-700, #3538CD);text-align:center;font-family:Inter;font-size:12px;font-weight:500}.product-sop{color:var(--Purple-700, #5925DC);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Purple-50, #F4F3FF)}.prioritysupport{color:var(--Pink-700, #C11574);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Pink-50, #FDF2FA)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.plancard{width:65%!important}.invheader{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.error{border:1px solid red!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}tr{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i1$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4$2.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "component", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: ["text", "product", "productList", "type", "stores", "clientId", "selectAll", "clientProduct", "disabled", "index"], outputs: ["data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
|
|
3224
3290
|
}
|
|
3225
3291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, decorators: [{
|
|
3226
3292
|
type: Component,
|
|
3227
|
-
args: [{ selector: 'lib-payments-subscription', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"clientBillingInfo(clientId)\">Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===false\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===true\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: We haven't received your\r\n payment yet. To continue enjoying our services, please renew your\r\n subscription by making the payment. Thank you for your\r\n cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">\r\n {{clientinfo?.currentPlanInfo?.priceType\r\n || '--'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n \u20B9 {{clientinfo?.currentPlanInfo?.price\r\n || '--'}}<span class=\"pricingspan ms-2\">Store/Month</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n\r\n <div class=\"d-flex justify-content-start flex-column plancard\">\r\n <div class=\" heading mb-3\">\r\n <span *ngIf=\"clientinfo?.currentPlanInfo?.subscriptionType\">{{clientinfo?.currentPlanInfo?.subscriptionType | titlecase}}</span> <span *ngIf=\"!clientinfo?.currentPlanInfo?.subscriptionType\">--</span>\r\n plan - {{clientinfo?.currentPlanInfo?.storeCount\r\n || '--'}}\r\n <span class=\"subheading ms-2\">store\r\n onboarded</span>\r\n <span ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"\r\n class=\"badge badge-light-warning ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.trialProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n <span tooltipClass=\"custom-tooltip\"\r\n ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n class=\"badge badge-light-primary ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.expiredProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras :\r\n {{clientinfo?.currentPlanInfo?.totalCamera\r\n || '--'}} | Avg sq.ft : {{clientinfo?.currentPlanInfo?.storeSize\r\n || '--'}} sq.ft | Products : <span\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.liveProducts\">\r\n {{ product.aliseProductName }} </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\" d-flex align-items-end\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\">\r\n <span\r\n [disableTooltip]=\"!clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n ngbTooltip=\"Request is Already initiated waiting for admin approval\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <button type=\"submit\"\r\n [disabled]=\"clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2\"> Need Help</span>\r\n </button>\r\n\r\n </span>\r\n <button (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">Virtual Acc\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accountNo ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.ifscCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-8\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n\r\n <!-- Add Billing start -->\r\n <div class=\"billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"!clientinfo?.billingDetails?.billingAddress\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"submit\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Add Billing end -->\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"clientinfo?.billingDetails?.billingAddress && clientinfo?.billingDetails?.billingAddress!==''\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.nextBillingDate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-8\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"notificationList()\">Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan === 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'Trial'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan}}</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\"\r\n type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\"\r\n *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span\r\n class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'trial product'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free <span class=\"subtextbold\">trial</span>.To keep your projects running after the trial end, upgrade to a paid option.</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\"\r\n cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\"\r\n stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text-{{i}}\" x=\"50\"\r\n y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span\r\n class=\"justify-content-end cursor-pointer ms-20\"><svg\r\n width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g\r\n filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\"\r\n height=\"56\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g\r\n clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_5221_60143\"\r\n x=\"0\" y=\"0\" width=\"60\"\r\n height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6 cursor-pointer\">\r\n <div class=\"position-relative ms-2\">\r\n <div class=\"form-select levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue === viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan === 'subscription' && viewplanIssue === 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\" [product]=\"productList\"\r\n [productList]=\"dataObject[0].Issues\" type=\"products\"\r\n [clientId]=\"clientId\" (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue === 'Store Level View' && plan === 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchRecords($event)\" *ngIf=\"storeList.length\"/>\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\" *ngIf=\"storeList.length\"\r\n (appliedFilters)=receiveData($event)></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"\r\n [productList]=\"dataObject[0].Issues\" type=\"stores\"\r\n [stores]=\"getStores()\" [product]=\"getProduct()\"\r\n [clientId]=\"clientId\" [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\" [selectAll]=\"selectAll\"\r\n *ngIf=\"storeList.length && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"loading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Product Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>\r\n <div (click)=\"sortStoreSize()\">\r\n No of Stores\r\n <span *ngIf=\"sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Cost Per Store</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let product of productList;let i=index;\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{convertUpper(product?.product) || '--'}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product?.storeCount\r\n || 0}}</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product?.basePrice || 0}}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Store Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n [(ngModel)]=\"selectAll\" type=\"checkbox\"\r\n (click)=\"selectAllStore($event)\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList;let i=index;\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateCheck($event,store?.storeId)\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>{{store?.storeName ||\r\n '--'}}</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n {{store?.storeId || '--'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{store?.storeProfile?.city || '--'}}</div>\r\n </td>\r\n\r\n <td *ngIf=\"store?.product && store?.product.length\">\r\n <span\r\n *ngFor=\"let product of store?.product;let i=index;\"><span\r\n *ngIf=\"i<2\"\r\n class=\"badge badge-light-primary me-1\">{{product}}</span></span><span\r\n *ngIf=\"store.product.length > 2\" [ngbTooltip]=\"showProduct(store.product)\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product || !store?.product.length\"> -- </td>\r\n <td>\r\n <lib-multidropdown\r\n [product]=\"store?.product || []\"\r\n [productList]=\"dataObject[0].Issues\"\r\n type=\"stores\" [stores]=\"[store?.storeId]\"\r\n [clientId]=\"clientId\"\r\n [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"disabledAddIcon\" [index]=\"i\"></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination [itemsPerPage]=\"dynamicData.limit\"\r\n [currentPage]=\"dynamicData.offset\"\r\n [totalItems]=\"totalCount\" [paginationSizes]=\"[10,20,30]\"\r\n [pageSize]=\"dynamicData.limit\"\r\n (pageChange)=\"onStorePageChange($event)\"\r\n (pageSizeChange)=\"onStorePageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan === 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standard'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standard')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'step'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('step')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\"\r\n class=\"btn-outline btn needhelp text-nowrap\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"priceNoData\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"priceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"priceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan === 'standard' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails.product;let i=index;\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\" \r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product.price}}</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n \r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails?.product;let i=index\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}\r\n <span class=\"ms-4\" *ngIf=\"product.showImg\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control w-150px\"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.storeRange\" readonly>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.price}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"\r\n *ngIf=\"!product.showEditDelete\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"cursor-pointer table-title d-flex\"\r\n *ngIf=\"product.showEditDelete\">\r\n <span\r\n (click)=\"addstepprice('delete',product,i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit',product,i)\"\r\n class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n\r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"card-body pt-14\" *ngIf=\"!priceLoading && !priceNoData\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalActualPrice}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">{{priceValueDetails.discountPercentage}}% (- \u20B9 {{priceValueDetails.discountPrice}})</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.finalValue}}</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\"\r\n (click)=\"revertOriginalPrice()\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan === 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\"\r\n >\r\n <form [formGroup]=\"paymentinvoiceform\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\" *ngIf=\"paymentinvoiceshow\">\r\n <button (click)=\"onpaymentedit()\" type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container py-4 px-4\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'before15')\">\r\n <input formControlName=\"radiooptions\"\r\n class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" id=\"inlineRadio1\" value=\"before15\"\r\n name=\"radiooptions\">\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'after15')\">\r\n <input class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" formControlName=\"radiooptions\"\r\n id=\"inlineRadio2\" value=\"after15\" name=\"radiooptions\"\r\n readonly>\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue !== '' ? selectedIssue === 'monthly'\r\n ? 'Monthly' : selectedIssue === 'quaterly' ?\r\n 'Quaterly' : 'Annual' : ''}}</div>\r\n <div *ngIf=\"dropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue === item.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item.value)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"invoiceTo\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let invoiceTo of generateinvoiceList; let i = index\">\r\n\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{invoiceTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"invoiceTo\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue !== '' ? invoiceonIssue ===\r\n 'lastday' ? 'Last Day of the Month' :'25th of the Month':''}}\r\n </div>\r\n <div *ngIf=\"invoicedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue === invoiceitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem.value)\">\r\n {{invoiceitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue !== '' \r\n ? paymentIssue === 'online' ? 'Online Payment' : 'Bank Transfer' :''}}</div>\r\n <div *ngIf=\"paymenttypedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue === paymentitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem.value)\">\r\n {{paymentitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-7\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue !== ''\r\n ? currencyIssue === 'inr' ? 'INR' :'Dollar' : ''}}</div>\r\n <div *ngIf=\"currencydropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue === currencyitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem.value)\">\r\n {{currencyitem.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let paymentAgreementTo of paymentallowedList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{paymentAgreementTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"paymentAgreementTo\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendPaymentPeriodDays\"\r\n class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value - 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n id=\"extendPaymentPeriodDays\" readonly\r\n formControlName=\"extendPaymentPeriodDays\" [(ngModel)]=\"extendPaymentPeriodDays\"\r\n style=\"text-align: center;\"\r\n autocomplete=\"off\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value + 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end mt-6\" *ngIf=\"!paymentinvoiceshow\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\"\r\n (click)=\"onpaymentCancel()\">Cancel</a><button type=\"button\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n (click)=\"onpaymentSubmit()\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></button></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- payment invoice form end -->\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"card-header paymenthistory\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" \r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\" [disabled]=\"searchDisabled\"/>\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown invheader\">\r\n <select class=\"form-select invheader\" aria-label=\"Default select example\" [(ngModel)]=\"isFilter\" (change)=\"invoiceFilter()\">\r\n <option value=\"current\">Current Month</option>\r\n <option value=\"prev\">Previous Month</option>\r\n <option value=\"last\">Last 3 Months</option>\r\n </select>\r\n </div>\r\n </div>\r\n \r\n <button (click)=\"creditnote()\" type=\"button\" class=\"btn-outline btn align-items-end invheader text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"!invoiceList.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\" [disabled]=\"!invoiceList.length\"\r\n ><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"invoiceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"invoiceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!invoiceLoading && !invoiceNoData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div (click)=\"sortData()\">\r\n Invoice #\r\n <span *ngIf=\"sortColumName === 'invoice' && sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'invoice' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">Products</th>\r\n <th>Amount</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">Payment Method</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let invoice of invoiceList\">\r\n <td>\r\n <div class=\"table-title-primary invoice mb-2\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\" *ngIf=\"['free','Payment Received'].includes(invoice?.status)\">{{invoice?.status | titlecase}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"invoice?.status === 'trial'\">{{invoice?.status | titlecase}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.billingDate}} </div>\r\n \r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.stores}}</div>\r\n \r\n </td>\r\n \r\n <td *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\"><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span></span><span class=\"productextend\" *ngIf=\"invoice?.products.length>2\" [ngbTooltip]=\"showProduct(invoice.products)\">+{{invoice?.products.length - 2 }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice.amount ? invoice?.amount : invoice.status | titlecase }}</div>\r\n </td>\r\n <td *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">\r\n <div class=\"table-title\">{{invoice?.paymentMethod || '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\" (click)=\"downloadInvoice(invoice)\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.paymenthistory{padding:0px .25rem!important}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#fff!important}input[type=text]{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:70%}.discountprice{width:15%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.Historyheader{padding:0 .25rem}.product-traffic{color:var(--Blue-700, #175CD3);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Blue-50, #EFF8FF)}.productextend{border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:500;padding:2px 8px}.product-zone{border-radius:16px;background:var(--Indigo-50, #EEF4FF);padding:2px 8px;color:var(--Indigo-700, #3538CD);text-align:center;font-family:Inter;font-size:12px;font-weight:500}.product-sop{color:var(--Purple-700, #5925DC);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Purple-50, #F4F3FF)}.prioritysupport{color:var(--Pink-700, #C11574);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Pink-50, #FDF2FA)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.plancard{width:65%!important}.invheader{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.error{border:1px solid red!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}tr{vertical-align:middle}\n"] }]
|
|
3293
|
+
args: [{ selector: 'lib-payments-subscription', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion [closeOthers]=\"true\">\r\n <!-- Billing & subscription start -->\r\n <div class=\"card\" ngbAccordionItem [collapsed]=\"openaccordian\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"clientBillingInfo(clientId)\">Billing & Subscription<div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <!--begin::plan details Card-->\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===false\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: You have a reached your due\r\n limit ,To continue enjoying our services, please renew your subscription\r\n by making the payment. Thank you for your cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"toastcard col-md-12 mb-4\"\r\n *ngIf=\"clientinfo?.currentPlanInfo?.paymentStatus==='due' && clientinfo?.currentPlanInfo?.dueLimitReached===true\">\r\n <div class=\"d-flex align-items-center justify-content-end\">\r\n <div class=\"symbol symbol-30px me-5\"><span>\r\n <img src=\"./assets/tango/custompopup-Icons/danger-alert-primary.svg\"\r\n alt=\"\">\r\n </span>\r\n </div>\r\n <span class=\"toasttext d-block\">Kind Reminder: We haven't received your\r\n payment yet. To continue enjoying our services, please renew your\r\n subscription by making the payment. Thank you for your\r\n cooperation</span>\r\n <span><a type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Pay Now\r\n </span></a></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"d-flex flex-column\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex align-items-center justify-content-between border-val mb-2\">\r\n Current Plan Info<span class=\"badge-light-grey ms-2\">\r\n {{clientinfo?.currentPlanInfo?.priceType\r\n || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center pricingtext my-2\">\r\n <span>\r\n {{ clientinfo?.currentPlanInfo?.currencyType === 'dollar' ? ('$' + (clientinfo?.currentPlanInfo?.dollarPrice || '--')?.toLocaleString('en-IN')) : ('\u20B9' + (clientinfo?.currentPlanInfo?.price || '--')?.toLocaleString('en-IN'))}}</span>\r\n <span class=\"pricingspan ms-2\">Store/Month</span>\r\n </div>\r\n <hr>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex justify-content-start flex-column plancard\">\r\n <div class=\" heading mb-3\">\r\n <span *ngIf=\"clientinfo?.currentPlanInfo?.subscriptionType\">{{clientinfo?.currentPlanInfo?.subscriptionType | titlecase}}</span> <span *ngIf=\"!clientinfo?.currentPlanInfo?.subscriptionType\">--</span>\r\n plan - {{(clientinfo?.currentPlanInfo?.storeCount\r\n || '--')?.toLocaleString('en-IN')}}\r\n <span class=\"subheading ms-2\">store\r\n onboarded</span>\r\n <span ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"\r\n class=\"badge badge-light-primary ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.trialProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\"\r\n \r\n alt=\"\"> </span>\r\n <span tooltipClass=\"custom-tooltip\"\r\n ngbTooltip=\"{{ product.toolTip }}\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n class=\"badge badge-light-warning ms-2\"\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.expiredProducts\">\r\n {{ product.aliseProductName }}\r\n <img class=\"ms-2\"\r\n src=\"./assets/tango/custompopup-Icons/clockexpiry-icon.svg\"\r\n alt=\"\"> </span>\r\n </div>\r\n <span class=\"sub d-block\">Cameras :\r\n {{clientinfo?.currentPlanInfo?.totalCamera\r\n || '--'}} | Avg sq.ft : {{clientinfo?.currentPlanInfo?.storeSize\r\n || '--'}} sq.ft | Products : <span\r\n *ngFor=\"let product of clientinfo?.currentPlanInfo?.liveProducts\">\r\n {{ product.aliseProductName }} </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\" d-flex align-items-end\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\">\r\n <span\r\n [disableTooltip]=\"!clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n ngbTooltip=\"Request is Already initiated waiting for admin approval\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <button type=\"submit\"\r\n [disabled]=\"clientinfo?.currentPlanInfo?.pendingClientRequest\"\r\n (click)=\"needhelp()\" class=\"btn-outline btn needhelp me-4\"><span\r\n class=\"me-2\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1965_2301)\">\r\n <path\r\n d=\"M7.57533 7.50033C7.77125 6.94338 8.15795 6.47375 8.66695 6.1746C9.17596 5.87546 9.77441 5.76611 10.3563 5.86592C10.9382 5.96573 11.466 6.26826 11.8462 6.71993C12.2264 7.1716 12.4345 7.74326 12.4337 8.33366C12.4337 10.0003 9.93366 10.8337 9.93366 10.8337M10.0003 14.167H10.0087M18.3337 10.0003C18.3337 14.6027 14.6027 18.3337 10.0003 18.3337C5.39795 18.3337 1.66699 14.6027 1.66699 10.0003C1.66699 5.39795 5.39795 1.66699 10.0003 1.66699C14.6027 1.66699 18.3337 5.39795 18.3337 10.0003Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1965_2301\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2\"> Need Help</span>\r\n </button>\r\n\r\n </span>\r\n <button (click)=\"upgradeplan()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"create\">Upgrade Plan\r\n </span></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!--end::plan details Card-->\r\n\r\n\r\n <div class=\"row gx-4 mt-4\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-7 \">\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div class=\"d-flex align-items-center billingtext mb-8\">\r\n Bank Details\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Payment Type</div>\r\n <div class=\"billingmain\">Virtual Acc\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Account No </div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.accountNo ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">IFSC Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.ifscCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-8\">\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">SWIFT Code</div>\r\n <div class=\"billingmain\"> {{clientinfo?.bankDetails?.swiftCode ||\r\n '--'}}\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"billingdetails\">Branch </div>\r\n <div class=\"billingmain\">{{clientinfo?.bankDetails?.branch || '--'}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Bank details Card-->\r\n\r\n\r\n <div class=\"col-xl-5 \"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n\r\n <!-- Add Billing start -->\r\n <div class=\"billing h-xl-100 w-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"!clientinfo?.billingDetails?.billingAddress\">\r\n <div class=\"modal-content align-items-center mt-2\">\r\n <div class=\"d-flex\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/addbilling_icon.svg\"\r\n alt=\"\"></div>\r\n\r\n </div>\r\n <div class=\"heading mt-4 ms-1\">Add billing address</div>\r\n <div class=\"d-flex justify-content-center mt-8 w-100\">\r\n <button type=\"button\" tabindex=\"0\" (click)=\"update()\"\r\n class=\"btn btn-primary ms-2 ng-star-inserted address w-100\"\r\n style=\"white-space: nowrap;\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"submit\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0003 4.16675V15.8334M4.16699 10.0001H15.8337\"\r\n stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> New Address </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Add Billing end -->\r\n <!-- Billing Information start -->\r\n <div class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap p-6\"\r\n *ngIf=\"clientinfo?.billingDetails?.billingAddress && clientinfo?.billingDetails?.billingAddress!==''\">\r\n <div class=\"d-flex flex-column py-2\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between billingtext mb-5\">\r\n Billing\r\n <a type=\"submit\" (click)=\"update()\"\r\n class=\"btn update btn-lg btn-light btn-active-light-primary px-4 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span\r\n class=\"mt-2\">\r\n Update</span></a>\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center\">\r\n\r\n <div class=\"billingdetails\">Next Billing Date</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.nextBillingDate || '--'}}\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"align-items-center mt-8\">\r\n <div class=\"billingdetails\">Billing Address</div>\r\n <div class=\"billingmain\">\r\n {{clientinfo?.billingDetails?.billingAddress ||\r\n '--'}}\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Billing Information End -->\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Billing & subscription End -->\r\n\r\n <!--subscription Config start -->\r\n <div class=\"card mt-6\" ngbAccordionItem *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton (click)=\"notificationList()\">Subscription Config <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n\r\n <ng-template>\r\n <div class=\"col-xl-12 billingcard\">\r\n <div class=\" h-xl-100 flex-row flex-stack flex-wrap mx-5 pt-4\">\r\n <div class=\"d-flex flex-column\">\r\n <!-- subscription info header start -->\r\n <div class=\"d-flex justify-content-between\">\r\n\r\n <div *ngIf=\"showNavGroup\" class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'subscription'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"subscription\" (click)=\"selectPlan('subscription')\">\r\n Subscription\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'pricing'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"pricing\" (click)=\"selectPlan('pricing')\">\r\n Pricing\r\n </button>\r\n </div>\r\n </div>\r\n <!-- subscription info header end -->\r\n\r\n <!-- subscription tab starts -->\r\n <div *ngIf=\"plan === 'subscription'\">\r\n <!-- client request card start -->\r\n <div class=\"row gx-4 mt-4\">\r\n <!--begin::Bank details Card-->\r\n <div class=\"col-xl-6\" [ngClass]=\"i > 1? 'mt-5' : ''\"\r\n *ngFor=\"let notification of notificationDetails.notificationList;let i= index;\">\r\n <!-- Billing Information start -->\r\n <div\r\n class=\"billingcard h-xl-100 flex-row flex-stack flex-wrap mb-6 px-6\">\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'Trial'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">Kindly make necessary action for trial\r\n request or skip product to subscription list</div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-15\"><a\r\n (click)=\"approvetrial(notification,'cancel')\"\r\n type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"><span\r\n class=\"mt-6\">Skip Trail</span></a><a\r\n (click)=\"approvetrial(notification,'approve')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n Trail\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-11\"\r\n *ngIf=\"notification.category === 'unsubscribe'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n Unsubscribe Request\r\n </div>\r\n <div class=\"subtext\">Client has requested to unsubscribe\r\n <span class=\"subtextbold\">Tango Suite</span>\r\n </div>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex mt-20\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-6 mt-3\"\r\n (click)=\"cancelUnsubscribe(notification,'cancel')\"><span\r\n class=\"mt-6\">Cancel</span></a><a\r\n (click)=\"approveUnsubscribe(notification,'unsubscribe')\"\r\n type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-danger px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Approve\r\n </span></a></div>\r\n </div>\r\n <div class=\"d-flex flex-column mt-10\"\r\n *ngIf=\"notification.category === 'trial product'\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between levelviewtext mb-2\">\r\n {{notification.name}} <span\r\n class=\"badge-light-grey ms-2\">{{currentPlan | titlecase}}</span>\r\n </div>\r\n <div class=\"subtext\">You will not be billed during your free <span class=\"subtextbold\">trial</span>.To keep your projects running after the trial end, upgrade to a paid option.</div>\r\n <div class=\"row mt-7\">\r\n <div class=\"col-lg-8 d-flex\">\r\n <div><svg id=\"circle-chart\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <!-- Background circle -->\r\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#f0f0f0\" stroke-width=\"8\">\r\n </circle>\r\n <!-- Foreground circle -->\r\n <circle id=\"progress-circle-{{i}}\" cx=\"50\"\r\n cy=\"50\" r=\"40\" fill=\"none\"\r\n stroke=\"#007bff\" stroke-width=\"8\"\r\n stroke-dasharray=\"251.2\"\r\n [attr.stroke-dashoffset]=\"updateCircleChart(notification.percentage,i)\">\r\n </circle>\r\n <!-- Text displaying percentage -->\r\n <text id=\"percentage-text-{{i}}\" x=\"50\"\r\n y=\"54\" class=\"producttext\"\r\n text-anchor=\"middle\"\r\n fill=\"#333333\">{{notification.percentage}}%</text>\r\n </svg></div>\r\n <div\r\n class=\"align-items-start justify-content-between daysleft ms-6 mt-3\">\r\n {{notification.day}} Days Left\r\n <div class=\"align-items-start trail mt-4 me-16\">\r\n Free trial</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-lg-4 mt-6\">\r\n <div class=\"position-relative\">\r\n <div (click)=\"producttrailDropdown($event,i)\">\r\n <span\r\n class=\"justify-content-end cursor-pointer ms-20\"><svg\r\n width=\"60\" height=\"60\"\r\n viewBox=\"0 0 60 60\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g\r\n filter=\"url(#filter0_d_5221_60143)\">\r\n <rect x=\"2\" y=\"1\" width=\"56\"\r\n height=\"56\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"55\"\r\n height=\"55\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <g\r\n clip-path=\"url(#clip0_5221_60143)\">\r\n <path\r\n d=\"M30 32C31.6569 32 33 30.6569 33 29C33 27.3431 31.6569 26 30 26C28.3431 26 27 27.3431 27 29C27 30.6569 28.3431 32 30 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M37.4 32C37.2669 32.3016 37.2272 32.6362 37.286 32.9606C37.3448 33.285 37.4995 33.5843 37.73 33.82L37.79 33.88C37.976 34.0657 38.1235 34.2863 38.2241 34.5291C38.3248 34.7719 38.3766 35.0322 38.3766 35.295C38.3766 35.5578 38.3248 35.8181 38.2241 36.0609C38.1235 36.3037 37.976 36.5243 37.79 36.71C37.6043 36.896 37.3837 37.0435 37.1409 37.1441C36.8981 37.2448 36.6378 37.2966 36.375 37.2966C36.1122 37.2966 35.8519 37.2448 35.6091 37.1441C35.3663 37.0435 35.1457 36.896 34.96 36.71L34.9 36.65C34.6643 36.4195 34.365 36.2648 34.0406 36.206C33.7162 36.1472 33.3816 36.1869 33.08 36.32C32.7842 36.4468 32.532 36.6572 32.3543 36.9255C32.1766 37.1938 32.0813 37.5082 32.08 37.83V38C32.08 38.5304 31.8693 39.0391 31.4942 39.4142C31.1191 39.7893 30.6104 40 30.08 40C29.5496 40 29.0409 39.7893 28.6658 39.4142C28.2907 39.0391 28.08 38.5304 28.08 38V37.91C28.0723 37.579 27.9651 37.258 27.7725 36.9887C27.5799 36.7194 27.3107 36.5143 27 36.4C26.6984 36.2669 26.3638 36.2272 26.0394 36.286C25.715 36.3448 25.4157 36.4995 25.18 36.73L25.12 36.79C24.9343 36.976 24.7137 37.1235 24.4709 37.2241C24.2281 37.3248 23.9678 37.3766 23.705 37.3766C23.4422 37.3766 23.1819 37.3248 22.9391 37.2241C22.6963 37.1235 22.4757 36.976 22.29 36.79C22.104 36.6043 21.9565 36.3837 21.8559 36.1409C21.7552 35.8981 21.7034 35.6378 21.7034 35.375C21.7034 35.1122 21.7552 34.8519 21.8559 34.6091C21.9565 34.3663 22.104 34.1457 22.29 33.96L22.35 33.9C22.5805 33.6643 22.7352 33.365 22.794 33.0406C22.8528 32.7162 22.8131 32.3816 22.68 32.08C22.5532 31.7842 22.3428 31.532 22.0745 31.3543C21.8062 31.1766 21.4918 31.0813 21.17 31.08H21C20.4696 31.08 19.9609 30.8693 19.5858 30.4942C19.2107 30.1191 19 29.6104 19 29.08C19 28.5496 19.2107 28.0409 19.5858 27.6658C19.9609 27.2907 20.4696 27.08 21 27.08H21.09C21.421 27.0723 21.742 26.9651 22.0113 26.7725C22.2806 26.5799 22.4857 26.3107 22.6 26C22.7331 25.6984 22.7728 25.3638 22.714 25.0394C22.6552 24.715 22.5005 24.4157 22.27 24.18L22.21 24.12C22.024 23.9343 21.8765 23.7137 21.7759 23.4709C21.6752 23.2281 21.6234 22.9678 21.6234 22.705C21.6234 22.4422 21.6752 22.1819 21.7759 21.9391C21.8765 21.6963 22.024 21.4757 22.21 21.29C22.3957 21.104 22.6163 20.9565 22.8591 20.8559C23.1019 20.7552 23.3622 20.7034 23.625 20.7034C23.8878 20.7034 24.1481 20.7552 24.3909 20.8559C24.6337 20.9565 24.8543 21.104 25.04 21.29L25.1 21.35C25.3357 21.5805 25.635 21.7352 25.9594 21.794C26.2838 21.8528 26.6184 21.8131 26.92 21.68H27C27.2958 21.5532 27.548 21.3428 27.7257 21.0745C27.9034 20.8062 27.9987 20.4918 28 20.17V20C28 19.4696 28.2107 18.9609 28.5858 18.5858C28.9609 18.2107 29.4696 18 30 18C30.5304 18 31.0391 18.2107 31.4142 18.5858C31.7893 18.9609 32 19.4696 32 20V20.09C32.0013 20.4118 32.0966 20.7262 32.2743 20.9945C32.452 21.2628 32.7042 21.4732 33 21.6C33.3016 21.7331 33.6362 21.7728 33.9606 21.714C34.285 21.6552 34.5843 21.5005 34.82 21.27L34.88 21.21C35.0657 21.024 35.2863 20.8765 35.5291 20.7759C35.7719 20.6752 36.0322 20.6234 36.295 20.6234C36.5578 20.6234 36.8181 20.6752 37.0609 20.7759C37.3037 20.8765 37.5243 21.024 37.71 21.21C37.896 21.3957 38.0435 21.6163 38.1441 21.8591C38.2448 22.1019 38.2966 22.3622 38.2966 22.625C38.2966 22.8878 38.2448 23.1481 38.1441 23.3909C38.0435 23.6337 37.896 23.8543 37.71 24.04L37.65 24.1C37.4195 24.3357 37.2648 24.635 37.206 24.9594C37.1472 25.2838 37.1869 25.6184 37.32 25.92V26C37.4468 26.2958 37.6572 26.548 37.9255 26.7257C38.1938 26.9034 38.5082 26.9987 38.83 27H39C39.5304 27 40.0391 27.2107 40.4142 27.5858C40.7893 27.9609 41 28.4696 41 29C41 29.5304 40.7893 30.0391 40.4142 30.4142C40.0391 30.7893 39.5304 31 39 31H38.91C38.5882 31.0013 38.2738 31.0966 38.0055 31.2743C37.7372 31.452 37.5268 31.7042 37.4 32Z\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_5221_60143\"\r\n x=\"0\" y=\"0\" width=\"60\"\r\n height=\"60\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur\r\n stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_5221_60143\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_5221_60143\"\r\n result=\"shape\" />\r\n </filter>\r\n <clipPath id=\"clip0_5221_60143\">\r\n <rect width=\"24\" height=\"24\"\r\n fill=\"white\"\r\n transform=\"translate(18 17)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div *ngIf=\"notification.producttraildropDown\"\r\n class=\"card py-2 w-200px position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let producttrailitem of producttrailtype\"\r\n class=\"list-unstyled mb-2\">\r\n <li class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"producttrailItem(producttrailitem,notification)\">\r\n {{producttrailitem}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <!--end::Bank details Card-->\r\n </div>\r\n <!-- client request card end -->\r\n\r\n <!-- level view dropdown start -->\r\n <div *ngIf=\"sublevelview\"\r\n class=\"d-flex justify-content-between heading mt-6 cursor-pointer\">\r\n <div class=\"position-relative ms-2\">\r\n <div class=\"form-select levelviewtext\" id=\"currency\"\r\n (click)=\"viewplanDropdown($event)\"\r\n aria-label=\"Default select example\">{{viewplanIssue}}</div>\r\n <div *ngIf=\"viewplandropDown\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let viewplanitem of viewplantype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.viewplanIssue === viewplanitem ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"viewplanItem(viewplanitem)\">{{viewplanitem}}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"text-sub\">Based on Current Subscribed Product</div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div *ngIf=\"plan === 'subscription' && viewplanIssue === 'Product Level View'\"\r\n class=\" d-flex justify-content-end mt-6\">\r\n <lib-multidropdown text=\"Add Products\" [product]=\"productList\"\r\n [productList]=\"dataObject[0].Issues\" type=\"products\"\r\n [clientId]=\"clientId\" (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar mt-3\"\r\n *ngIf=\"viewplanIssue === 'Store Level View' && plan === 'subscription'\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"d-flex align-items-end position-relative my-1\">\r\n <span\r\n class=\"svg-icon svg-icon-1 position-absolute mb-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\"\r\n width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchRecords($event)\" *ngIf=\"storeList.length\"/>\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\" *ngIf=\"storeList.length\"\r\n (appliedFilters)=receiveData($event)></lib-filters>\r\n <lib-multidropdown text=\"Add Products\"\r\n [productList]=\"dataObject[0].Issues\" type=\"stores\"\r\n [stores]=\"getStores()\" [product]=\"getProduct()\"\r\n [clientId]=\"clientId\" [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\" [selectAll]=\"selectAll\"\r\n *ngIf=\"storeList.length && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"></lib-multidropdown>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config toolbar end -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"loading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- product subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Product Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-4\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>\r\n <div (click)=\"sortStoreSize()\">\r\n No of Stores\r\n <span class=\"cursor-pointer\" *ngIf=\"sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Cost Per Store</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let product of productList;let i=index;\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{convertUpper(product?.product) || '--'}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product?.storeCount\r\n || 0}}</div>\r\n\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{(product?.basePrice || 0) ?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product subscription plan end -->\r\n\r\n <!-- store subscription plan start -->\r\n <div *ngIf=\"viewplanIssue === 'Store Level View' && !loading && !noData\">\r\n <div class=\"card-body p-0 mt-6\">\r\n <div class=\"\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n [(ngModel)]=\"selectAll\" type=\"checkbox\"\r\n (click)=\"selectAllStore($event)\">\r\n <label class=\"form-check-label\"\r\n for=\"flexCheckDefault\">\r\n <span>Store Info</span>\r\n </label>\r\n </div>\r\n </th>\r\n <th>Location</th>\r\n <th>Products</th>\r\n <th>Actions</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList;let i=index;\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateCheck($event,store?.storeId)\">\r\n <div\r\n class=\"d-flex justify-content-start flex-column\">\r\n <label\r\n class=\"form-check-label table-title-primary\"\r\n for=\"flexCheckDefault\">\r\n <span>{{store?.storeName ||\r\n '--'}}</span>\r\n </label>\r\n <span class=\"table-sub d-block7\">ID :\r\n {{store?.storeId || '--'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n\r\n\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{store?.storeProfile?.city || '--'}}</div>\r\n </td>\r\n\r\n <td *ngIf=\"store?.product && store?.product.length\">\r\n <span\r\n *ngFor=\"let product of store?.product;let i=index;\"><span\r\n *ngIf=\"i<2\"\r\n class=\"badge badge-light-primary me-1\">{{product}}</span></span><span\r\n *ngIf=\"store.product.length > 2\" [ngbTooltip]=\"showProduct(store.product)\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product || !store?.product.length\"> -- </td>\r\n <td>\r\n <lib-multidropdown\r\n [product]=\"store?.product || []\"\r\n [productList]=\"dataObject[0].Issues\"\r\n type=\"stores\" [stores]=\"[store?.storeId]\"\r\n [clientId]=\"clientId\"\r\n [clientProduct]=\"productList\"\r\n (data)=\"reload($event)\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"disabledAddIcon\" [index]=\"i\"></lib-multidropdown>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"mb-4\">\r\n <lib-pagination [itemsPerPage]=\"dynamicData.limit\"\r\n [currentPage]=\"dynamicData.offset\"\r\n [totalItems]=\"totalCount\" [paginationSizes]=\"[10,20,30]\"\r\n [pageSize]=\"dynamicData.limit\"\r\n (pageChange)=\"onStorePageChange($event)\"\r\n (pageSizeChange)=\"onStorePageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- store subscription plan end -->\r\n </div>\r\n <!-- subscription tab starts -->\r\n\r\n <!--pricing tab start -->\r\n <div *ngIf=\"plan === 'pricing'\">\r\n <div class=\"d-flex justify-content-between py-6\">\r\n <div class=\" levelviewtext mt-4\">\r\n Pricing Table<br><span class=\"text-sub\">Based on Product &\r\n stores</span> </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"justify-content-end\">\r\n <div class=\"producttext\">Switch to</div>\r\n <div *ngIf=\"PricingshowNav\"\r\n class=\"nav-group nav-group-outline mt-2\">\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"pricingplan === 'standard'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"standardprice\"\r\n (click)=\"selectPricePlan('standard')\">\r\n Standard Price\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"pricingplan === 'step'? 'activePlanBtnprimary':'inactivePlanBtn'\"\r\n data-kt-plan=\"stepprice\"\r\n (click)=\"selectPricePlan('step')\">\r\n Step Price\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step'\" class=\"d-flex justify-content-end mb-8\">\r\n <button (click)=\"addstepprice('add')\" type=\"button\"\r\n class=\"btn-outline btn needhelp text-nowrap\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"priceNoData\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Add Step</span> </button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"priceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"priceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0 mt-4\">\r\n <div *ngIf=\"pricingplan === 'standard' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th class=\"discountheader\">Discount %</th>\r\n <th class=\"negheader\">Negotiated Price</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails.product;let i=index;\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}</div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\" \r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{product.price?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice?.toLocaleString('en-IN')}}</div>\r\n \r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice?.toLocaleString('en-IN')}}</div></th>\r\n <th></th>\r\n\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9{{priceValueDetails.totalNegotiatePrice?.toLocaleString('en-IN')}}</div>\r\n </th>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"pricingplan === 'step' && !priceLoading && !priceNoData\"\r\n class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>Product</th>\r\n <th>Actual Price</th>\r\n <th>Discount %</th>\r\n <th>Negotiated Price</th>\r\n <th>Store Range</th>\r\n <th>Installed Stores</th>\r\n <th>Total Price</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let product of priceValueDetails?.product;let i=index\">\r\n <td>\r\n <div class=\"producttext\">\r\n {{convertUpper(product.productName)}}\r\n <span class=\"ms-4\" *ngIf=\"product.showImg\"><img\r\n src=\"./assets/tango/custompopup-Icons/expiry-icon.svg\"\r\n alt=\"\"></span>\r\n </div>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.basePrice}}</div>\r\n\r\n </td>\r\n <td class=\"discountprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\" [class]=\"getPriceError(product.discountPercentage)\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control w-100px\"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [class]=\"getPriceError(product.negotiatePrice)\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control w-150px\"\r\n id=\"storerange\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.storeRange\" readonly>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{product.storeCount}}\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\"> \u20B9 {{product.price}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\"\r\n *ngIf=\"!product.showEditDelete\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#D0D5DD\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"cursor-pointer table-title d-flex\"\r\n *ngIf=\"product.showEditDelete\">\r\n <span\r\n (click)=\"addstepprice('delete',product,i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M3.16602 4.99935H4.83268M4.83268 4.99935H18.166M4.83268 4.99935V16.666C4.83268 17.108 5.00828 17.532 5.32084 17.8445C5.6334 18.1571 6.05732 18.3327 6.49935 18.3327H14.8327C15.2747 18.3327 15.6986 18.1571 16.0112 17.8445C16.3238 17.532 16.4993 17.108 16.4993 16.666V4.99935H4.83268ZM7.33268 4.99935V3.33268C7.33268 2.89065 7.50828 2.46673 7.82084 2.15417C8.1334 1.84161 8.55732 1.66602 8.99935 1.66602H12.3327C12.7747 1.66602 13.1986 1.84161 13.5112 2.15417C13.8238 2.46673 13.9993 2.89065 13.9993 3.33268V4.99935M8.99935 9.16602V14.166M12.3327 9.16602V14.166\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span (click)=\"addstepprice('edit',product,i)\"\r\n class=\"ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path\r\n d=\"M14.832 2.5009C15.0509 2.28203 15.3107 2.10842 15.5967 1.98996C15.8827 1.87151 16.1892 1.81055 16.4987 1.81055C16.8082 1.81055 17.1147 1.87151 17.4007 1.98996C17.6867 2.10842 17.9465 2.28203 18.1654 2.5009C18.3842 2.71977 18.5579 2.97961 18.6763 3.26558C18.7948 3.55154 18.8557 3.85804 18.8557 4.16757C18.8557 4.4771 18.7948 4.7836 18.6763 5.06956C18.5579 5.35553 18.3842 5.61537 18.1654 5.83424L6.91536 17.0842L2.33203 18.3342L3.58203 13.7509L14.832 2.5009Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n <tr>\r\n <th>\r\n <div class=\"table-title\">Total Value</div>\r\n\r\n </th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.actualPrice}}</div>\r\n\r\n </th>\r\n <th>\r\n <!-- <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div> -->\r\n </th>\r\n <th><div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.negotiatePrice}}</div></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <div class=\"table-title bolddata\"> \u20B9 {{priceValueDetails.totalNegotiatePrice}}</div>\r\n </th>\r\n <th></th>\r\n\r\n </tr>\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"card-body pt-14\" *ngIf=\"!priceLoading && !priceNoData\">\r\n <div class=\"d-flex flex-stack\">\r\n <div class=\"fianlvaltext me-2\">Actual Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalActualPrice?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Discount</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">{{priceValueDetails.discountPercentage}}% (- \u20B9 {{priceValueDetails.discountPrice}})</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Negotiated Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.totalNegotiatePrice?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack pt-4\">\r\n <div class=\"fianlvaltext me-2\">Tax</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\">18% GST</span>\r\n </div>\r\n </div>\r\n <hr>\r\n\r\n <div class=\"d-flex flex-stack py-2\">\r\n <div class=\"fianlvaltext me-2\">Final Value</div>\r\n <div class=\"d-flex align-items-senter\">\r\n <span class=\"fianlvaltext\"> \u20B9 {{priceValueDetails.finalValue?.toLocaleString('en-IN')}}</span>\r\n </div>\r\n </div>\r\n\r\n <hr>\r\n\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\"\r\n (click)=\"revertOriginalPrice()\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"><span>Save\r\n </span></a></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- pricing tab plan end -->\r\n\r\n\r\n\r\n <!-- submit plan start -->\r\n <div *ngIf=\"plan === 'storesubscription'\" class=\"row\">\r\n <div class=\"col-lg-8\">\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end py-3\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4 mt-3\">Cancel</a><a\r\n (click)=\"pricingrevised()\" type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 mt-3 ng-star-inserted\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></a></div>\r\n </div>\r\n\r\n </div>\r\n <!-- submit plan end -->\r\n </div>\r\n </div>\r\n </div>\r\n <!-- product info end -->\r\n\r\n <!-- payment invoice start -->\r\n <div class=\"col-xl-12 my-4 billingcard\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isView\"\r\n >\r\n <form [formGroup]=\"paymentinvoiceform\">\r\n <div class=\"d-flex justify-content-between ps-4 pt-6\">\r\n <!--begin::Title-->\r\n <h3 class=\"align-items-start flex-column\">\r\n <span class=\"heading mb-2\">Payment and Invoice</span>\r\n </h3>\r\n <!--end::Title-->\r\n\r\n <!--begin::Toolbar-->\r\n <div class=\"card-toolbar mb-2\" *ngIf=\"paymentinvoiceshow\">\r\n <button (click)=\"onpaymentedit()\" type=\"submit\"\r\n class=\"btn-outline btn align-items-end needhelp me-4\"><span\r\n class=\"me-2\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n <!--end::Toolbar-->\r\n </div>\r\n <!-- payment invoice form start -->\r\n <div class=\"d-flex flex-column row fv-row fv-plugins-icon-container py-4 px-4\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Enable Pro-Rate\r\n for Charges</label>\r\n <div class=\"d-flex mt-3\">\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'before15')\">\r\n <input formControlName=\"radiooptions\"\r\n class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" id=\"inlineRadio1\" value=\"before15\"\r\n name=\"radiooptions\">\r\n <label\r\n class=\"form-check-label radio-custom-label mx-3 headingtext cursor-pointer\"\r\n for=\"inlineRadio1\">Before 15th of Month</label>\r\n </div>\r\n <div class=\"form-check form-check-inline ps-0\"\r\n (click)=\"pricingType($event, 'after15')\">\r\n <input class=\"radio-custom cursor-pointer radioButton\"\r\n type=\"radio\" formControlName=\"radiooptions\"\r\n id=\"inlineRadio2\" value=\"after15\" name=\"radiooptions\"\r\n readonly>\r\n <label\r\n class=\"form-check-label headingtext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">After 15th of Month</label>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"paymentcycle\" class=\"headingtext mb-2\">Payment\r\n Cycle</label>\r\n\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymentcycle\"\r\n (click)=\"openDropdown($event)\"\r\n aria-label=\"Default select example\">{{selectedIssue !== '' ? selectedIssue === 'monthly'\r\n ? 'Monthly' : selectedIssue === 'quaterly' ?\r\n 'Quaterly' : 'Annual' : ''}}</div>\r\n <div *ngIf=\"dropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.selectedIssue === item.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"selectItem(item.value)\">{{item.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"invoiceTo\" class=\"headingtext mb-2\">Generate\r\n Invoice To <span> <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let invoiceTo of generateinvoiceList; let i = index\">\r\n\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{invoiceTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"removeChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" formControlName=\"invoiceTo\"\r\n (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"generateinvoiceon\" class=\"headingtext mb-2\">Generate\r\n Invoice\r\n On\r\n </label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"generateinvoiceon\"\r\n (click)=\"invoiceDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceonIssue !== '' ? invoiceonIssue ===\r\n 'lastday' ? 'Last Day of the Month' :'25th of the Month':''}}\r\n </div>\r\n <div *ngIf=\"invoicedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let invoiceitem of generateinvoiceon\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceonIssue === invoiceitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(invoiceitem.value)\">\r\n {{invoiceitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"form-group pt-1\">\r\n <label for=\"paymenttype\" class=\"headingtext mb-2\">Payment\r\n Type</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"paymenttype\"\r\n (click)=\"paymenttypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{paymentIssue !== '' \r\n ? paymentIssue === 'online' ? 'Online Payment' : 'Bank Transfer' :''}}</div>\r\n <div *ngIf=\"paymenttypedropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let paymentitem of paymenttype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.paymentIssue === paymentitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"paymentItem(paymentitem.value)\">\r\n {{paymentitem.name}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-7\">\r\n <label for=\"currency\" class=\"headingtext mb-2\">Currency</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"currency\"\r\n (click)=\"currencyDropdown($event)\"\r\n aria-label=\"Default select example\">{{currencyIssue !== ''\r\n ? currencyIssue === 'inr' ? 'INR' :'Dollar' : ''}}</div>\r\n <div *ngIf=\"currencydropDown && !paymentinvoiceshow\"\r\n class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let currencyitem of currencytype\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.currencyIssue === currencyitem.value ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"currencyItem(currencyitem.value)\">\r\n {{currencyitem.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"sendpayment\" class=\"headingtext mb-2\">Send Payment\r\n Agreement<span class=\"ms-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2706_25324)\">\r\n <path\r\n d=\"M7.99967 10.6663V7.99967M7.99967 5.33301H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2706_25324\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></label>\r\n\r\n\r\n <div class=\"outer-container\">\r\n <div class=\" input-container form-control\">\r\n <ng-container\r\n *ngFor=\"let paymentAgreementTo of paymentallowedList; let i = index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{paymentAgreementTo}}</span>\r\n <span *ngIf=\"paymentinvoiceform.enabled\"\r\n (click)=\"sendpaymentremoveChip(i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\"\r\n formControlName=\"paymentAgreementTo\"\r\n (keydown)=\"sendpaymentonKeyDown($event)\" type=\"text\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group pt-6\">\r\n <label for=\"extendPaymentPeriodDays\"\r\n class=\" headingtext mb-2\">Extend Payment\r\n Period Days </label>\r\n <div class=\"w-lg-100 position-relative\">\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value - 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16699 10H15.8337\" stroke=\"#667085\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\"\r\n id=\"extendPaymentPeriodDays\" readonly\r\n formControlName=\"extendPaymentPeriodDays\" [(ngModel)]=\"extendPaymentPeriodDays\"\r\n style=\"text-align: center;\"\r\n autocomplete=\"off\" />\r\n <div\r\n class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"paymentinvoiceform.enabled ? paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(paymentinvoiceform.get('extendPaymentPeriodDays')?.value + 1) : null\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\"\r\n height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <path\r\n d=\"M8.49967 3.33301V12.6663M3.83301 7.99967H13.1663\"\r\n stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end mt-6\" *ngIf=\"!paymentinvoiceshow\">\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end\"><a type=\"submit\"\r\n class=\"btn-outline btn needhelp me-4\"\r\n (click)=\"onpaymentCancel()\">Cancel</a><button type=\"button\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n (click)=\"onpaymentSubmit()\"\r\n *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><span>Apply\r\n Changes\r\n </span></button></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- payment invoice form end -->\r\n\r\n </form>\r\n </div>\r\n <!-- payment invoice end -->\r\n\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- subscription config End -->\r\n\r\n <!--Invoices start -->\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView\">\r\n <div class=\"card mt-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>Invoices <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <div class=\"card-header paymenthistory\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\"\r\n rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" \r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\" [disabled]=\"searchDisabled\"/>\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown invheader\">\r\n <select class=\"form-select invheader\" aria-label=\"Default select example\" [(ngModel)]=\"isFilter\" (change)=\"invoiceFilter()\">\r\n <option value=\"current\">Current Month</option>\r\n <option value=\"prev\">Previous Month</option>\r\n <option value=\"last\">Last 3 Months</option>\r\n </select>\r\n </div>\r\n </div>\r\n \r\n <button (click)=\"creditnote()\" type=\"button\" class=\"btn-outline btn align-items-end invheader text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango' && (gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\" [disabled]=\"!invoiceList.length\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.16675V15.8334M4.66602 10.0001H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span>Credit Note</span> </button>\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\" [disabled]=\"!invoiceList.length\"\r\n ><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\"></span> Export</button>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"invoiceLoading\">\r\n <div\r\n class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"invoiceNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\"\r\n src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!invoiceLoading && !invoiceNoData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div (click)=\"sortData()\">\r\n Invoice #\r\n <span class=\"cursor-pointer\" *ngIf=\"sortColumName === 'invoice' && sortBy !== 1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"sortColumName === 'invoice' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">Products</th>\r\n <th>Amount</th>\r\n <th *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">Payment Method</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let invoice of invoiceList\">\r\n <td>\r\n <div class=\"table-title-primary invoice mb-2\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\" *ngIf=\"['free','Payment Received'].includes(invoice?.status)\">{{invoice?.status | titlecase}}</span>\r\n <span class=\"badge badge-light-warning\" *ngIf=\"invoice?.status === 'trial'\">{{invoice?.status | titlecase}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.billingDate}} </div>\r\n \r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.stores}}</div>\r\n \r\n </td>\r\n \r\n <td *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\"><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span></span><span class=\"productextend\" *ngIf=\"invoice?.products.length>2\" [ngbTooltip]=\"showProduct(invoice.products)\">+{{invoice?.products.length - 2 }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\u20B9 {{invoice.amount ? invoice?.amount?.toLocaleString('en-IN') : invoice.status | titlecase }}</div>\r\n </td>\r\n <td *ngIf=\"(gs.userAccess | async)?.userType !== 'tango'\">\r\n <div class=\"table-title\">{{invoice?.paymentMethod || '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\" (click)=\"downloadInvoice(invoice)\"><svg class=\"mt-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Invoices end -->\r\n </div>\r\n </div>", styles: [".accordion-button:not(.collapsed){color:none!important;background-color:#fff!important;box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed){color:none!important;background-color:var(--bs-accordion-active-bg);box-shadow:none!important}.billingcard{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff}.heading{color:var(--Gray-900, #101828);font-size:18px;font-weight:600}.subheading{color:var(--Gray-900, #101828);font-size:16px;font-weight:400;line-height:24px}.sub{color:var(--Gray-900, #101828);font-size:14px;font-weight:400;line-height:20px}.pricingtext{color:var(--Gray-800, #1D2939);font-size:30px;font-weight:600;line-height:38px}.pricingspan{color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.paymenthistory{padding:0px .25rem!important}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}input [type=text] [disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#fff!important}input[type=text]{color:#101828;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-weight:400;line-height:24px}input:active [type=text],input:focus [type=text],input:focus-visible [type=text]{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.mainheading{color:var(--Black, #101828);font-size:18px;font-weight:600;line-height:28px}.trail{color:var(--Gray-500, #667085);font-size:18px;font-weight:600;line-height:28px}.daysleft{color:var(--Error-700, #B42318);text-align:center;font-size:12px;font-weight:500;line-height:18px}.subtext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.needhelp{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:600!important;line-height:20px;text-transform:capitalize}.billingtext{color:#000;font-size:20px;font-weight:500;line-height:30px}.billingdetails{color:var(--Gray-500, #667085);font-size:16px;font-weight:500;line-height:24px}.billingmain{color:#000;font-size:16px;font-weight:600;line-height:24px}.update{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.address{border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d}.billing{border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-25, #F6FCFF)}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;width:fit-content}.form-check-label{color:var(--Gray-700, #344054)!important}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important;border:1px solid black;width:100%!important}.fieldwidth{width:100%!important;background-color:#fff!important}.text-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.pointer{cursor:pointer}.invoice{width:120%}.monthwidth{width:70%}.discountprice{width:15%!important}.negprice{width:14%}.discountheader{width:12%}.negheader{width:16%}.bolddata{font-weight:700!important;color:var(--Gray-700, #344054)!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.table:not(.table-bordered) tbody tr:last-child{border-bottom:1px solid #EAECF0!important}hr{border:1px solid var(--Gray-300, #D0D5DD);height:1px!important}.fianlvaltext{color:var(--Gray-500, #667085);font-size:16px;font-weight:600;line-height:24px}.input-group-text{background-color:#fff!important;color:var(--Gray-400, #98A2B3);font-size:16px;font-weight:400;line-height:24px}.discountinput{width:80px!important;text-align:center;color:var(--Gray-500, #667085);font-size:18px;font-weight:500;line-height:28px}.radio-custom{width:20px;height:20px;background-color:#eaf8ff}.radio-custom,.radio-custom-label{display:inline-block;vertical-align:middle;margin:8px 0;cursor:pointer}.radio-custom-label{position:relative}.radio-custom:checked+.radio-custom-label:before{background:#00a3ff;box-shadow:inset 0 0 0 4.5px #eaf8ff;width:16px;height:16px}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px;border:none!important}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.form-control{display:block;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}tr{vertical-align:middle!important}.levelviewtext{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:18px;border:none!important;font-weight:600;line-height:28px;padding-left:0!important}.subscribedtext{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:45px!important}.badge-light-grey{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:4px 12px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.daysleft{color:var(--Gray-800, #1D2939);font-family:Inter;font-size:24px;font-style:normal;font-weight:500;line-height:32px}.btn-danger{border-radius:8px;border:1px solid var(--Error-600, #D92D20);background:var(--Error-600, #D92D20);box-shadow:0 1px 2px #1018280d}.subtextbold{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:700;line-height:18px}.toastcard{border-radius:4px;border-left:2px solid #00A3FF;background:#f5f8fa;box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 12px 6px 16px;align-items:center;gap:16px;align-self:stretch}.toasttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.billingupdate{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600;line-height:18px;text-transform:capitalize}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.Historyheader{padding:0 .25rem}.product-traffic{color:var(--Blue-700, #175CD3);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Blue-50, #EFF8FF)}.productextend{border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:500;padding:2px 8px}.product-zone{border-radius:16px;background:var(--Indigo-50, #EEF4FF);padding:2px 8px;color:var(--Indigo-700, #3538CD);text-align:center;font-family:Inter;font-size:12px;font-weight:500}.product-sop{color:var(--Purple-700, #5925DC);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Purple-50, #F4F3FF)}.prioritysupport{color:var(--Pink-700, #C11574);text-align:center;font-family:Inter;font-size:12px;font-weight:500;border-radius:16px;background:var(--Pink-50, #FDF2FA)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.plancard{width:65%!important}.invheader{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.error{border:1px solid red!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}tr{vertical-align:middle}\n"] }]
|
|
3228
3294
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$1.FormBuilder }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i4$2.ToastService }, { type: i3.GlobalStateService }, { type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
3229
3295
|
type: HostListener,
|
|
3230
3296
|
args: ['document:click', ['$event']]
|
|
@@ -3452,6 +3518,20 @@ class TicketConfigurationComponent {
|
|
|
3452
3518
|
{ value: 11, label: "11 Hrs" },
|
|
3453
3519
|
{ value: 12, label: "12 Hrs" },
|
|
3454
3520
|
];
|
|
3521
|
+
refreshDownTime = [
|
|
3522
|
+
{ value: 1, label: "1 Day" },
|
|
3523
|
+
{ value: 2, label: "2 Days" },
|
|
3524
|
+
{ value: 3, label: "3 Days" },
|
|
3525
|
+
{ value: 4, label: "4 Days" },
|
|
3526
|
+
{ value: 5, label: "5 Days" },
|
|
3527
|
+
{ value: 6, label: "6 Days" },
|
|
3528
|
+
{ value: 7, label: "7 Days" },
|
|
3529
|
+
{ value: 8, label: "8 Days" },
|
|
3530
|
+
{ value: 9, label: "9 Days" },
|
|
3531
|
+
{ value: 10, label: "10 Days" },
|
|
3532
|
+
{ value: 11, label: "11 Days" },
|
|
3533
|
+
{ value: 12, label: "12 Days" },
|
|
3534
|
+
];
|
|
3455
3535
|
constructor(fb, apiService, gs) {
|
|
3456
3536
|
this.fb = fb;
|
|
3457
3537
|
this.apiService = apiService;
|
|
@@ -3498,11 +3578,11 @@ class TicketConfigurationComponent {
|
|
|
3498
3578
|
this.apiService.clientFormData.next({ value: this.ticketConfigurationForm.value, type: 'submit', form: 'ticket-configuration' });
|
|
3499
3579
|
}
|
|
3500
3580
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TicketConfigurationComponent, deps: [{ token: i1$1.FormBuilder }, { token: ClientApiService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TicketConfigurationComponent, selector: "lib-ticket-configuration", ngImport: i0, template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
3581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TicketConfigurationComponent, selector: "lib-ticket-configuration", ngImport: i0, template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"refreshDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
3502
3582
|
}
|
|
3503
3583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TicketConfigurationComponent, decorators: [{
|
|
3504
3584
|
type: Component,
|
|
3505
|
-
args: [{ selector: 'lib-ticket-configuration', template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"] }]
|
|
3585
|
+
args: [{ selector: 'lib-ticket-configuration', template: "<form [formGroup]=\"ticketConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"ticketConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"ticketConfigurationForm.disabled ? ticketConfigurationForm.enable() : ticketConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"sub-header mb-7\">Installation</div>\r\n <label for=\"installationReAssign\" class=\"form-label\">Auto Re-Assign Installation tickets in days\r\n <span class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('installationReAssign')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"installationReAssign\"\r\n class=\"form-control inc-dec-input\" id=\"installationReAssign\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.enabled ? ticketConfigurationForm.get('installationReAssign')?.setValue(ticketConfigurationForm.get('installationReAssign')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Infra</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <label for=\"brandName\" class=\"form-label\">To whom should this alert be sent? <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"d-flex\">\r\n <div class=\"form-check me-12\">\r\n <input formControlName=\"sendToAdmin\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"sendToAdmin\">\r\n <label class=\"form-check-label\" for=\"sendToAdmin\">\r\n Admin\r\n </label>\r\n </div>\r\n <div class=\"form-check\">\r\n <input formControlName=\"sendToUser\" class=\"form-check-input me-2\" type=\"checkbox\" value=\"\"\r\n id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n User\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"downTimeType\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"downTimeType\" [label]=\"'Downtime Type'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"infraDownTime\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" [label]=\"'Downtime'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Files <span class=\"alert-required\"></span></label>\r\n <input type=\"number\" formControlName=\"MinFilesCount\" class=\"form-control\" id=\"MinFilesCount\"\r\n autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">RCA Ticket</div>\r\n <div class=\"sub-heading\">Set an alert, if there is no response from the store </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\" >\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Refresh Ticket Alert</div>\r\n <div class=\"sub-heading\">Trigger an ticket, if the issue is not resolved or in progress\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"refreshDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"custom-input-container\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg class=\"me-5\" width=\"46\" height=\"47\" viewBox=\"0 0 46 47\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#F2F4F7\" />\r\n <rect x=\"3\" y=\"3.91626\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#F9FAFB\" stroke-width=\"6\" />\r\n <g clip-path=\"url(#clip0_2876_59590)\">\r\n <path\r\n d=\"M23.8333 15.5829L15.5 25.5829H23L22.1667 32.2496L30.5 22.2496H23L23.8333 15.5829Z\"\r\n stroke=\"#475467\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2876_59590\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13 13.9163)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div>\r\n <div class=\"main-heading\">Status Check Alert</div>\r\n <div class=\"sub-heading\">An alert will be sent to the store employee so they can confirm\r\n whether the problem has been fixed.</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <lib-reactive-select formControlName=\"rcaTicketAssign\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraDownTime\" ></lib-reactive-select>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 mb-7 mt-7\">\r\n <div class=\" w-100 footer-seperator\"></div>\r\n </div>\r\n <div class=\"col-12 mb-7\">\r\n <div class=\"sub-header \">Data Mismatch (High Count)</div>\r\n </div>\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <label for=\"accuracyPercentage\" class=\"form-label\">Accuracy Percentage less than <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <input min=\"0\" max=\"100\" type=\"number\" formControlName=\"accuracyPercentage\"\r\n class=\"form-control \" id=\"accuracyPercentage\" autocomplete=\"off\">\r\n <svg class=\"inc\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.666 4.24967L3.33268 13.583M5.99935 5.24967C5.99935 6.17015 5.25316 6.91634 4.33268 6.91634C3.41221 6.91634 2.66602 6.17015 2.66602 5.24967C2.66602 4.3292 3.41221 3.58301 4.33268 3.58301C5.25316 3.58301 5.99935 4.3292 5.99935 5.24967ZM13.3327 12.583C13.3327 13.5035 12.5865 14.2497 11.666 14.2497C10.7455 14.2497 9.99935 13.5035 9.99935 12.583C9.99935 11.6625 10.7455 10.9163 11.666 10.9163C12.5865 10.9163 13.3327 11.6625 13.3327 12.583Z\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <label for=\"reTrain\" class=\"form-label\">Sent to Re-training for (in days) <span\r\n class=\"alert-required\"></span></label>\r\n <div style=\"position: relative;\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value > 0 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value - 1) : null\"\r\n class=\"dec\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M4.16602 10H15.8327\" stroke=\"#667085\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <input readonly type=\"number\" formControlName=\"reTrain\" class=\"form-control inc-dec-input\"\r\n id=\"reTrain\" autocomplete=\"off\">\r\n <svg role=\"button\"\r\n (click)=\"ticketConfigurationForm.get('reTrain')?.value < 12 && ticketConfigurationForm.enabled ? ticketConfigurationForm.get('reTrain')?.setValue(ticketConfigurationForm.get('reTrain')?.value + 1) : null\"\r\n class=\"inc\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00065 3.33337V12.6667M3.33398 8.00004H12.6673\" stroke=\"#667085\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[disabled],select[disabled],textarea[disabled],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.inc-dec-input{padding-right:30px;padding-left:30px;text-align:center}.inc{height:100%;position:absolute;right:14px;top:0}.dec{height:100%;position:absolute;left:14px;top:0}.sub-header{color:var(--Black, #101828);font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;width:100%}.custom-input-container .main-heading{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.custom-input-container .sub-heading{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.custom-input-container .form-select{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;width:134px}.custom-input-container .form-select[disabled]{background-color:var(--White, #FFF)!important;border:1px solid var(--Gray-200, #EAECF0)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:14px;font-weight:600;line-height:20px}.custom-input-container .form-check-input{height:16px;width:16px;border-radius:50%;border:1px solid var(--Gray-300, #D0D5DD)}.custom-input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBvc1RCQAgDEXRRTCCkYxiA21gJRsYwSjzgQxENtjXHtwfPTCi0DFzRsWDNt9lD+rymNBCzUQPlI+hIuOUjj48UaWQHcH9cjH96UPaAAAAAElFTkSuQmCC);border:1px solid var(--Primary-600, #00A3FF);background-color:var(--Primary-600, #00A3FF)}\n"] }]
|
|
3506
3586
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i3.GlobalStateService }] });
|
|
3507
3587
|
|
|
3508
3588
|
class AddReportComponent {
|
|
@@ -4075,6 +4155,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
4075
4155
|
args: [{ selector: 'lib-feature-configuration', template: "<form [formGroup]=\"featureConfigurationForm\">\r\n <div class=\"row\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n <div *ngIf=\"featureConfigurationForm.disabled\" class=\"col-12 mb-5\">\r\n <div class=\" d-flex justify-content-end\">\r\n <button\r\n (click)=\"featureConfigurationForm.disabled ? featureConfigurationForm.enable() : featureConfigurationForm.disable()\"\r\n type=\"button\" class=\"btn btn-outline align-items-end\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Edit Details</button>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"open\" class=\"form-label\">Store Open Time <span class=\"alert-required\"></span></label>\r\n <input type=\"time\" formControlName=\"open\" class=\"form-control\" id=\"open\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"close\" class=\"form-label\">Store Close Time <span class=\"alert-required\"></span></label>\r\n <input type=\"time\" formControlName=\"close\" class=\"form-control\" id=\"close\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label class=\"form-label\">Infra Alert <span class=\"alert-required\"></span></label>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"infraAlertCondition\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraAlertCondition\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"infraAlertValue\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"infraAlertValue\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"downTimeType\" class=\"form-label\">Bounced Limit<span class=\"alert-required\"></span></label>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"bouncedLimitCondition\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"bouncedLimitCondition\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"bouncedLimitValue\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"bouncedLimitValue\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label for=\"MinFilesCount\" class=\"form-label\">Missed Opportunity <span\r\n class=\"alert-required\"></span></label>\r\n <div class=\"form-control mock-input d-flex justify-content-center align-items-center\">\r\n <ng-container *ngIf=\"missedOpportunityStartTime\">\r\n {{missedOpportunityStartTime }} - {{missedOpportunityEndTime}}\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <label class=\"form-label\">Conversion <span class=\"alert-required\"></span></label>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"conversionCondition\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"conversionCondition\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col\">\r\n <lib-reactive-select formControlName=\"conversionValue\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"conversionValue\" ></lib-reactive-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"billableCalculation\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"billableCalculation\" [label]=\"'Billable Calculations'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"missedOpportunityCalculation\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"missedOpportunityCalculation\" [label]=\"'Missed Opportunity Calculation'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5\">\r\n <lib-reactive-select formControlName=\"conversionCalculation\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"conversionCalculation\" [label]=\"'Conversion Calculations'\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <div class=\"sub-header\">Normalized data during downtime</div>\r\n <div class=\"sub-text\">Choose if you want to view normalized data during downtime. </div>\r\n </div>\r\n \r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <div class=\"sub-header\">Passer-by data</div>\r\n <div class=\"sub-text\">Choose if you want to view Passerby data. </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" >\r\n <div class=\"sub-header\">Footfall Directory</div>\r\n <div class=\"sub-text\">Choose if you want to view Footfall directory </div> \r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"isNormalized\" class=\"form-check-input\" type=\"checkbox\" id=\"isNormalized\">\r\n <label class=\"form-check-label toggle-label\" for=\"isNormalized\"> Show Normalized data\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"isPasserByData\" class=\"form-check-input\" type=\"checkbox\" id=\"isPasserByData\">\r\n <label class=\"form-check-label toggle-label\" for=\"isPasserByData\"> Show Passer-by data\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4 mb-5 px-6\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" >\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"isFootfallDirectory\" class=\"form-check-input\" type=\"checkbox\"\r\n id=\"isFootfallDirectory\">\r\n <label class=\"form-check-label toggle-label\" for=\"isFootfallDirectory\"> Show Footfall Directory\r\n </label>\r\n </div> \r\n </ng-container>\r\n \r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"featureConfigurationForm.enabled\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}select[disabled],textarea[disabled]{background-color:#f9fafb!important}.footer-seperator{border-top:1px solid #EAECF0}.sub-header{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.sub-text{color:var(--Gray-500, #667085);font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.toggle-label{color:var(--Gray-700, #344054);font-size:16px;font-weight:500;line-height:24px}.mock-input{background-color:#f9fafb!important}\n"] }]
|
|
4076
4156
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i3.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
|
|
4077
4157
|
|
|
4158
|
+
class EmailConfigurationComponent {
|
|
4159
|
+
modalService;
|
|
4160
|
+
toast;
|
|
4161
|
+
cd;
|
|
4162
|
+
service;
|
|
4163
|
+
confirmationModal;
|
|
4164
|
+
modalRef;
|
|
4165
|
+
SelectedTab = 'Infra Report';
|
|
4166
|
+
startTime;
|
|
4167
|
+
endTime;
|
|
4168
|
+
dropDown = false;
|
|
4169
|
+
dropdownItems = ['Admin', 'User', 'Super Admin'];
|
|
4170
|
+
selectedRole = 'Admin';
|
|
4171
|
+
offset = 0;
|
|
4172
|
+
limit = 10;
|
|
4173
|
+
sortBy = -1;
|
|
4174
|
+
sortColumName;
|
|
4175
|
+
totalCount;
|
|
4176
|
+
searchInstallation;
|
|
4177
|
+
noData;
|
|
4178
|
+
loading;
|
|
4179
|
+
selectedItems;
|
|
4180
|
+
destroy$ = new Subject();
|
|
4181
|
+
emailuserList;
|
|
4182
|
+
dummyEmailList;
|
|
4183
|
+
clientId;
|
|
4184
|
+
storeList;
|
|
4185
|
+
Email;
|
|
4186
|
+
userName;
|
|
4187
|
+
onClick(event) {
|
|
4188
|
+
const target = event.target;
|
|
4189
|
+
if (!target.closest('.dropdown')) {
|
|
4190
|
+
this.dropDown = false;
|
|
4191
|
+
}
|
|
4192
|
+
}
|
|
4193
|
+
constructor(modalService, toast, cd, service) {
|
|
4194
|
+
this.modalService = modalService;
|
|
4195
|
+
this.toast = toast;
|
|
4196
|
+
this.cd = cd;
|
|
4197
|
+
this.service = service;
|
|
4198
|
+
this.service.clientData.pipe(takeUntil(this.destroy$)).subscribe((e) => {
|
|
4199
|
+
if (e) {
|
|
4200
|
+
this.clientId = e.clientId;
|
|
4201
|
+
}
|
|
4202
|
+
});
|
|
4203
|
+
}
|
|
4204
|
+
ngOnInit() {
|
|
4205
|
+
this.Selectedtabs(this.SelectedTab);
|
|
4206
|
+
this.getBrandDetails();
|
|
4207
|
+
this.userList();
|
|
4208
|
+
}
|
|
4209
|
+
ngOnDestroy() {
|
|
4210
|
+
this.destroy$.next(true);
|
|
4211
|
+
this.destroy$.complete();
|
|
4212
|
+
}
|
|
4213
|
+
selectAll(event) {
|
|
4214
|
+
const checked = event.target.checked;
|
|
4215
|
+
this.emailuserList?.result.forEach((item) => {
|
|
4216
|
+
if (checked) {
|
|
4217
|
+
item.infraAlert = checked;
|
|
4218
|
+
// this.updateSelectedItems();
|
|
4219
|
+
}
|
|
4220
|
+
else {
|
|
4221
|
+
item.infraAlert = false;
|
|
4222
|
+
}
|
|
4223
|
+
});
|
|
4224
|
+
}
|
|
4225
|
+
selectItems(event, item) {
|
|
4226
|
+
item.infraAlert = event.target.checked;
|
|
4227
|
+
this.checkSelectAll();
|
|
4228
|
+
// this.updateSelectedItems();
|
|
4229
|
+
}
|
|
4230
|
+
checkSelectAll() {
|
|
4231
|
+
const allSelected = this.emailuserList?.result.every((item) => item.infraAlert);
|
|
4232
|
+
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
|
4233
|
+
if (selectAllCheckbox) {
|
|
4234
|
+
selectAllCheckbox.checked = allSelected;
|
|
4235
|
+
}
|
|
4236
|
+
}
|
|
4237
|
+
updateSelectedItems() {
|
|
4238
|
+
if (this.endTime > this.startTime) {
|
|
4239
|
+
this.selectedItems = this.emailuserList?.result.map((item, index) => {
|
|
4240
|
+
return { email: item.email, infraAlert: item.infraAlert };
|
|
4241
|
+
});
|
|
4242
|
+
this.updateUserList();
|
|
4243
|
+
}
|
|
4244
|
+
else {
|
|
4245
|
+
this.toast.getErrorToast('Invalid Time Taken');
|
|
4246
|
+
}
|
|
4247
|
+
}
|
|
4248
|
+
cancelSelectedItems() {
|
|
4249
|
+
this.emailuserList = JSON.parse(JSON.stringify(this.dummyEmailList));
|
|
4250
|
+
this.checkSelectAll();
|
|
4251
|
+
}
|
|
4252
|
+
Selectedtabs(value) {
|
|
4253
|
+
this.SelectedTab = value;
|
|
4254
|
+
}
|
|
4255
|
+
selectItem(value) {
|
|
4256
|
+
this.selectedRole = value;
|
|
4257
|
+
this.dropDown = false;
|
|
4258
|
+
this.userList();
|
|
4259
|
+
// this.tableData.filter = this.selectedItem === "All" ? [] : value
|
|
4260
|
+
}
|
|
4261
|
+
openDropdown(event) {
|
|
4262
|
+
event.stopPropagation();
|
|
4263
|
+
this.dropDown = !this.dropDown;
|
|
4264
|
+
}
|
|
4265
|
+
searchInstallationTable() {
|
|
4266
|
+
this.userList();
|
|
4267
|
+
}
|
|
4268
|
+
onPageChange(pageOffset) {
|
|
4269
|
+
this.offset = pageOffset;
|
|
4270
|
+
this.userList();
|
|
4271
|
+
}
|
|
4272
|
+
onPageSizeChange(pageSize) {
|
|
4273
|
+
this.limit = pageSize;
|
|
4274
|
+
this.userList();
|
|
4275
|
+
}
|
|
4276
|
+
sortData(value) {
|
|
4277
|
+
this.sortColumName = value;
|
|
4278
|
+
this.sortBy *= -1;
|
|
4279
|
+
this.userList();
|
|
4280
|
+
}
|
|
4281
|
+
storeDetails(obj, email, userName) {
|
|
4282
|
+
this.storeList = obj;
|
|
4283
|
+
this.Email = email;
|
|
4284
|
+
this.userName = userName;
|
|
4285
|
+
const modalRef = this.modalService.open(this.confirmationModal, { centered: true });
|
|
4286
|
+
}
|
|
4287
|
+
getBrandDetails() {
|
|
4288
|
+
this.service.getBrandDetails(this.clientId).pipe(takeUntil(this.destroy$)).subscribe({
|
|
4289
|
+
next: (res) => {
|
|
4290
|
+
if (res && res.code == '200') {
|
|
4291
|
+
const responseData = res?.data?.ticketConfigs;
|
|
4292
|
+
this.startTime = responseData?.infraReport?.start;
|
|
4293
|
+
this.endTime = responseData?.infraReport?.end;
|
|
4294
|
+
}
|
|
4295
|
+
else {
|
|
4296
|
+
}
|
|
4297
|
+
},
|
|
4298
|
+
error: (err) => {
|
|
4299
|
+
},
|
|
4300
|
+
});
|
|
4301
|
+
}
|
|
4302
|
+
userList() {
|
|
4303
|
+
let data = {
|
|
4304
|
+
"clientId": this.clientId,
|
|
4305
|
+
"role": this.selectedRole.replace(' ', '').toLowerCase(),
|
|
4306
|
+
"searchValue": this.searchInstallation,
|
|
4307
|
+
"sortColumName": this.sortColumName,
|
|
4308
|
+
"sortBy": this.sortBy,
|
|
4309
|
+
"skip": this.offset,
|
|
4310
|
+
"limit": this.limit
|
|
4311
|
+
};
|
|
4312
|
+
this.loading = true;
|
|
4313
|
+
this.noData = false;
|
|
4314
|
+
this.service.emailUserList(data).pipe(takeUntil(this.destroy$)).subscribe({
|
|
4315
|
+
next: (res) => {
|
|
4316
|
+
if (res && res.code == '200' && res?.data?.result?.length) {
|
|
4317
|
+
this.loading = false;
|
|
4318
|
+
this.noData = false;
|
|
4319
|
+
this.emailuserList = res.data;
|
|
4320
|
+
this.dummyEmailList = JSON.parse(JSON.stringify(this.emailuserList));
|
|
4321
|
+
}
|
|
4322
|
+
else {
|
|
4323
|
+
this.noData = true;
|
|
4324
|
+
this.loading = false;
|
|
4325
|
+
}
|
|
4326
|
+
},
|
|
4327
|
+
error: (err) => {
|
|
4328
|
+
this.noData = true;
|
|
4329
|
+
this.loading = false;
|
|
4330
|
+
},
|
|
4331
|
+
});
|
|
4332
|
+
}
|
|
4333
|
+
updateUserList() {
|
|
4334
|
+
let data = {
|
|
4335
|
+
clientId: this.clientId,
|
|
4336
|
+
start: this.startTime,
|
|
4337
|
+
end: this.endTime,
|
|
4338
|
+
"userList": this.selectedItems,
|
|
4339
|
+
};
|
|
4340
|
+
this.service.saveInfraEmailConfig(data).pipe(takeUntil(this.destroy$)).subscribe({
|
|
4341
|
+
next: (res) => {
|
|
4342
|
+
if (res && res.code == '200') {
|
|
4343
|
+
this.toast.getSuccessToast(res?.message);
|
|
4344
|
+
}
|
|
4345
|
+
},
|
|
4346
|
+
error: (err) => {
|
|
4347
|
+
this.toast.getErrorToast(err?.error);
|
|
4348
|
+
},
|
|
4349
|
+
});
|
|
4350
|
+
}
|
|
4351
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EmailConfigurationComponent, deps: [{ token: i1$2.NgbModal }, { token: i4$2.ToastService }, { token: i0.ChangeDetectorRef }, { token: ClientApiService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EmailConfigurationComponent, selector: "lib-email-configuration", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mb-10\">\r\n <li class=\"nav-item\" (click)=\"Selectedtabs('Infra Report')\">\r\n <a \r\n [ngClass]=\"SelectedTab === 'Infra Report' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Infra Report\r\n </a>\r\n </li>\r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('Data Report')\">\r\n <a \r\n [ngClass]=\"SelectedTab === 'Data Report' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Data Report\r\n </a>\r\n </li> \r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('Insight Report')\">\r\n <a [ngClass]=\"SelectedTab ==='Insight Report' ? 'active' :''\" class=\"nav-link cursor-pointer me-3\">Insight Report</a>\r\n </li>\r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('All')\"><a [ngClass]=\"SelectedTab ==='All' ? 'active' :''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">All</a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <span class=\"timingtext fw-bold\">Send Daily Report at</span> <span> <input type=\"time\" [(ngModel)]=\"startTime\" class=\"form-control w-auto mx-5\"></span><span class=\"timingtext fw-bold\">and</span><span><input type=\"time\" [(ngModel)]=\"endTime\" class=\"form-control w-auto mx-5\"></span>\r\n </div>\r\n</div>\r\n<div class=\"card\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title d-grid\">\r\n <div class=\"title fw-bold\">Users List</div>\r\n <div class=\"sub-title\">Select your required email & schedule the mail timing accordingly</div>\r\n </div>\r\n <div class=\"card-toolbar\"> \r\n <input type=\"text\" class=\"form-control w-auto ps-3 me-2\" placeholder=\"Search\"\r\n autocomplete=\"off\" [(ngModel)]=\"searchInstallation\"\r\n (change)=\"searchInstallationTable()\" />\r\n <div class=\"position-relative w-150px mt-5 mb-5 ms-2\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n {{selectedRole ? selectedRole : dropdownItems[0]}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedRole === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n (click)=\"selectItem(item)\">{{item}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div *ngIf=\"!loading && !noData \">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input type=\"checkbox\" id=\"selectAllCheckbox\" (change)=\"selectAll($event)\">\r\n <div class=\"d-flex align-items-center cursor-pointer\" (click)=\"sortData('userName')\">\r\n <span class=\"ms-2 me-1\">User</span>\r\n <span *ngIf=\"sortColumName === 'userName' && sortBy !== 1 || sortColumName !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('email')\">Email\r\n <span *ngIf=\"sortColumName === 'email' && sortBy !== 1 || sortColumName !== 'email' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'email' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('assigned')\">Store Count\r\n <span *ngIf=\"sortColumName === 'assigned' && sortBy !== 1 || sortColumName !== 'assigned' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'assigned' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of emailuserList?.result\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"me-5\" [(ngModel)]=\"item.infraAlert\" (change)=\"selectItems($event, item)\">\r\n <div>\r\n {{ item?.userName ? item?.userName : 'NA' }}\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div>{{ item?.email ? item?.email :'NA' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"text-title text-primary cursor-pointer text-decoration-underline mb-1\" (click)=\"storeDetails(item?.assignedValue,item?.userName,item?.email)\">{{ item?.assigned }}</div></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\"\r\n [totalItems]=\"emailuserList?.count\" [paginationSizes]=\"[10,20,30]\" [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n <div>\r\n\r\n <div class=\"mt-10 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline btn-default me-3\" (click)=\"cancelSelectedItems()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary btn-default\" (click)=\"updateSelectedItems()\">\r\n Save Chages\r\n </button>\r\n </div> \r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8 card-title\">\r\n <div class=\"title\">\r\n Stores List of the user\r\n </div>\r\n <div class=\"d-flex align-items-center mt-10 mb-10\">\r\n <div class=\"rounded-5 profile d-flex align-items-center justify-content-center fw-semibold\">{{Email.slice(0,2) | uppercase}}</div>\r\n <div class=\"ms-3\">\r\n <div class=\"title1 mb-1 fw-bold\">{{userName}}</div>\r\n <div class=\"text-sub\">{{Email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5 border border-gray border-1 rounded-3 p-5\">\r\n <span *ngFor=\"let list of storeList\" class=\"badge badge-light-default me-3\">{{list?.storeName}}</span>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-100\" (click)=\"modal.dismiss()\">Close</button>\r\n </div>\r\n </div>\r\n </ng-template>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.items{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%!important}tr{vertical-align:middle!important}.card-title .title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.card-title .sub-title{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.timingtext{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.disabled-list{pointer-events:none;opacity:.5}.profile{color:var(--Primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF);font-size:14px;line-height:20px;width:40px;height:40px}.title1{color:var(--Gray-700, #344054);font-size:14px!important;line-height:20px}.text-sub{color:var(--Gray-500, #667085);line-height:20px;font-weight:400}table tr{vertical-align:middle!important;padding-top:16px;padding-bottom:16px}table td .text-sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }] });
|
|
4353
|
+
}
|
|
4354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EmailConfigurationComponent, decorators: [{
|
|
4355
|
+
type: Component,
|
|
4356
|
+
args: [{ selector: 'lib-email-configuration', template: "\r\n<div class=\"mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mb-10\">\r\n <li class=\"nav-item\" (click)=\"Selectedtabs('Infra Report')\">\r\n <a \r\n [ngClass]=\"SelectedTab === 'Infra Report' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Infra Report\r\n </a>\r\n </li>\r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('Data Report')\">\r\n <a \r\n [ngClass]=\"SelectedTab === 'Data Report' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Data Report\r\n </a>\r\n </li> \r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('Insight Report')\">\r\n <a [ngClass]=\"SelectedTab ==='Insight Report' ? 'active' :''\" class=\"nav-link cursor-pointer me-3\">Insight Report</a>\r\n </li>\r\n <li class=\"nav-item disabled-list \" (click)=\"Selectedtabs('All')\"><a [ngClass]=\"SelectedTab ==='All' ? 'active' :''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">All</a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <span class=\"timingtext fw-bold\">Send Daily Report at</span> <span> <input type=\"time\" [(ngModel)]=\"startTime\" class=\"form-control w-auto mx-5\"></span><span class=\"timingtext fw-bold\">and</span><span><input type=\"time\" [(ngModel)]=\"endTime\" class=\"form-control w-auto mx-5\"></span>\r\n </div>\r\n</div>\r\n<div class=\"card\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title d-grid\">\r\n <div class=\"title fw-bold\">Users List</div>\r\n <div class=\"sub-title\">Select your required email & schedule the mail timing accordingly</div>\r\n </div>\r\n <div class=\"card-toolbar\"> \r\n <input type=\"text\" class=\"form-control w-auto ps-3 me-2\" placeholder=\"Search\"\r\n autocomplete=\"off\" [(ngModel)]=\"searchInstallation\"\r\n (change)=\"searchInstallationTable()\" />\r\n <div class=\"position-relative w-150px mt-5 mb-5 ms-2\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\">\r\n {{selectedRole ? selectedRole : dropdownItems[0]}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedRole === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n (click)=\"selectItem(item)\">{{item}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div *ngIf=\"!loading && !noData \">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex align-items-center\">\r\n <input type=\"checkbox\" id=\"selectAllCheckbox\" (change)=\"selectAll($event)\">\r\n <div class=\"d-flex align-items-center cursor-pointer\" (click)=\"sortData('userName')\">\r\n <span class=\"ms-2 me-1\">User</span>\r\n <span *ngIf=\"sortColumName === 'userName' && sortBy !== 1 || sortColumName !== 'userName' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'userName' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('email')\">Email\r\n <span *ngIf=\"sortColumName === 'email' && sortBy !== 1 || sortColumName !== 'email' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'email' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('assigned')\">Store Count\r\n <span *ngIf=\"sortColumName === 'assigned' && sortBy !== 1 || sortColumName !== 'assigned' \">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"sortColumName === 'assigned' && sortBy !== -1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of emailuserList?.result\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"me-5\" [(ngModel)]=\"item.infraAlert\" (change)=\"selectItems($event, item)\">\r\n <div>\r\n {{ item?.userName ? item?.userName : 'NA' }}\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div>{{ item?.email ? item?.email :'NA' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"text-title text-primary cursor-pointer text-decoration-underline mb-1\" (click)=\"storeDetails(item?.assignedValue,item?.userName,item?.email)\">{{ item?.assigned }}</div></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"limit\" [currentPage]=\"offset\"\r\n [totalItems]=\"emailuserList?.count\" [paginationSizes]=\"[10,20,30]\" [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n <div>\r\n\r\n <div class=\"mt-10 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline btn-default me-3\" (click)=\"cancelSelectedItems()\">\r\n Cancel\r\n </button>\r\n <button class=\"btn btn-primary btn-default\" (click)=\"updateSelectedItems()\">\r\n Save Chages\r\n </button>\r\n </div> \r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8 card-title\">\r\n <div class=\"title\">\r\n Stores List of the user\r\n </div>\r\n <div class=\"d-flex align-items-center mt-10 mb-10\">\r\n <div class=\"rounded-5 profile d-flex align-items-center justify-content-center fw-semibold\">{{Email.slice(0,2) | uppercase}}</div>\r\n <div class=\"ms-3\">\r\n <div class=\"title1 mb-1 fw-bold\">{{userName}}</div>\r\n <div class=\"text-sub\">{{Email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"mt-5 border border-gray border-1 rounded-3 p-5\">\r\n <span *ngFor=\"let list of storeList\" class=\"badge badge-light-default me-3\">{{list?.storeName}}</span>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-100\" (click)=\"modal.dismiss()\">Close</button>\r\n </div>\r\n </div>\r\n </ng-template>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.items{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%!important}tr{vertical-align:middle!important}.card-title .title{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.card-title .sub-title{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.timingtext{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.disabled-list{pointer-events:none;opacity:.5}.profile{color:var(--Primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF);font-size:14px;line-height:20px;width:40px;height:40px}.title1{color:var(--Gray-700, #344054);font-size:14px!important;line-height:20px}.text-sub{color:var(--Gray-500, #667085);line-height:20px;font-weight:400}table tr{vertical-align:middle!important;padding-top:16px;padding-bottom:16px}table td .text-sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}\n"] }]
|
|
4357
|
+
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i4$2.ToastService }, { type: i0.ChangeDetectorRef }, { type: ClientApiService }], propDecorators: { confirmationModal: [{
|
|
4358
|
+
type: ViewChild,
|
|
4359
|
+
args: ['confirmationModal']
|
|
4360
|
+
}], onClick: [{
|
|
4361
|
+
type: HostListener,
|
|
4362
|
+
args: ['document:click', ['$event']]
|
|
4363
|
+
}] } });
|
|
4364
|
+
|
|
4078
4365
|
class ConfigurationsComponent {
|
|
4079
4366
|
clientApi;
|
|
4080
4367
|
toaster;
|
|
@@ -4260,11 +4547,11 @@ class ConfigurationsComponent {
|
|
|
4260
4547
|
return differentEntries;
|
|
4261
4548
|
}
|
|
4262
4549
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConfigurationsComponent, deps: [{ token: ClientApiService }, { token: i4$2.ToastService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ConfigurationsComponent, selector: "lib-configurations", viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6 \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: AuditConfigurationComponent, selector: "lib-audit-configuration" }, { kind: "component", type: TicketConfigurationComponent, selector: "lib-ticket-configuration" }, { kind: "component", type: ReportConfigurationComponent, selector: "lib-report-configuration" }, { kind: "component", type: UserConfigurationComponent, selector: "lib-user-configuration" }, { kind: "component", type: DomainDetailsComponent, selector: "lib-domain-details" }, { kind: "component", type: FeatureConfigurationComponent, selector: "lib-feature-configuration" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4550
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ConfigurationsComponent, selector: "lib-configurations", viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6 \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Email Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-email-configuration></lib-email-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: AuditConfigurationComponent, selector: "lib-audit-configuration" }, { kind: "component", type: TicketConfigurationComponent, selector: "lib-ticket-configuration" }, { kind: "component", type: ReportConfigurationComponent, selector: "lib-report-configuration" }, { kind: "component", type: UserConfigurationComponent, selector: "lib-user-configuration" }, { kind: "component", type: DomainDetailsComponent, selector: "lib-domain-details" }, { kind: "component", type: FeatureConfigurationComponent, selector: "lib-feature-configuration" }, { kind: "component", type: EmailConfigurationComponent, selector: "lib-email-configuration" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4264
4551
|
}
|
|
4265
4552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
4266
4553
|
type: Component,
|
|
4267
|
-
args: [{ selector: 'lib-configurations', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6 \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"] }]
|
|
4554
|
+
args: [{ selector: 'lib-configurations', template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem()\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6 \" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Audit Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-audit-configuration></lib-audit-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Ticket Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-ticket-configuration></lib-ticket-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Email Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-email-configuration></lib-email-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Report Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-report-configuration></lib-report-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' \" class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >User Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-user-configuration></lib-user-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Domain Details</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-domain-details></lib-domain-details> \r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"settings-accordian-card mb-6\" ngbAccordionItem>\r\n <div class=\"d-flex\" ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div class=\"header-row\">\r\n <span >Feature Configuration</span>\r\n <span class=\"divider\"></span>\r\n </div>\r\n </button>\r\n </div>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-feature-configuration></lib-feature-configuration>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"] }]
|
|
4268
4555
|
}], ctorParameters: () => [{ type: ClientApiService }, { type: i4$2.ToastService }, { type: i3.GlobalStateService }], propDecorators: { accordion: [{
|
|
4269
4556
|
type: ViewChild,
|
|
4270
4557
|
args: ['accordion', { static: true }]
|
|
@@ -5218,7 +5505,8 @@ class TangoManageSettingsModule {
|
|
|
5218
5505
|
ProductConfirmationComponent,
|
|
5219
5506
|
ActivityLogsComponent,
|
|
5220
5507
|
ModalContentComponent,
|
|
5221
|
-
ReactiveSelectComponent
|
|
5508
|
+
ReactiveSelectComponent,
|
|
5509
|
+
EmailConfigurationComponent], imports: [CommonModule,
|
|
5222
5510
|
TangoManageSettingsRoutingModule,
|
|
5223
5511
|
NgbAccordionModule,
|
|
5224
5512
|
NgbModule,
|
|
@@ -5290,7 +5578,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
5290
5578
|
ProductConfirmationComponent,
|
|
5291
5579
|
ActivityLogsComponent,
|
|
5292
5580
|
ModalContentComponent,
|
|
5293
|
-
ReactiveSelectComponent
|
|
5581
|
+
ReactiveSelectComponent,
|
|
5582
|
+
EmailConfigurationComponent
|
|
5294
5583
|
],
|
|
5295
5584
|
imports: [
|
|
5296
5585
|
CommonModule,
|