tango-app-ui-manage-settings 3.0.14-dev → 3.0.16-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/payments-subscription/payments-subscription.component.mjs +151 -68
- package/esm2022/lib/components/payments-subscription/subscription-popups/add-stepprice/add-stepprice.component.mjs +2 -2
- package/esm2022/lib/components/payments-subscription/subscription-popups/credit-note/credit-note.component.mjs +16 -16
- package/esm2022/lib/components/payments-subscription/subscription-popups/model-content/model-content.component.mjs +47 -0
- package/esm2022/lib/components/payments-subscription/subscription-popups/multidropdown/multidropdown.component.mjs +83 -45
- package/esm2022/lib/components/payments-subscription/subscription-popups/need-help/need-help.component.mjs +4 -9
- package/esm2022/lib/components/payments-subscription/subscription-popups/pricing-revised/pricing-revised.component.mjs +8 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/product-confirmation/product-confirmation.component.mjs +12 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/subscription-approval/subscription-approval.component.mjs +3 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/trail-settings/trail-settings.component.mjs +7 -3
- package/esm2022/lib/components/payments-subscription/subscription-popups/unsubscribe-request/unsubscribe-request.component.mjs +8 -5
- package/esm2022/lib/components/payments-subscription/subscription-popups/update/update.component.mjs +2 -2
- package/esm2022/lib/components/payments-subscription/subscription-popups/upgrade-plan/upgrade-plan.component.mjs +34 -9
- package/esm2022/lib/services/payment-subscription.service.mjs +5 -2
- package/esm2022/lib/tango-manage-settings.module.mjs +5 -2
- package/fesm2022/tango-app-ui-manage-settings.mjs +365 -155
- package/fesm2022/tango-app-ui-manage-settings.mjs.map +1 -1
- package/lib/components/payments-subscription/payments-subscription.component.d.ts +13 -0
- package/lib/components/payments-subscription/subscription-popups/credit-note/credit-note.component.d.ts +1 -0
- package/lib/components/payments-subscription/subscription-popups/model-content/model-content.component.d.ts +16 -0
- package/lib/components/payments-subscription/subscription-popups/multidropdown/multidropdown.component.d.ts +3 -1
- package/lib/components/payments-subscription/subscription-popups/need-help/need-help.component.d.ts +1 -4
- package/lib/components/payments-subscription/subscription-popups/pricing-revised/pricing-revised.component.d.ts +1 -0
- package/lib/components/payments-subscription/subscription-popups/product-confirmation/product-confirmation.component.d.ts +1 -0
- package/lib/components/payments-subscription/subscription-popups/unsubscribe-request/unsubscribe-request.component.d.ts +2 -1
- package/lib/components/payments-subscription/subscription-popups/upgrade-plan/upgrade-plan.component.d.ts +5 -1
- package/lib/services/payment-subscription.service.d.ts +1 -0
- package/lib/tango-manage-settings.module.d.ts +13 -12
- package/package.json +1 -1
|
@@ -722,7 +722,7 @@ class PaymentSubscriptionService {
|
|
|
722
722
|
}
|
|
723
723
|
getProductList(data) {
|
|
724
724
|
return this.http
|
|
725
|
-
.get(`${this.paymentSubscriptionApiUrl}/admin/getProductViewList?clientId=${data}`, {
|
|
725
|
+
.get(`${this.paymentSubscriptionApiUrl}/admin/getProductViewList?clientId=${data.id}&sortColumn=${data.sortColumn}&sortBy=${data.sortBy}`, {
|
|
726
726
|
headers: {
|
|
727
727
|
Authorization: 'Bearer 31b90e5e-451a-4e48-a9e0-8f736b5be0ca'
|
|
728
728
|
}
|
|
@@ -772,6 +772,9 @@ class PaymentSubscriptionService {
|
|
|
772
772
|
return this.http
|
|
773
773
|
.put(`${this.paymentSubscriptionApiUrl}/update/subscription/${data.clientId}`, data, {});
|
|
774
774
|
}
|
|
775
|
+
invoiceDownload(data) {
|
|
776
|
+
return this.http.post(`${this.paymentSubscriptionApiUrl}/invoiceDownload`, data, { responseType: 'arraybuffer' });
|
|
777
|
+
}
|
|
775
778
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentSubscriptionService, deps: [{ token: i1.HttpClient }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
776
779
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentSubscriptionService, providedIn: 'root' });
|
|
777
780
|
}
|
|
@@ -830,7 +833,7 @@ class UpdateComponent {
|
|
|
830
833
|
this.cd.detectChanges();
|
|
831
834
|
}
|
|
832
835
|
closeModal() {
|
|
833
|
-
this.
|
|
836
|
+
this.activeModal.close();
|
|
834
837
|
}
|
|
835
838
|
onSubmit() {
|
|
836
839
|
const requestData = {
|
|
@@ -864,10 +867,7 @@ class NeedHelpComponent {
|
|
|
864
867
|
fb;
|
|
865
868
|
toast;
|
|
866
869
|
clientId;
|
|
867
|
-
|
|
868
|
-
showsubscription = false;
|
|
869
|
-
showExtendTrail = false;
|
|
870
|
-
unsubscriberequest = false;
|
|
870
|
+
status = 'help';
|
|
871
871
|
cancellingdropDown = false;
|
|
872
872
|
trailextenddropDown = false;
|
|
873
873
|
datalist = [];
|
|
@@ -908,7 +908,6 @@ class NeedHelpComponent {
|
|
|
908
908
|
});
|
|
909
909
|
}
|
|
910
910
|
unscubscribed() {
|
|
911
|
-
this.activeModal.close();
|
|
912
911
|
const requestData = {
|
|
913
912
|
clientId: this.clientId,
|
|
914
913
|
reason: this.cancellingIssue,
|
|
@@ -926,7 +925,6 @@ class NeedHelpComponent {
|
|
|
926
925
|
}
|
|
927
926
|
extendtrail() {
|
|
928
927
|
let product = this.trailextenditem.find((item) => item.name == this.trailextendIssue);
|
|
929
|
-
this.activeModal.close();
|
|
930
928
|
const requestData = {
|
|
931
929
|
clientId: this.clientId,
|
|
932
930
|
product: product.value,
|
|
@@ -958,11 +956,11 @@ class NeedHelpComponent {
|
|
|
958
956
|
});
|
|
959
957
|
}
|
|
960
958
|
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 });
|
|
961
|
-
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=\"
|
|
959
|
+
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-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 <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"] }] });
|
|
962
960
|
}
|
|
963
961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NeedHelpComponent, decorators: [{
|
|
964
962
|
type: Component,
|
|
965
|
-
args: [{ selector: 'lib-need-help', template: "<div class=\"modal-content\" *ngIf=\"
|
|
963
|
+
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-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 <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"] }]
|
|
966
964
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: i4$2.ToastService }], propDecorators: { clientId: [{
|
|
967
965
|
type: Input
|
|
968
966
|
}] } });
|
|
@@ -1071,17 +1069,60 @@ class SubscriptionApprovalComponent {
|
|
|
1071
1069
|
this.productList[index].type = type;
|
|
1072
1070
|
}
|
|
1073
1071
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionApprovalComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }, { token: i4$2.ToastService }, { token: PaymentSubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1074
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionApprovalComponent, selector: "lib-subscription-approval", inputs: { products: "products", clientInfo: "clientInfo" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\" *ngFor=\"let product of productList;let i=index\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.productName}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.content === 'trial'\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"product.content === 'trialExpired'\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trial'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trialExpired'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'new'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Start 14\r\n days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">Subscribe\r\n Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModel.close()\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed()\" tabindex=\"0\"\r\n 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 </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"], dependencies: [{ 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1072
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionApprovalComponent, selector: "lib-subscription-approval", inputs: { products: "products", clientInfo: "clientInfo" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder mb-3\" *ngFor=\"let product of productList;let i=index\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.productName}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.content === 'trial'\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"product.content === 'trialExpired'\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trial'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trialExpired'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'new'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Start 14\r\n days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">Subscribe\r\n Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModel.close()\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed()\" tabindex=\"0\"\r\n 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 </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"], dependencies: [{ 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1075
1073
|
}
|
|
1076
1074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionApprovalComponent, decorators: [{
|
|
1077
1075
|
type: Component,
|
|
1078
|
-
args: [{ selector: 'lib-subscription-approval', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\" *ngFor=\"let product of productList;let i=index\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.productName}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.content === 'trial'\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"product.content === 'trialExpired'\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trial'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trialExpired'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'new'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Start 14\r\n days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">Subscribe\r\n Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModel.close()\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed()\" tabindex=\"0\"\r\n 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 </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
|
|
1076
|
+
args: [{ selector: 'lib-subscription-approval', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder mb-3\" *ngFor=\"let product of productList;let i=index\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.productName}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.content === 'trial'\">On Trail\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"product.content === 'trialExpired'\">Trail Expired\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trial'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"continuetrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Continue with Trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"addsubscription\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'trialExpired'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Subscribe Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"dolater\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n\r\n <div class=\"form-group pt-1\" *ngIf=\"product.content === 'new'\">\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'trial')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"daystrail\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\" for=\"inlineRadio1\">Start 14\r\n days Trial</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'subscription')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"subscribenow\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">Subscribe\r\n Now</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" (click)=\"updateProduct(i,'cancel')\">\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"supportRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"later\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\" for=\"inlineRadio1\">I'll do it\r\n later</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModel.close()\">Cancel</button>\r\n <button type=\"button\" (click)=\"suscribed()\" tabindex=\"0\"\r\n 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 </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
|
|
1079
1077
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: i4$2.ToastService }, { type: PaymentSubscriptionService }], propDecorators: { products: [{
|
|
1080
1078
|
type: Input
|
|
1081
1079
|
}], clientInfo: [{
|
|
1082
1080
|
type: Input
|
|
1083
1081
|
}] } });
|
|
1084
1082
|
|
|
1083
|
+
class ModalContentComponent {
|
|
1084
|
+
activeModal;
|
|
1085
|
+
user;
|
|
1086
|
+
width;
|
|
1087
|
+
height;
|
|
1088
|
+
expandDetails = {
|
|
1089
|
+
tangoTraffic: false,
|
|
1090
|
+
tangoZone: false,
|
|
1091
|
+
tangoSop: false,
|
|
1092
|
+
prioritySupport: false,
|
|
1093
|
+
};
|
|
1094
|
+
constructor(activeModal) {
|
|
1095
|
+
this.activeModal = activeModal;
|
|
1096
|
+
}
|
|
1097
|
+
ngOnInit() {
|
|
1098
|
+
this.expandDetails[this.user] = true;
|
|
1099
|
+
}
|
|
1100
|
+
expandPlan(key) {
|
|
1101
|
+
const keys = Object.keys(this.expandDetails);
|
|
1102
|
+
keys.forEach((ele) => {
|
|
1103
|
+
if (key === ele)
|
|
1104
|
+
this.expandDetails[ele] = !this.expandDetails[ele];
|
|
1105
|
+
else
|
|
1106
|
+
this.expandDetails[ele] = false;
|
|
1107
|
+
});
|
|
1108
|
+
}
|
|
1109
|
+
passBack() {
|
|
1110
|
+
this.activeModal.close(this.user);
|
|
1111
|
+
}
|
|
1112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalContentComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
1113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ModalContentComponent, selector: "lib-model-content", inputs: { user: "user", width: "width", height: "height" }, ngImport: i0, template: "<div [style.width]=\"width\" [style.height]=\"height\">\r\n <div class=\"modal-header border-bottom-0\">\r\n <!-- <h4 class=\"modal-title\" id=\"modal-basic-title\">Simple modal</h4> -->\r\n <div class=\"col-12 text-end \">\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary\" data-bs-dismiss=\"modal\">\r\n <i (click)=\"activeModal.dismiss('Cross click')\" class=\"ki-duotone ki-cross fs-1\"><span\r\n class=\"path1\"></span><span class=\"path2\"></span></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-body pt-0\">\r\n <div class=\"row mx-5\">\r\n <div class=\"col-lg-6 col-md-6 col-sm-6 md-offset-3\">\r\n <div class=\"align-items-center border-0 mb-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"main fs-lg-1 text-gray-800 mb-2 \">Product Offerings</span>\r\n </h3>\r\n </div>\r\n <div class=\"\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoTraffic')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoTraffic\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoTraffic\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango Traffic\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoTraffic\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Footfall Analysis.</li>\r\n <li>Bounced vs Engager Analysis</li>\r\n <li>Missed Opportunity Vs Conversion Rate.</li>\r\n <li>Footfall Image Directory by the hour.</li>\r\n <li>Infra tracking ticketing system.</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoZone')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoZone\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoZone\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango Zone\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoZone\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Heatmap Analysis.</li>\r\n <li>Concentration % of each of your zone.</li>\r\n <li>Customer trajectory during their visit to your store.</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoSop')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoSop\"><svg width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoSop\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango SOP\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoSop\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Daily store operation.</li>\r\n <li> Extensive summary of data points like store open and close time.\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('prioritySupport')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.prioritySupport\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.prioritySupport\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Priority Support\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.prioritySupport\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li> 24*7 CCTV monitoring of all the cameras in a single screen.</li>\r\n <li>Live and Recap video option for the entire day.\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-md-6 col-sm-6 \">\r\n <div class=\"card-header\">\r\n <video class=\"video-width\" muted autoplay controls style=\"border-radius: 20px;\">\r\n <source src=\"https://pub-f88985f8e0964d3d8cd7fa6f2dde6962.r2.dev/tango-static-website/main.mp4\"\r\n type=\"video/mp4\">\r\n <!-- https://tango-staticsite.s3.ap-south-1.amazonaws.com/Tango+Eye_720p_with+music_Trim.mp4\" -->\r\n </video>\r\n </div>\r\n <div class=\"card-header align-items-center border-0 mt-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"main fs-lg-1 text-gray-800\">Product Walk-Through</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-header align-items-center border-0 my-2 ms-6\"><span class=\"sub\">We transform your\r\n existing CCTV cameras into a powerful store analytics tool.\r\n Our industry-first Al and computer vision technology help brands identify missed sale\r\n opportunities and focus on improving conversion rates across stores.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sub{color:#7e8299!important;font-weight:500;font-size:15px;line-height:25px}.main{font-weight:600!important;font-size:18px!important;line-height:22px;color:#13263c!important}::ng-deep .modal-content{border-radius:12px!important}@media (min-width: 320px) and (max-width: 1024px){.topbar{margin-top:3rem!important}.w-100{width:92%!important}.testrel{margin-left:4%}.imgsrc{width:48%;margin-top:5%;margin-left:37%}}.video-custom-tag{width:400px;height:400px;border-radius:40px;margin:0 20px}.font{font-family:Inter!important}.ul_style_none ul{list-style:none}.full-width-modal .modal-dialog{max-width:100%;width:100%}.full-width-modal .modal-content{width:100%}.video-width{width:350px}::ng-deep .modal-dialog{display:flex;align-items:center;justify-content:center;min-height:calc(70% - 60px)}::ng-deep .modal-content{max-height:calc(70% - 40px)}@media (min-width: 1920px) and (max-width: 2100px){::ng-deep .modal.show .modal-dialog{transform:none;margin-right:325px!important}::ng-deep .modal-lg,.modal-xl{--bs-modal-width: 1105px}.video-width{width:465px}}.close{position:absolute;right:10px;top:10px;z-index:1;opacity:.5;background-color:transparent;border:none;font-size:1.5rem;line-height:1;padding:.25rem .75rem}.close:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1114
|
+
}
|
|
1115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalContentComponent, decorators: [{
|
|
1116
|
+
type: Component,
|
|
1117
|
+
args: [{ selector: 'lib-model-content', template: "<div [style.width]=\"width\" [style.height]=\"height\">\r\n <div class=\"modal-header border-bottom-0\">\r\n <!-- <h4 class=\"modal-title\" id=\"modal-basic-title\">Simple modal</h4> -->\r\n <div class=\"col-12 text-end \">\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary\" data-bs-dismiss=\"modal\">\r\n <i (click)=\"activeModal.dismiss('Cross click')\" class=\"ki-duotone ki-cross fs-1\"><span\r\n class=\"path1\"></span><span class=\"path2\"></span></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-body pt-0\">\r\n <div class=\"row mx-5\">\r\n <div class=\"col-lg-6 col-md-6 col-sm-6 md-offset-3\">\r\n <div class=\"align-items-center border-0 mb-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"main fs-lg-1 text-gray-800 mb-2 \">Product Offerings</span>\r\n </h3>\r\n </div>\r\n <div class=\"\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoTraffic')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoTraffic\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoTraffic\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango Traffic\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoTraffic\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Footfall Analysis.</li>\r\n <li>Bounced vs Engager Analysis</li>\r\n <li>Missed Opportunity Vs Conversion Rate.</li>\r\n <li>Footfall Image Directory by the hour.</li>\r\n <li>Infra tracking ticketing system.</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoZone')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoZone\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoZone\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango Zone\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoZone\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Heatmap Analysis.</li>\r\n <li>Concentration % of each of your zone.</li>\r\n <li>Customer trajectory during their visit to your store.</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('tangoSop')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.tangoSop\"><svg width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.tangoSop\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Tango SOP\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.tangoSop\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li>Daily store operation.</li>\r\n <li> Extensive summary of data points like store open and close time.\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"m-0\">\r\n <div class=\"d-flex align-items-center collapsible py-3 toggle mb-0\" data-bs-toggle=\"collapse\"\r\n data-bs-target=\"#kt_job_4_1\">\r\n <div class=\"btn btn-sm btn-icon mw-20px btn-active-color-primary me-5\"\r\n (click)=\"expandPlan('prioritySupport')\">\r\n <span class=\"svg-icon svg-icon-primary svg-icon-1\" *ngIf=\"expandDetails.prioritySupport\"><svg\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"6.0104\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n <span class=\"svg-icon svg-icon-1\" *ngIf=\"!expandDetails.prioritySupport\"><svg width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect opacity=\"0.3\" x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" fill=\"currentColor\">\r\n </rect>\r\n <rect x=\"10.8891\" y=\"17.8033\" width=\"12\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(-90 10.8891 17.8033)\" fill=\"currentColor\"></rect>\r\n <rect x=\"6.01041\" y=\"10.9247\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n <h4 class=\"text-gray-700 fw-bold cursor-pointer mb-0\">\r\n Priority Support\r\n </h4>\r\n </div>\r\n <div id=\"kt_job_4_1\" class=\"collapse show fs-6 ms-1\" *ngIf=\"expandDetails.prioritySupport\">\r\n <div class=\"mb-4 text-gray-700 sub\">\r\n <ul>\r\n <li> 24*7 CCTV monitoring of all the cameras in a single screen.</li>\r\n <li>Live and Recap video option for the entire day.\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-md-6 col-sm-6 \">\r\n <div class=\"card-header\">\r\n <video class=\"video-width\" muted autoplay controls style=\"border-radius: 20px;\">\r\n <source src=\"https://pub-f88985f8e0964d3d8cd7fa6f2dde6962.r2.dev/tango-static-website/main.mp4\"\r\n type=\"video/mp4\">\r\n <!-- https://tango-staticsite.s3.ap-south-1.amazonaws.com/Tango+Eye_720p_with+music_Trim.mp4\" -->\r\n </video>\r\n </div>\r\n <div class=\"card-header align-items-center border-0 mt-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"main fs-lg-1 text-gray-800\">Product Walk-Through</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-header align-items-center border-0 my-2 ms-6\"><span class=\"sub\">We transform your\r\n existing CCTV cameras into a powerful store analytics tool.\r\n Our industry-first Al and computer vision technology help brands identify missed sale\r\n opportunities and focus on improving conversion rates across stores.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".sub{color:#7e8299!important;font-weight:500;font-size:15px;line-height:25px}.main{font-weight:600!important;font-size:18px!important;line-height:22px;color:#13263c!important}::ng-deep .modal-content{border-radius:12px!important}@media (min-width: 320px) and (max-width: 1024px){.topbar{margin-top:3rem!important}.w-100{width:92%!important}.testrel{margin-left:4%}.imgsrc{width:48%;margin-top:5%;margin-left:37%}}.video-custom-tag{width:400px;height:400px;border-radius:40px;margin:0 20px}.font{font-family:Inter!important}.ul_style_none ul{list-style:none}.full-width-modal .modal-dialog{max-width:100%;width:100%}.full-width-modal .modal-content{width:100%}.video-width{width:350px}::ng-deep .modal-dialog{display:flex;align-items:center;justify-content:center;min-height:calc(70% - 60px)}::ng-deep .modal-content{max-height:calc(70% - 40px)}@media (min-width: 1920px) and (max-width: 2100px){::ng-deep .modal.show .modal-dialog{transform:none;margin-right:325px!important}::ng-deep .modal-lg,.modal-xl{--bs-modal-width: 1105px}.video-width{width:465px}}.close{position:absolute;right:10px;top:10px;z-index:1;opacity:.5;background-color:transparent;border:none;font-size:1.5rem;line-height:1;padding:.25rem .75rem}.close:hover{opacity:1}\n"] }]
|
|
1118
|
+
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }], propDecorators: { user: [{
|
|
1119
|
+
type: Input
|
|
1120
|
+
}], width: [{
|
|
1121
|
+
type: Input
|
|
1122
|
+
}], height: [{
|
|
1123
|
+
type: Input
|
|
1124
|
+
}] } });
|
|
1125
|
+
|
|
1085
1126
|
class UpgradePlanComponent {
|
|
1086
1127
|
modalService;
|
|
1087
1128
|
activeModel;
|
|
@@ -1106,6 +1147,8 @@ class UpgradePlanComponent {
|
|
|
1106
1147
|
originalPrice = 0;
|
|
1107
1148
|
oldProducts;
|
|
1108
1149
|
disableBtn = true;
|
|
1150
|
+
trialproducts = [];
|
|
1151
|
+
expiredProducts = [];
|
|
1109
1152
|
destroy$ = new Subject();
|
|
1110
1153
|
constructor(modalService, activeModel, toast, PaymentSubscriptionService, changeDetector) {
|
|
1111
1154
|
this.modalService = modalService;
|
|
@@ -1131,8 +1174,9 @@ class UpgradePlanComponent {
|
|
|
1131
1174
|
});
|
|
1132
1175
|
modalRef.componentInstance.modalData = {
|
|
1133
1176
|
brandName: this.clientInfo?.clientName,
|
|
1134
|
-
gstNumber: this.clientInfo?.
|
|
1135
|
-
billingAddress: this.clientInfo?.
|
|
1177
|
+
gstNumber: this.clientInfo?.billingDetails?.gstNumber || '',
|
|
1178
|
+
billingAddress: this.clientInfo?.billingDetails?.billingAddress || '',
|
|
1179
|
+
clientId: this.clientInfo?.clientId
|
|
1136
1180
|
};
|
|
1137
1181
|
modalRef.result.then((result) => {
|
|
1138
1182
|
if (result) {
|
|
@@ -1162,16 +1206,24 @@ class UpgradePlanComponent {
|
|
|
1162
1206
|
}
|
|
1163
1207
|
noofstoresDropdown(event) {
|
|
1164
1208
|
event.stopPropagation();
|
|
1209
|
+
this.AvgstoresdropDown = false;
|
|
1165
1210
|
this.noofstoresdropDown = !this.noofstoresdropDown;
|
|
1166
1211
|
}
|
|
1167
1212
|
AvgstoresDropdown(event) {
|
|
1168
1213
|
event.stopPropagation();
|
|
1214
|
+
this.noofstoresdropDown = false;
|
|
1169
1215
|
this.AvgstoresdropDown = !this.AvgstoresdropDown;
|
|
1170
1216
|
}
|
|
1171
1217
|
updatesubscription(id) {
|
|
1172
1218
|
this.PaymentSubscriptionService.clientBillingInfo(id).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1173
1219
|
if (res && res.code == 200) {
|
|
1174
1220
|
this.clientInfo = res.data;
|
|
1221
|
+
if (this.clientInfo?.currentPlanInfo?.trialProducts) {
|
|
1222
|
+
this.trialproducts = this.clientInfo.currentPlanInfo.trialProducts.map((item) => item.productName);
|
|
1223
|
+
}
|
|
1224
|
+
if (this.clientInfo?.currentPlanInfo?.expiredProducts) {
|
|
1225
|
+
this.expiredProducts = this.clientInfo.currentPlanInfo.expiredProducts.map((item) => item.productName);
|
|
1226
|
+
}
|
|
1175
1227
|
this.oldProducts = JSON.parse(JSON.stringify(this.clientInfo.currentPlanInfo.product));
|
|
1176
1228
|
this.basePricing();
|
|
1177
1229
|
this.changeDetector.detectChanges();
|
|
@@ -1233,20 +1285,33 @@ class UpgradePlanComponent {
|
|
|
1233
1285
|
}
|
|
1234
1286
|
getColorClass(toolTip) {
|
|
1235
1287
|
switch (toolTip) {
|
|
1236
|
-
case 'Subscribed': return 'badge badge-light-success mx-
|
|
1237
|
-
case 'Trial Expired': return 'badge badge-light-warning mx-
|
|
1238
|
-
case 'On Trial': return 'badge badge-light-primary mx-
|
|
1288
|
+
case 'Subscribed': return 'badge badge-light-success mx-4';
|
|
1289
|
+
case 'Trial Expired': return 'badge badge-light-warning mx-4';
|
|
1290
|
+
case 'On Trial': return 'badge badge-light-primary mx-4';
|
|
1239
1291
|
default: return '';
|
|
1240
1292
|
}
|
|
1241
1293
|
}
|
|
1294
|
+
onDocumentClick(event) {
|
|
1295
|
+
this.AvgstoresdropDown = false;
|
|
1296
|
+
this.noofstoresdropDown = false;
|
|
1297
|
+
}
|
|
1298
|
+
showInfo(data) {
|
|
1299
|
+
const modalRef = this.modalService.open(ModalContentComponent, {
|
|
1300
|
+
centered: true, size: 'lg', scrollable: true,
|
|
1301
|
+
});
|
|
1302
|
+
modalRef.componentInstance.user = data;
|
|
1303
|
+
}
|
|
1242
1304
|
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 });
|
|
1243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UpgradePlanComponent, selector: "lib-upgrade-plan", inputs: { clientId: "clientId" }, 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]}}</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-4\">\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}}\r\n </span>\r\n </label>\r\n </div>\r\n <span class=\"view\">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:500;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:38%}.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}.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"] }] });
|
|
1305
|
+
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"] }] });
|
|
1244
1306
|
}
|
|
1245
1307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UpgradePlanComponent, decorators: [{
|
|
1246
1308
|
type: Component,
|
|
1247
|
-
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]}}</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-4\">\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}}\r\n </span>\r\n </label>\r\n </div>\r\n <span class=\"view\">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:500;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:38%}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"] }]
|
|
1309
|
+
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"] }]
|
|
1248
1310
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: i4$2.ToastService }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }], propDecorators: { clientId: [{
|
|
1249
1311
|
type: Input
|
|
1312
|
+
}], onDocumentClick: [{
|
|
1313
|
+
type: HostListener,
|
|
1314
|
+
args: ['document:click', ['$event']]
|
|
1250
1315
|
}] } });
|
|
1251
1316
|
|
|
1252
1317
|
class CreditNoteComponent {
|
|
@@ -1273,9 +1338,9 @@ class CreditNoteComponent {
|
|
|
1273
1338
|
this.changeDetector = changeDetector;
|
|
1274
1339
|
this.fb = fb;
|
|
1275
1340
|
this.toast = toast;
|
|
1276
|
-
this.creditnote();
|
|
1277
1341
|
}
|
|
1278
1342
|
ngOnInit() {
|
|
1343
|
+
this.creditnote();
|
|
1279
1344
|
this.creditnoteform = this.fb.group({
|
|
1280
1345
|
invoicetype: ['', Validators.required],
|
|
1281
1346
|
totalAmount: ['', Validators.required],
|
|
@@ -1286,7 +1351,7 @@ class CreditNoteComponent {
|
|
|
1286
1351
|
if (e) {
|
|
1287
1352
|
this.totalAmount = this.creditnoteform.get('totalAmount')?.value;
|
|
1288
1353
|
this.discount = ((this.totalAmount - e) / this.totalAmount * 100).toFixed(2);
|
|
1289
|
-
if (this.discount > 10) {
|
|
1354
|
+
if (this.discount > 10 || isNaN(e)) {
|
|
1290
1355
|
this.moreThanTenPercent = true;
|
|
1291
1356
|
}
|
|
1292
1357
|
else {
|
|
@@ -1311,7 +1376,7 @@ class CreditNoteComponent {
|
|
|
1311
1376
|
this.revisedAmount = this.totalAmount * (1 - e / 100);
|
|
1312
1377
|
this.revisedAmount = parseInt(this.revisedAmount.toFixed());
|
|
1313
1378
|
this.discount = e;
|
|
1314
|
-
if (this.discount > 10) {
|
|
1379
|
+
if (this.discount > 10 || isNaN(e)) {
|
|
1315
1380
|
this.moreThanTenPercent = true;
|
|
1316
1381
|
}
|
|
1317
1382
|
else {
|
|
@@ -1338,13 +1403,7 @@ class CreditNoteComponent {
|
|
|
1338
1403
|
this.destroy$.complete();
|
|
1339
1404
|
}
|
|
1340
1405
|
creditnote() {
|
|
1341
|
-
|
|
1342
|
-
limit: 10,
|
|
1343
|
-
offset: 0,
|
|
1344
|
-
filter: "last",
|
|
1345
|
-
clientId: this.clientId
|
|
1346
|
-
};
|
|
1347
|
-
this.PaymentSubscriptionService.getinvoice(filters).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1406
|
+
this.PaymentSubscriptionService.getinvoice(this.clientId).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1348
1407
|
if (res && res.code == 200) {
|
|
1349
1408
|
this.invoiceitem = res?.data;
|
|
1350
1409
|
this.invoiceIssue = this.invoiceitem[0]?.invoice;
|
|
@@ -1380,24 +1439,30 @@ class CreditNoteComponent {
|
|
|
1380
1439
|
};
|
|
1381
1440
|
this.PaymentSubscriptionService.creditnoteupdate(requestData).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
1382
1441
|
if (res && res.code == 200) {
|
|
1383
|
-
this.
|
|
1442
|
+
this.activeModal.close('successcredit');
|
|
1443
|
+
// this.toast.getPrimaryToast(res.message);
|
|
1384
1444
|
this.changeDetector.detectChanges();
|
|
1385
1445
|
}
|
|
1386
1446
|
}, (error) => {
|
|
1387
1447
|
console.error('Error submitting update:', error);
|
|
1388
1448
|
});
|
|
1389
|
-
|
|
1449
|
+
}
|
|
1450
|
+
onDocumentClick(event) {
|
|
1451
|
+
this.invoicetypedropDown = false;
|
|
1390
1452
|
}
|
|
1391
1453
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreditNoteComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: i4$2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CreditNoteComponent, selector: "lib-credit-note", inputs: { clientId: "clientId" }, outputs: { passEntry: "passEntry" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-5 px-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n <div class=\"contenttext mt-4\">\r\n You have the flexibility to select a month in which the brand can make credit payments.\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body mb-8\">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"form-group py-2\">\r\n <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n (click)=\"invoicetypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n <div *ngIf=\"invoicetypedropDown\"\r\n class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of invoiceitem\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceIssue == item?.invoice ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(item)\">\r\n {{item?.invoice}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div for=\"totalAmount\" class=\"form-group py-2\">\r\n <label class=\" headingtext mb-2 \">Total Amount</label>\r\n <div class=\"input-group\">\r\n <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n style=\"text-transform: capitalize;\"></div>\r\n\r\n </div>\r\n <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n <div class=\"input-group dropselect\">\r\n <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n style=\"text-transform: capitalize;\">\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7513_36689)\">\r\n <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.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\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7513_36689\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n </div>\r\n <div for=\"discount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Discount</label>\r\n <div class=\"input-group\"> <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\">\r\n <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n \r\n </div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">In percentage</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-5\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Apply </span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}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)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}\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.ɵ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"] }] });
|
|
1454
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CreditNoteComponent, selector: "lib-credit-note", inputs: { clientId: "clientId" }, outputs: { passEntry: "passEntry" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-5 px-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n <div class=\"contenttext mt-4\">\r\n You have the flexibility to select a month in which the brand can make credit payments.\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body mb-8\">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"form-group py-2\">\r\n <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n (click)=\"invoicetypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n <div *ngIf=\"invoicetypedropDown\"\r\n class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of invoiceitem\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(item)\">\r\n {{item?.invoice}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div for=\"totalAmount\" class=\"form-group py-2\">\r\n <label class=\" headingtext mb-2 \">Total Amount</label>\r\n <div class=\"input-group\">\r\n <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n style=\"text-transform: capitalize;\"></div>\r\n\r\n </div>\r\n <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n <div class=\"input-group dropselect\">\r\n <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n style=\"text-transform: capitalize;\">\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7513_36689)\">\r\n <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.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\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7513_36689\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n </div>\r\n <div for=\"discount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Discount</label>\r\n <div class=\"input-group\"> <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n \r\n </div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">In percentage</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-5\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Apply </span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}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)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}\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.ɵ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"] }] });
|
|
1393
1455
|
}
|
|
1394
1456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreditNoteComponent, decorators: [{
|
|
1395
1457
|
type: Component,
|
|
1396
|
-
args: [{ selector: 'lib-credit-note', template: "<div class=\"modal-content\">\r\n <div class=\"p-5 px-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n <div class=\"contenttext mt-4\">\r\n You have the flexibility to select a month in which the brand can make credit payments.\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body mb-8\">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"form-group py-2\">\r\n <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n (click)=\"invoicetypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n <div *ngIf=\"invoicetypedropDown\"\r\n class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of invoiceitem\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceIssue
|
|
1458
|
+
args: [{ selector: 'lib-credit-note', template: "<div class=\"modal-content\">\r\n <div class=\"p-5 px-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n <div class=\"contenttext mt-4\">\r\n You have the flexibility to select a month in which the brand can make credit payments.\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body mb-8\">\r\n <!--begin::Form-->\r\n <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div class=\"form-group py-2\">\r\n <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n <div class=\"position-relative\">\r\n <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n (click)=\"invoicetypeDropdown($event)\"\r\n aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n <div *ngIf=\"invoicetypedropDown\"\r\n class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let item of invoiceitem\"\r\n class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n class=\"producttext px-5 items cursor-pointer py-4\"\r\n (click)=\"invoiceItem(item)\">\r\n {{item?.invoice}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div for=\"totalAmount\" class=\"form-group py-2\">\r\n <label class=\" headingtext mb-2 \">Total Amount</label>\r\n <div class=\"input-group\">\r\n <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n style=\"text-transform: capitalize;\"></div>\r\n\r\n </div>\r\n <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n <div class=\"input-group dropselect\">\r\n <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n style=\"text-transform: capitalize;\">\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7513_36689)\">\r\n <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.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\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7513_36689\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n </div>\r\n <div for=\"discount\" class=\"form-group mt-2\">\r\n <div class=\"py-2\">\r\n <label class=\" headingtext mb-2\"> Discount</label>\r\n <div class=\"input-group\"> <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n \r\n </div>\r\n </div>\r\n <span *ngIf=\"!moreThanTenPercent\" class=\"headingtext contenttext\">In percentage</span>\r\n <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-5\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">Apply </span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}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)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}\n"] }]
|
|
1397
1459
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: i4$2.ToastService }], propDecorators: { clientId: [{
|
|
1398
1460
|
type: Input
|
|
1399
1461
|
}], passEntry: [{
|
|
1400
1462
|
type: Output
|
|
1463
|
+
}], onDocumentClick: [{
|
|
1464
|
+
type: HostListener,
|
|
1465
|
+
args: ['document:click', ['$event']]
|
|
1401
1466
|
}] } });
|
|
1402
1467
|
|
|
1403
1468
|
class PricingRevisedComponent {
|
|
@@ -1426,12 +1491,17 @@ class PricingRevisedComponent {
|
|
|
1426
1491
|
revised() {
|
|
1427
1492
|
this.activeModal.close('save');
|
|
1428
1493
|
}
|
|
1494
|
+
convertUpper(data) {
|
|
1495
|
+
let [firstWord, secondWord] = data.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
|
|
1496
|
+
firstWord = firstWord.charAt(0).toUpperCase() + firstWord.slice(1);
|
|
1497
|
+
return firstWord + ' ' + secondWord;
|
|
1498
|
+
}
|
|
1429
1499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PricingRevisedComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
1430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PricingRevisedComponent, selector: "lib-pricing-revised", inputs: { productNewDetails: "productNewDetails", productOldDetails: "productOldDetails" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Pricing has been revised</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please Confirm to proceed\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <table class=\"w-100\">\r\n <tr>\r\n <th>Product</th>\r\n <th>Description</th>\r\n <th>Current Data</th>\r\n <th class=\"reviseddata\">Revised Data</th>\r\n </tr>\r\n \r\n <tbody>\r\n <ng-container *ngFor=\"let item of productNewDetails.product\">\r\n <tr>\r\n <
|
|
1500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PricingRevisedComponent, selector: "lib-pricing-revised", inputs: { productNewDetails: "productNewDetails", productOldDetails: "productOldDetails" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Pricing has been revised</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please Confirm to proceed\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <table class=\"w-100\">\r\n <tr >\r\n <th class=\"thheader\">Product</th>\r\n <th class=\"thheader\">Description</th>\r\n <th class=\"thheader\">Current Data</th>\r\n <th class=\"reviseddata\">Revised Data</th>\r\n </tr>\r\n \r\n <tbody>\r\n <ng-container *ngFor=\"let item of productNewDetails.product\">\r\n <tr>\r\n <th class=\"productprice\" rowspan=\"2\">\r\n {{convertUpper(item.productName)}}\r\n </th>\r\n <th class=\"totalproduct\">Stores</th>\r\n <td>{{item.oldStoreCount}}</td>\r\n <td class=\"bolddata\">{{item.storeCount}}</td>\r\n </tr>\r\n <tr>\r\n <!-- <td class=\"bolddata\">$200000</td> -->\r\n <th class=\"totalproduct\">Price</th>\r\n <td>\u20B9{{item.oldPrice}}</td>\r\n <td class=\"bolddata\">\u20B9{{item.price}}</td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n\r\n \r\n <div class=\"mt-4 w-100\"></div>\r\n\r\n <tr>\r\n <th class=\"totalsubproduct\">Sub Total</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>\u20B9{{productOldDetails.totalNegotiatePrice}}</td>\r\n <td class=\"bolddata\">\u20B9{{productNewDetails.totalNegotiatePrice}}</td>\r\n </tr >\r\n <tr>\r\n <th class=\"totalsubproduct\">Tax</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>18%</td>\r\n <td class=\"bolddata\">18%</td>\r\n </tr>\r\n <tr>\r\n <th class=\"totalsubproduct\">Discount</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>{{productOldDetails.discountPercentage}}%</td>\r\n <td class=\"bolddata\">{{productNewDetails.discountPercentage}}%</td>\r\n </tr>\r\n <tr>\r\n <th class=\"totalsubproduct\">Total Amount</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>\u20B9{{productOldDetails.finalValue}}</td>\r\n <td class=\"bolddata\">\u20B9{{productNewDetails.finalValue}}</td>\r\n </tr>\r\n </table>\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end mt-6\"><a type=\"submit\" (click)=\"activeModal.close()\"\r\n class=\"btn-outline btn cancel me-4\">Cancel</a><a \r\n type=\"button\" tabindex=\"0\" (click)=\"revised()\"\r\n class=\"btn btn-primary px-4 ng-star-inserted cancel text-nowrap\"\r\n >Send\r\n </a></div>\r\n\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;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}td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:#fff!important;color:var(--Gray-600, #475467)!important;font-size:16px!important;font-weight:500!important;line-height:24px}th{width:20%}.bolddata{font-weight:700!important}.reviseddata{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:700!important;line-height:24px}.cancel{width:20%}.thheader{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:500;line-height:24px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.productprice{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:500!important;line-height:24px}.totalproduct{color:var(--Gray-600, #475467)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px;border-right:1px solid var(--Gray-200, #EAECF0)}.totalsubproduct{color:var(--Gray-600, #475467)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.subproductborder{border-right:1px solid var(--Gray-200, #EAECF0)!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1431
1501
|
}
|
|
1432
1502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PricingRevisedComponent, decorators: [{
|
|
1433
1503
|
type: Component,
|
|
1434
|
-
args: [{ selector: 'lib-pricing-revised', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Pricing has been revised</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please Confirm to proceed\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <table class=\"w-100\">\r\n <tr>\r\n <th>Product</th>\r\n <th>Description</th>\r\n <th>Current Data</th>\r\n <th class=\"reviseddata\">Revised Data</th>\r\n </tr>\r\n \r\n <tbody>\r\n <ng-container *ngFor=\"let item of productNewDetails.product\">\r\n <tr>\r\n <
|
|
1504
|
+
args: [{ selector: 'lib-pricing-revised', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Pricing has been revised</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please Confirm to proceed\r\n </div>\r\n </div>\r\n <div class=\"modal-body \">\r\n <table class=\"w-100\">\r\n <tr >\r\n <th class=\"thheader\">Product</th>\r\n <th class=\"thheader\">Description</th>\r\n <th class=\"thheader\">Current Data</th>\r\n <th class=\"reviseddata\">Revised Data</th>\r\n </tr>\r\n \r\n <tbody>\r\n <ng-container *ngFor=\"let item of productNewDetails.product\">\r\n <tr>\r\n <th class=\"productprice\" rowspan=\"2\">\r\n {{convertUpper(item.productName)}}\r\n </th>\r\n <th class=\"totalproduct\">Stores</th>\r\n <td>{{item.oldStoreCount}}</td>\r\n <td class=\"bolddata\">{{item.storeCount}}</td>\r\n </tr>\r\n <tr>\r\n <!-- <td class=\"bolddata\">$200000</td> -->\r\n <th class=\"totalproduct\">Price</th>\r\n <td>\u20B9{{item.oldPrice}}</td>\r\n <td class=\"bolddata\">\u20B9{{item.price}}</td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n\r\n \r\n <div class=\"mt-4 w-100\"></div>\r\n\r\n <tr>\r\n <th class=\"totalsubproduct\">Sub Total</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>\u20B9{{productOldDetails.totalNegotiatePrice}}</td>\r\n <td class=\"bolddata\">\u20B9{{productNewDetails.totalNegotiatePrice}}</td>\r\n </tr >\r\n <tr>\r\n <th class=\"totalsubproduct\">Tax</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>18%</td>\r\n <td class=\"bolddata\">18%</td>\r\n </tr>\r\n <tr>\r\n <th class=\"totalsubproduct\">Discount</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>{{productOldDetails.discountPercentage}}%</td>\r\n <td class=\"bolddata\">{{productNewDetails.discountPercentage}}%</td>\r\n </tr>\r\n <tr>\r\n <th class=\"totalsubproduct\">Total Amount</th>\r\n <th class=\"subproductborder\"></th>\r\n <td>\u20B9{{productOldDetails.finalValue}}</td>\r\n <td class=\"bolddata\">\u20B9{{productNewDetails.finalValue}}</td>\r\n </tr>\r\n </table>\r\n <div data-kt-subscription-table-toolbar=\"base\"\r\n class=\"d-flex justify-content-end mt-6\"><a type=\"submit\" (click)=\"activeModal.close()\"\r\n class=\"btn-outline btn cancel me-4\">Cancel</a><a \r\n type=\"button\" tabindex=\"0\" (click)=\"revised()\"\r\n class=\"btn btn-primary px-4 ng-star-inserted cancel text-nowrap\"\r\n >Send\r\n </a></div>\r\n\r\n \r\n </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;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}td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:#fff!important;color:var(--Gray-600, #475467)!important;font-size:16px!important;font-weight:500!important;line-height:24px}th{width:20%}.bolddata{font-weight:700!important}.reviseddata{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:700!important;line-height:24px}.cancel{width:20%}.thheader{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:500;line-height:24px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.productprice{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:500!important;line-height:24px}.totalproduct{color:var(--Gray-600, #475467)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px;border-right:1px solid var(--Gray-200, #EAECF0)}.totalsubproduct{color:var(--Gray-600, #475467)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.subproductborder{border-right:1px solid var(--Gray-200, #EAECF0)!important}\n"] }]
|
|
1435
1505
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }], propDecorators: { productNewDetails: [{
|
|
1436
1506
|
type: Input
|
|
1437
1507
|
}], productOldDetails: [{
|
|
@@ -1470,11 +1540,11 @@ class AddSteppriceComponent {
|
|
|
1470
1540
|
this.activeModal.close(data);
|
|
1471
1541
|
}
|
|
1472
1542
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddSteppriceComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i1$2.NgbModal }, { token: PaymentSubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1473
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddSteppriceComponent, selector: "lib-add-stepprice", inputs: { steppricetitle: "steppricetitle", steppriceicon: "steppriceicon", steppricedescription: "steppricedescription", steppricebutton: "steppricebutton" }, ngImport: i0, template: "<div class=\"modal-content\" *ngIf=\"steppricetitle !== 'delete'\">\r\n <div class=\"p-6\">\r\n <div><img src={{steppriceicon}} alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">{{steppricetitle}}</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=\"text-sub mb-6\">{{steppricedescription}}</label>\r\n <label class=\" producttext mb-2\">Store Interval</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"storeintervalDropdown($event)\"\r\n aria-label=\"Default select example\">{{storeintervalIssue}}</div>\r\n <div *ngIf=\"storeintervaldropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let storeintervalitem of storeintervaltype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.storeintervalIssue === storeintervalitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"storeintervalItem(storeintervalitem)\">{{storeintervalitem}}</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-7 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">{{steppricebutton}}</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"steppricetitle === 'delete'\">\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\">Delete Step Column</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\">Are you sure you want to delete the column</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\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</span></button>\r\n </div>\r\n</div>\r\n</div>", 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}.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"] }] });
|
|
1543
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddSteppriceComponent, selector: "lib-add-stepprice", inputs: { steppricetitle: "steppricetitle", steppriceicon: "steppriceicon", steppricedescription: "steppricedescription", steppricebutton: "steppricebutton" }, ngImport: i0, template: "<div class=\"modal-content\" *ngIf=\"steppricetitle !== 'delete'\">\r\n <div class=\"p-6\">\r\n <div><img src={{steppriceicon}} alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">{{steppricetitle}}</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=\"text-sub mb-6\">{{steppricedescription}}</label>\r\n <label class=\" producttext mb-2\">Store Interval</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"storeintervalDropdown($event)\"\r\n aria-label=\"Default select example\">{{storeintervalIssue}}</div>\r\n <div *ngIf=\"storeintervaldropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let storeintervalitem of storeintervaltype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.storeintervalIssue === storeintervalitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"storeintervalItem(storeintervalitem)\">{{storeintervalitem}}</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-7 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">{{steppricebutton}}</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"steppricetitle === 'delete'\">\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\">Delete Step Column</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\">Are you sure you want to delete the column</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\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</span></button>\r\n </div>\r\n</div>\r\n</div>", 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}\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"] }] });
|
|
1474
1544
|
}
|
|
1475
1545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddSteppriceComponent, decorators: [{
|
|
1476
1546
|
type: Component,
|
|
1477
|
-
args: [{ selector: 'lib-add-stepprice', template: "<div class=\"modal-content\" *ngIf=\"steppricetitle !== 'delete'\">\r\n <div class=\"p-6\">\r\n <div><img src={{steppriceicon}} alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">{{steppricetitle}}</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=\"text-sub mb-6\">{{steppricedescription}}</label>\r\n <label class=\" producttext mb-2\">Store Interval</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"storeintervalDropdown($event)\"\r\n aria-label=\"Default select example\">{{storeintervalIssue}}</div>\r\n <div *ngIf=\"storeintervaldropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let storeintervalitem of storeintervaltype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.storeintervalIssue === storeintervalitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"storeintervalItem(storeintervalitem)\">{{storeintervalitem}}</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-7 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">{{steppricebutton}}</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"steppricetitle === 'delete'\">\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\">Delete Step Column</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\">Are you sure you want to delete the column</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\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</span></button>\r\n </div>\r\n</div>\r\n</div>", 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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}\n"] }]
|
|
1547
|
+
args: [{ selector: 'lib-add-stepprice', template: "<div class=\"modal-content\" *ngIf=\"steppricetitle !== 'delete'\">\r\n <div class=\"p-6\">\r\n <div><img src={{steppriceicon}} alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">{{steppricetitle}}</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=\"text-sub mb-6\">{{steppricedescription}}</label>\r\n <label class=\" producttext mb-2\">Store Interval</label>\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"storeintervalDropdown($event)\"\r\n aria-label=\"Default select example\">{{storeintervalIssue}}</div>\r\n <div *ngIf=\"storeintervaldropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n <ul *ngFor=\"let storeintervalitem of storeintervaltype\" class=\"list-unstyled mb-2\">\r\n <li [ngClass]=\"this.storeintervalIssue === storeintervalitem ? 'active' : ''\" class=\"producttext px-5 items cursor-pointer py-4\" (click)=\"storeintervalItem(storeintervalitem)\">{{storeintervalitem}}</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-7 py-3\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\r\n tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n class=\"submit\">{{steppricebutton}}</span></button>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"modal-content\" *ngIf=\"steppricetitle === 'delete'\">\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\">Delete Step Column</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\">Are you sure you want to delete the column</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"addedstepprice()\"\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</span></button>\r\n </div>\r\n</div>\r\n</div>", 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}\n"] }]
|
|
1478
1548
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$2.NgbModal }, { type: PaymentSubscriptionService }], propDecorators: { steppricetitle: [{
|
|
1479
1549
|
type: Input
|
|
1480
1550
|
}], steppriceicon: [{
|
|
@@ -1522,10 +1592,14 @@ class TrailSettingsComponent {
|
|
|
1522
1592
|
this.activeModal = activeModal;
|
|
1523
1593
|
}
|
|
1524
1594
|
decreseCount() {
|
|
1525
|
-
this.count
|
|
1595
|
+
if (this.count != 1) {
|
|
1596
|
+
this.count -= 1;
|
|
1597
|
+
}
|
|
1526
1598
|
}
|
|
1527
1599
|
increaseCount() {
|
|
1528
|
-
this.count
|
|
1600
|
+
if (this.count < 14) {
|
|
1601
|
+
this.count += 1;
|
|
1602
|
+
}
|
|
1529
1603
|
}
|
|
1530
1604
|
trailextended() {
|
|
1531
1605
|
let data = {
|
|
@@ -1551,6 +1625,7 @@ class UnsubscribeRequestComponent {
|
|
|
1551
1625
|
activeModal;
|
|
1552
1626
|
modalService;
|
|
1553
1627
|
PaymentSubscriptionService;
|
|
1628
|
+
clientName = '';
|
|
1554
1629
|
constructor(activeModal, modalService, PaymentSubscriptionService) {
|
|
1555
1630
|
this.activeModal = activeModal;
|
|
1556
1631
|
this.modalService = modalService;
|
|
@@ -1560,12 +1635,14 @@ class UnsubscribeRequestComponent {
|
|
|
1560
1635
|
this.activeModal.close('unsubscribed');
|
|
1561
1636
|
}
|
|
1562
1637
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnsubscribeRequestComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i1$2.NgbModal }, { token: PaymentSubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnsubscribeRequestComponent, selector: "lib-unsubscribe-request", ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"
|
|
1638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: UnsubscribeRequestComponent, selector: "lib-unsubscribe-request", inputs: { clientName: "clientName" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"mt-4 mx-5\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Unsubscribe {{clientName}}</div>\r\n </div>\r\n<div class=\"px-6 py-6\">\r\n <div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"semi mb-4\">Are you sure you want to unsubscribe {{clientName}}</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel needhelp me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"unsubscribed()\"\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, Unsubscribe</span></button>\r\n </div>\r\n</div>\r\n</div>", styles: [".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}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.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}\n"] });
|
|
1564
1639
|
}
|
|
1565
1640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: UnsubscribeRequestComponent, decorators: [{
|
|
1566
1641
|
type: Component,
|
|
1567
|
-
args: [{ selector: 'lib-unsubscribe-request', template: "<div class=\"modal-content\">\r\n <div class=\"
|
|
1568
|
-
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$2.NgbModal }, { type: PaymentSubscriptionService }]
|
|
1642
|
+
args: [{ selector: 'lib-unsubscribe-request', template: "<div class=\"modal-content\">\r\n <div class=\"mt-4 mx-5\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/alert-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Unsubscribe {{clientName}}</div>\r\n </div>\r\n<div class=\"px-6 py-6\">\r\n <div>\r\n <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n <div>\r\n <label class=\"semi mb-4\">Are you sure you want to unsubscribe {{clientName}}</label>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 py-1\">\r\n <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n class=\"btn-outline btn cancel needhelp me-4 w-50\">No</button>\r\n <button type=\"button\" (click)=\"unsubscribed()\"\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, Unsubscribe</span></button>\r\n </div>\r\n</div>\r\n</div>", styles: [".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}.semi{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:400;line-height:20px}.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}\n"] }]
|
|
1643
|
+
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$2.NgbModal }, { type: PaymentSubscriptionService }], propDecorators: { clientName: [{
|
|
1644
|
+
type: Input
|
|
1645
|
+
}] } });
|
|
1569
1646
|
|
|
1570
1647
|
class ProductConfirmationComponent {
|
|
1571
1648
|
modalService;
|
|
@@ -1675,12 +1752,21 @@ class ProductConfirmationComponent {
|
|
|
1675
1752
|
}
|
|
1676
1753
|
});
|
|
1677
1754
|
}
|
|
1755
|
+
convertUpper(data) {
|
|
1756
|
+
let products = data.split(',');
|
|
1757
|
+
products.forEach((item, index) => {
|
|
1758
|
+
let [firstWord, secondWord] = item.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
|
|
1759
|
+
firstWord = firstWord.charAt(0).toUpperCase() + firstWord.slice(1);
|
|
1760
|
+
products[index] = firstWord + ' ' + secondWord;
|
|
1761
|
+
});
|
|
1762
|
+
return products.join(',');
|
|
1763
|
+
}
|
|
1678
1764
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductConfirmationComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }, { token: i4$2.ToastService }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1679
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ProductConfirmationComponent, selector: "lib-product-confirmation", inputs: { productList: "productList", updatedProduct: "updatedProduct", type: "type", stores: "stores", clientId: "clientId", clientProduct: "clientProduct" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\" *ngFor=\"let product of products;let i=index;\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.name}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.new\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"!product.new\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"trial\" (click)=\"updateType(i,'trial')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"subscription\" (click)=\"updateType(i,'subscription')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"!product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"unsubscribe\" (click)=\"updateType(i,'unsubscribe')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"cancel\" (click)=\"updateType(i,'cancel')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModal.close()\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\" (click)=\"type === 'products' ? updateproduct() : updateStore()\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1765
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ProductConfirmationComponent, selector: "lib-product-confirmation", inputs: { productList: "productList", updatedProduct: "updatedProduct", type: "type", stores: "stores", clientId: "clientId", clientProduct: "clientProduct" }, ngImport: i0, template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder mb-3\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\" *ngFor=\"let product of products;let i=index;\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{convertUpper(product.name)}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.new\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"!product.new\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"trial\" (click)=\"updateType(i,'trial')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"subscription\" (click)=\"updateType(i,'subscription')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"!product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"unsubscribe\" (click)=\"updateType(i,'unsubscribe')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"cancel\" (click)=\"updateType(i,'cancel')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModal.close()\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\" (click)=\"type === 'products' ? updateproduct() : updateStore()\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1680
1766
|
}
|
|
1681
1767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductConfirmationComponent, decorators: [{
|
|
1682
1768
|
type: Component,
|
|
1683
|
-
args: [{ selector: 'lib-product-confirmation', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\" *ngFor=\"let product of products;let i=index;\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{product.name}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.new\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"!product.new\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"trial\" (click)=\"updateType(i,'trial')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"subscription\" (click)=\"updateType(i,'subscription')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"!product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"unsubscribe\" (click)=\"updateType(i,'unsubscribe')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"cancel\" (click)=\"updateType(i,'cancel')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModal.close()\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\" (click)=\"type === 'products' ? updateproduct() : updateStore()\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
|
|
1769
|
+
args: [{ selector: 'lib-product-confirmation', template: "<div class=\"modal-content\">\r\n <div class=\"p-6\">\r\n <div><img src=\"./assets/tango/custompopup-Icons/settings-icon.svg\" alt=\"\"></div>\r\n <div class=\"heading mt-4 ms-1\">Confirmation</div>\r\n <div class=\"contenttext mt-4 ms-1\">\r\n Please update the status of below product\r\n </div>\r\n </div>\r\n <div class=\"modal-body\">\r\n <!--begin::Form-->\r\n <form id=\"kt_modal_new_card_form\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n \r\n <div class=\"fv-row fv-plugins-icon-container \">\r\n <div class=\"confirmationborder mb-3\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\" *ngFor=\"let product of products;let i=index;\">\r\n <div class=\"d-flex justify-content-between\">\r\n <label for=\"TangoZone\" class=\" producttext mb-2\">{{convertUpper(product.name)}}</label>\r\n <span class=\"badge badge-light-primary ms-2\" *ngIf=\"product.new\">Subscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/primary-clock-icon.svg\" alt=\"\">\r\n </span>\r\n <span class=\"badge badge-light-warning ms-2\" *ngIf=\"!product.new\">Unsubscribe\r\n <img class=\"ms-2\" src=\"./assets/tango/custompopup-Icons/warning-clock-icon.svg\" alt=\"\">\r\n </span>\r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"trial\" (click)=\"updateType(i,'trial')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Start with trail</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"ontrailRadioOptions_{{i}}\"\r\n id=\"inlineRadio1\" value=\"subscription\" (click)=\"updateType(i,'subscription')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Add to Subscription</label>\r\n </div>\r\n \r\n </div>\r\n <div class=\"form-group pt-1\" *ngIf=\"!product.new\">\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"unsubscribe\" (click)=\"updateType(i,'unsubscribe')\" checked>\r\n <label class=\"form-check-label radio-custom-label mx-3 producttext cursor-pointer\"\r\n for=\"inlineRadio1\">Unsubscribe</label>\r\n </div><br>\r\n <div class=\"form-check form-check-inline ps-0\" >\r\n <input class=\" cursor-pointer radio-custom\" type=\"radio\" name=\"TrailExpiredRadioOptions_{{i}}\" id=\"inlineRadio1\"\r\n value=\"cancel\" (click)=\"updateType(i,'cancel')\">\r\n <label class=\"form-check-label producttext radio-custom-label mx-3 cursor-pointer\"\r\n for=\"inlineRadio1\">Cancel</label>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex mt-9 my-2\">\r\n <button type=\"submit\" class=\"btn-outline btn cancel me-4 w-50\" (click)=\"activeModal.close()\">Cancel</button>\r\n <button type=\"button\" tabindex=\"0\"\r\n class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\" (click)=\"type === 'products' ? updateproduct() : updateStore()\"><span\r\n class=\"submit\">Submit</span></button>\r\n </div>\r\n </div>\r\n \r\n \r\n <!--end::Actions-->\r\n </form>\r\n <!--end::Form-->\r\n \r\n </div>\r\n</div>", styles: [".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}.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}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.confirmationborder{border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);padding:16px;flex-direction:column;align-items:flex-start;gap:18px;align-self:stretch}\n"] }]
|
|
1684
1770
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: i4$2.ToastService }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }], propDecorators: { productList: [{
|
|
1685
1771
|
type: Input
|
|
1686
1772
|
}], updatedProduct: [{
|
|
@@ -1709,6 +1795,7 @@ class MultidropdownComponent {
|
|
|
1709
1795
|
clientId;
|
|
1710
1796
|
selectAll = false;
|
|
1711
1797
|
clientProduct = [];
|
|
1798
|
+
disabled = false;
|
|
1712
1799
|
data = new EventEmitter();
|
|
1713
1800
|
unsubscribe = [];
|
|
1714
1801
|
destroy$ = new Subject();
|
|
@@ -1718,6 +1805,7 @@ class MultidropdownComponent {
|
|
|
1718
1805
|
dummyArray = [];
|
|
1719
1806
|
noFilter = false;
|
|
1720
1807
|
responseArray = [];
|
|
1808
|
+
disabledBtn = true;
|
|
1721
1809
|
constructor(layout, globalService, modalService, PaymentSubscriptionService, changeDetector) {
|
|
1722
1810
|
this.layout = layout;
|
|
1723
1811
|
this.globalService = globalService;
|
|
@@ -1788,7 +1876,7 @@ class MultidropdownComponent {
|
|
|
1788
1876
|
if (issue === 'Select All') {
|
|
1789
1877
|
const currentIssues = this.dataObject[index].Issues.map((item) => item.text);
|
|
1790
1878
|
if (selectedValues.length === currentIssues.length) {
|
|
1791
|
-
this.selectedValuesArray[index] = [];
|
|
1879
|
+
this.selectedValuesArray[index] = ['tangoTraffic'];
|
|
1792
1880
|
}
|
|
1793
1881
|
else {
|
|
1794
1882
|
this.selectedValuesArray[index] = [...currentIssues];
|
|
@@ -1802,6 +1890,24 @@ class MultidropdownComponent {
|
|
|
1802
1890
|
this.selectedValuesArray[index].push(issue);
|
|
1803
1891
|
}
|
|
1804
1892
|
}
|
|
1893
|
+
let count = 0;
|
|
1894
|
+
let existProduct = this.product.map((item) => item.product || item);
|
|
1895
|
+
this.selectedValuesArray[0].forEach((item) => {
|
|
1896
|
+
if (!existProduct.includes(item)) {
|
|
1897
|
+
count++;
|
|
1898
|
+
}
|
|
1899
|
+
});
|
|
1900
|
+
existProduct.forEach((item) => {
|
|
1901
|
+
if (!this.selectedValuesArray[0].includes(item)) {
|
|
1902
|
+
count++;
|
|
1903
|
+
}
|
|
1904
|
+
});
|
|
1905
|
+
if (count) {
|
|
1906
|
+
this.disabledBtn = false;
|
|
1907
|
+
}
|
|
1908
|
+
else {
|
|
1909
|
+
this.disabledBtn = true;
|
|
1910
|
+
}
|
|
1805
1911
|
const selectAllId = `selectall${index}`;
|
|
1806
1912
|
const selectAllElement = document.getElementById(selectAllId);
|
|
1807
1913
|
if (selectAllElement) {
|
|
@@ -1817,7 +1923,8 @@ class MultidropdownComponent {
|
|
|
1817
1923
|
});
|
|
1818
1924
|
}
|
|
1819
1925
|
Reset() {
|
|
1820
|
-
this.selectedValuesArray = [];
|
|
1926
|
+
this.selectedValuesArray = [this.product?.map((item) => item?.product || item)];
|
|
1927
|
+
this.disabledBtn = true;
|
|
1821
1928
|
this.Opendropdown = false;
|
|
1822
1929
|
}
|
|
1823
1930
|
productconfirmation() {
|
|
@@ -1837,7 +1944,20 @@ class MultidropdownComponent {
|
|
|
1837
1944
|
}
|
|
1838
1945
|
});
|
|
1839
1946
|
}
|
|
1840
|
-
if (this.type == 'products'
|
|
1947
|
+
if (this.type == 'products') {
|
|
1948
|
+
let existProduct = this.product.map((item) => item.product || item);
|
|
1949
|
+
this.selectedValuesArray[0].forEach((item) => {
|
|
1950
|
+
if (!existProduct.includes(item)) {
|
|
1951
|
+
showPopup = true;
|
|
1952
|
+
}
|
|
1953
|
+
});
|
|
1954
|
+
existProduct.forEach((item) => {
|
|
1955
|
+
if (!this.selectedValuesArray[0].includes(item)) {
|
|
1956
|
+
showPopup = true;
|
|
1957
|
+
}
|
|
1958
|
+
});
|
|
1959
|
+
}
|
|
1960
|
+
if (showPopup) {
|
|
1841
1961
|
const modalRef = this.modalService.open(ProductConfirmationComponent, {
|
|
1842
1962
|
centered: true, size: 'md', scrollable: true
|
|
1843
1963
|
});
|
|
@@ -1852,48 +1972,50 @@ class MultidropdownComponent {
|
|
|
1852
1972
|
});
|
|
1853
1973
|
}
|
|
1854
1974
|
else {
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
name: item,
|
|
1861
|
-
type: type
|
|
1862
|
-
});
|
|
1863
|
-
});
|
|
1864
|
-
this.product.forEach((item) => {
|
|
1865
|
-
if (!this.selectedValuesArray[0].includes(item)) {
|
|
1975
|
+
if (this.type == 'stores') {
|
|
1976
|
+
let products = [];
|
|
1977
|
+
this.selectedValuesArray[0].forEach((item) => {
|
|
1978
|
+
let details = this.clientProduct.find((ele) => ele.product == item);
|
|
1979
|
+
let type = details?.status || 'trial';
|
|
1866
1980
|
products.push({
|
|
1867
1981
|
name: item,
|
|
1868
|
-
type:
|
|
1982
|
+
type: type
|
|
1869
1983
|
});
|
|
1870
|
-
}
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1984
|
+
});
|
|
1985
|
+
this.product.forEach((item) => {
|
|
1986
|
+
if (!this.selectedValuesArray[0].includes(item)) {
|
|
1987
|
+
products.push({
|
|
1988
|
+
name: item,
|
|
1989
|
+
type: 'unsubscribe'
|
|
1990
|
+
});
|
|
1991
|
+
}
|
|
1992
|
+
});
|
|
1993
|
+
let params = {
|
|
1994
|
+
clientId: this.clientId,
|
|
1995
|
+
product: products,
|
|
1996
|
+
store: this.stores
|
|
1997
|
+
};
|
|
1998
|
+
this.PaymentSubscriptionService.updateStore(params).subscribe((res) => {
|
|
1999
|
+
if (res && res.code == 200) {
|
|
2000
|
+
this.data.emit('store');
|
|
2001
|
+
Swal.fire({
|
|
2002
|
+
iconHtml: `<img src="../../../../assets/tango/toast-icons/Envelope-Open-icon.svg">`,
|
|
2003
|
+
html: `<div class="col-md-12 mt-5"><div class="toasttitile">${res.message}</div></div>`,
|
|
2004
|
+
toast: true,
|
|
2005
|
+
position: 'bottom',
|
|
2006
|
+
showConfirmButton: false,
|
|
2007
|
+
showCloseButton: true,
|
|
2008
|
+
timer: 6000,
|
|
2009
|
+
timerProgressBar: true,
|
|
2010
|
+
customClass: 'custom-toast-container',
|
|
2011
|
+
didOpen: (toast) => {
|
|
2012
|
+
toast.addEventListener('mouseenter', Swal.stopTimer);
|
|
2013
|
+
toast.addEventListener('mouseleave', Swal.resumeTimer);
|
|
2014
|
+
}
|
|
2015
|
+
});
|
|
2016
|
+
}
|
|
2017
|
+
});
|
|
2018
|
+
}
|
|
1897
2019
|
}
|
|
1898
2020
|
}
|
|
1899
2021
|
convertUpper(data) {
|
|
@@ -1902,11 +2024,11 @@ class MultidropdownComponent {
|
|
|
1902
2024
|
return firstWord + ' ' + secondWord;
|
|
1903
2025
|
}
|
|
1904
2026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MultidropdownComponent, deps: [{ token: i3.LayoutService }, { token: i3.GlobalStateService }, { token: i1$2.NgbModal }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: { text: "text", product: "product", productList: "productList", type: "type", stores: "stores", clientId: "clientId", selectAll: "selectAll", clientProduct: "clientProduct" }, outputs: { data: "data" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"Dropdown('Clients',i,$event)\">\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix 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_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.text)\" (change)=\"toggleCheckbox(issue.text,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.text}}\">\r\n {{ convertUpper(issue.text) }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\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"] }] });
|
|
2027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MultidropdownComponent, selector: "lib-multidropdown", inputs: { text: "text", product: "product", productList: "productList", type: "type", stores: "stores", clientId: "clientId", selectAll: "selectAll", clientProduct: "clientProduct", disabled: "disabled" }, outputs: { data: "data" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"!disabled ? Dropdown('Clients',i,$event) : ''\" >\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix 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_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.text)\" (change)=\"toggleCheckbox(issue.text,i)\" [disabled]=\"issue.text === 'tangoTraffic'\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.text}}\">\r\n {{ convertUpper(issue.text) }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\" [disabled]=\"disabledBtn\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\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"] }] });
|
|
1906
2028
|
}
|
|
1907
2029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MultidropdownComponent, decorators: [{
|
|
1908
2030
|
type: Component,
|
|
1909
|
-
args: [{ selector: 'lib-multidropdown', template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"Dropdown('Clients',i,$event)\">\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix 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_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.text)\" (change)=\"toggleCheckbox(issue.text,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.text}}\">\r\n {{ convertUpper(issue.text) }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\n"] }]
|
|
2031
|
+
args: [{ selector: 'lib-multidropdown', template: "<div class=\"mt-2 dropdown1 position-relative cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <a (click)=\"!disabled ? Dropdown('Clients',i,$event) : ''\" >\r\n <span *ngIf=\"!text.length\"><svg width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_3094_38243)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M22.0003 15.1665V26.8332M16.167 20.9998H27.8337\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3094_38243\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix 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_3094_38243\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3094_38243\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>{{text}}</span>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap me-4\" *ngIf=\"text.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\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2\">Add Products</span> </button>\r\n </a>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute end-0 \" [ngClass]=\"!text.length ? 'left' : 'addselect'\">\r\n <div class=\"form-check d-flex align-items-center px-5 mt-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label ms-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n \r\n <!-- <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" /> -->\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.text)\" (change)=\"toggleCheckbox(issue.text,i)\" [disabled]=\"issue.text === 'tangoTraffic'\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.text}}\">\r\n {{ convertUpper(issue.text) }}\r\n </label>\r\n </div>\r\n <div class=\"mt-4 d-flex justify-content-center \">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\">No filters available</span>\r\n </div>\r\n <div role=\"group\" class=\"d-flex justify-content-between mb-4 mx-5\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"productconfirmation()\" [disabled]=\"disabledBtn\">Apply</button>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n\r\n", styles: [".dropdown1{float:right}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:300px;overflow:auto;right:0;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}\n"] }]
|
|
1910
2032
|
}], ctorParameters: () => [{ type: i3.LayoutService }, { type: i3.GlobalStateService }, { type: i1$2.NgbModal }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }], propDecorators: { text: [{
|
|
1911
2033
|
type: Input
|
|
1912
2034
|
}], product: [{
|
|
@@ -1923,6 +2045,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
1923
2045
|
type: Input
|
|
1924
2046
|
}], clientProduct: [{
|
|
1925
2047
|
type: Input
|
|
2048
|
+
}], disabled: [{
|
|
2049
|
+
type: Input
|
|
1926
2050
|
}], data: [{
|
|
1927
2051
|
type: Output
|
|
1928
2052
|
}], onClick: [{
|
|
@@ -2013,7 +2137,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2013
2137
|
totalItems = 0;
|
|
2014
2138
|
paginationSizes = [10, 20, 30];
|
|
2015
2139
|
pageSize = 10;
|
|
2016
|
-
isFilter = '
|
|
2140
|
+
isFilter = 'current';
|
|
2017
2141
|
searchValue = '';
|
|
2018
2142
|
invoiceList = [];
|
|
2019
2143
|
extendPaymentPeriodDays;
|
|
@@ -2026,6 +2150,13 @@ class PaymentsSubscriptionComponent {
|
|
|
2026
2150
|
noData = false;
|
|
2027
2151
|
priceNoData = true;
|
|
2028
2152
|
priceLoading = false;
|
|
2153
|
+
sortColumName = "invoice";
|
|
2154
|
+
sortBy = 1;
|
|
2155
|
+
invoiceNoData = true;
|
|
2156
|
+
invoiceLoading = false;
|
|
2157
|
+
searchDisabled = false;
|
|
2158
|
+
userType = '';
|
|
2159
|
+
disabledAddIcon = false;
|
|
2029
2160
|
destroy$ = new Subject();
|
|
2030
2161
|
constructor(modalService, fb, PaymentSubscriptionService, changeDetector, toast, gs, elementRef) {
|
|
2031
2162
|
this.modalService = modalService;
|
|
@@ -2050,23 +2181,30 @@ class PaymentsSubscriptionComponent {
|
|
|
2050
2181
|
cameracount: ['', Validators.required],
|
|
2051
2182
|
});
|
|
2052
2183
|
this.paymentinvoiceform = this.fb.group({
|
|
2053
|
-
radiooptions: ['', Validators.required,],
|
|
2054
|
-
paymentcycle: ['', Validators.required],
|
|
2055
|
-
invoiceTo: [''],
|
|
2184
|
+
radiooptions: ['before15', Validators.required,],
|
|
2185
|
+
paymentcycle: ['monthly', Validators.required],
|
|
2186
|
+
invoiceTo: ['', Validators.required],
|
|
2056
2187
|
generateinvoiceon: ['', Validators.required],
|
|
2057
|
-
paymenttype: ['', Validators.required],
|
|
2058
|
-
currency: ['', Validators.required],
|
|
2059
|
-
paymentAgreementTo: [''],
|
|
2060
|
-
extendPaymentPeriodDays: [
|
|
2188
|
+
paymenttype: ['online', Validators.required],
|
|
2189
|
+
currency: ['inr', Validators.required],
|
|
2190
|
+
paymentAgreementTo: ['', Validators.required],
|
|
2191
|
+
extendPaymentPeriodDays: [1, Validators.required],
|
|
2061
2192
|
});
|
|
2062
2193
|
this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe((data) => {
|
|
2063
2194
|
if (data) {
|
|
2064
2195
|
this.clientId = data.client;
|
|
2065
2196
|
this.dynamicData.clientId = this.clientId;
|
|
2066
|
-
this.
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2197
|
+
this.gs.userAccess.pipe(takeUntil(this.destroy$)).subscribe((data) => {
|
|
2198
|
+
if (data) {
|
|
2199
|
+
this.userType = data.userType;
|
|
2200
|
+
if (data.userType == 'tango') {
|
|
2201
|
+
this.getPricing('standard');
|
|
2202
|
+
this.getProductList();
|
|
2203
|
+
this.filterList();
|
|
2204
|
+
this.notificationList();
|
|
2205
|
+
}
|
|
2206
|
+
}
|
|
2207
|
+
});
|
|
2070
2208
|
this.clientBillingInfo(this.clientId);
|
|
2071
2209
|
this.getpaymentinvoice(this.clientId);
|
|
2072
2210
|
this.paymentinvoiceform.disable();
|
|
@@ -2128,6 +2266,14 @@ class PaymentsSubscriptionComponent {
|
|
|
2128
2266
|
this.getStoreList();
|
|
2129
2267
|
}
|
|
2130
2268
|
selectPlan(plan) {
|
|
2269
|
+
this.noData = false;
|
|
2270
|
+
this.priceNoData = false;
|
|
2271
|
+
if (plan == 'subscription') {
|
|
2272
|
+
this.getProductList();
|
|
2273
|
+
}
|
|
2274
|
+
else {
|
|
2275
|
+
this.getPricing('standard');
|
|
2276
|
+
}
|
|
2131
2277
|
this.plan = plan;
|
|
2132
2278
|
this.viewplanIssue = "Product Level View";
|
|
2133
2279
|
}
|
|
@@ -2216,6 +2362,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2216
2362
|
viewplanItem(viewplanvalue) {
|
|
2217
2363
|
this.dynamicData.offset = 1;
|
|
2218
2364
|
this.viewplanIssue = viewplanvalue;
|
|
2365
|
+
this.noData = false;
|
|
2219
2366
|
if (viewplanvalue == 'Product Level View') {
|
|
2220
2367
|
this.getProductList();
|
|
2221
2368
|
}
|
|
@@ -2241,6 +2388,8 @@ class PaymentsSubscriptionComponent {
|
|
|
2241
2388
|
modalRef.componentInstance.clientId = this.clientId;
|
|
2242
2389
|
modalRef.result.then((result) => {
|
|
2243
2390
|
if (result) {
|
|
2391
|
+
if (this.userType == 'tango')
|
|
2392
|
+
this.notificationList();
|
|
2244
2393
|
}
|
|
2245
2394
|
});
|
|
2246
2395
|
}
|
|
@@ -2264,6 +2413,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2264
2413
|
modalRef.result.then((result) => {
|
|
2265
2414
|
if (result == 'successcredit') {
|
|
2266
2415
|
this.toast.getPrimaryToast('The invoice has been sent to the respective email IDs with the discount.');
|
|
2416
|
+
this.invoiceTableData();
|
|
2267
2417
|
}
|
|
2268
2418
|
});
|
|
2269
2419
|
}
|
|
@@ -2282,21 +2432,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2282
2432
|
};
|
|
2283
2433
|
this.PaymentSubscriptionService.updatePricing(params).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
2284
2434
|
if (res && res.code == 200) {
|
|
2285
|
-
|
|
2286
|
-
iconHtml: `<img src="../../../../assets/tango/toast-icons/Envelope-Open-icon.svg">`,
|
|
2287
|
-
html: `<div class="col-md-12 mt-5"><div class="toasttitile">Revised changes have been updated</div></div>`,
|
|
2288
|
-
toast: true,
|
|
2289
|
-
position: 'bottom',
|
|
2290
|
-
showConfirmButton: false,
|
|
2291
|
-
showCloseButton: true,
|
|
2292
|
-
timer: 6000,
|
|
2293
|
-
timerProgressBar: true,
|
|
2294
|
-
customClass: 'custom-toast-container',
|
|
2295
|
-
didOpen: (toast) => {
|
|
2296
|
-
toast.addEventListener('mouseenter', Swal.stopTimer);
|
|
2297
|
-
toast.addEventListener('mouseleave', Swal.resumeTimer);
|
|
2298
|
-
}
|
|
2299
|
-
});
|
|
2435
|
+
this.toast.getSuccessToast('Revised price list has been sent to the email list');
|
|
2300
2436
|
}
|
|
2301
2437
|
});
|
|
2302
2438
|
}
|
|
@@ -2397,7 +2533,8 @@ class PaymentsSubscriptionComponent {
|
|
|
2397
2533
|
modalRef.result.then((result) => {
|
|
2398
2534
|
if (result.title == 'Add Step Price') {
|
|
2399
2535
|
let products = [...new Set(this.priceValueDetails.product.map((item, index) => item.productName))];
|
|
2400
|
-
|
|
2536
|
+
for (let data of products) {
|
|
2537
|
+
// products.forEach((data: any) => {
|
|
2401
2538
|
let productDetails = this.priceValueDetails.product.find((item, index) => {
|
|
2402
2539
|
if (item.productName == data && item?.lastIndex) {
|
|
2403
2540
|
item.index = index;
|
|
@@ -2409,8 +2546,8 @@ class PaymentsSubscriptionComponent {
|
|
|
2409
2546
|
let item = productDetails;
|
|
2410
2547
|
let range = item.storeRange.split('-');
|
|
2411
2548
|
let differ = (parseInt(range[1]) - parseInt(range[0])) + 1;
|
|
2412
|
-
delete this.priceValueDetails.product[index].lastIndex;
|
|
2413
|
-
this.priceValueDetails.product[index].showEditDelete = false;
|
|
2549
|
+
// delete this.priceValueDetails.product[index].lastIndex;
|
|
2550
|
+
// this.priceValueDetails.product[index].showEditDelete = false;
|
|
2414
2551
|
let newItem = { ...item };
|
|
2415
2552
|
let newStartRange = parseInt(range[1]) + 1;
|
|
2416
2553
|
let newEndRange = newStartRange + parseInt(result.intravel) - 1;
|
|
@@ -2418,12 +2555,18 @@ class PaymentsSubscriptionComponent {
|
|
|
2418
2555
|
newItem.showEditDelete = true;
|
|
2419
2556
|
newItem.lastIndex = true;
|
|
2420
2557
|
newItem.storeCount = this.priceValueDetails.product[index].storeCount - differ;
|
|
2558
|
+
if (newItem.storeCount < 0) {
|
|
2559
|
+
continue;
|
|
2560
|
+
}
|
|
2561
|
+
delete this.priceValueDetails.product[index].lastIndex;
|
|
2562
|
+
this.priceValueDetails.product[index].showEditDelete = false;
|
|
2421
2563
|
newItem.price = newItem.storeCount * (newItem.basePrice - newItem.negotiatePrice);
|
|
2422
2564
|
this.priceValueDetails.product[index].storeCount = differ;
|
|
2423
2565
|
this.priceValueDetails.product[index].price = this.priceValueDetails.product[index].storeCount * (this.priceValueDetails.product[index].basePrice - this.priceValueDetails.product[index].negotiatePrice);
|
|
2424
2566
|
newItem.storeRange = newStartRange.toString() + '-' + newEndRange.toString();
|
|
2425
2567
|
this.priceValueDetails.product.splice(index + 1, 0, newItem);
|
|
2426
|
-
}
|
|
2568
|
+
}
|
|
2569
|
+
// )
|
|
2427
2570
|
let price = 0;
|
|
2428
2571
|
let actualPrice = 0;
|
|
2429
2572
|
let negotiatePrice = 0;
|
|
@@ -2432,10 +2575,10 @@ class PaymentsSubscriptionComponent {
|
|
|
2432
2575
|
actualPrice = actualPrice + item.basePrice;
|
|
2433
2576
|
negotiatePrice = negotiatePrice + item.negotiatePrice;
|
|
2434
2577
|
});
|
|
2435
|
-
this.priceValueDetails.totalNegotiatePrice = price;
|
|
2578
|
+
this.priceValueDetails.totalNegotiatePrice = price.toFixed(2);
|
|
2436
2579
|
this.priceValueDetails.actualPrice = actualPrice;
|
|
2437
|
-
this.priceValueDetails.negotiatePrice = negotiatePrice;
|
|
2438
|
-
this.priceValueDetails.finalValue = this.priceValueDetails.totalNegotiatePrice * (18 / 100);
|
|
2580
|
+
this.priceValueDetails.negotiatePrice = negotiatePrice.toFixed(2);
|
|
2581
|
+
this.priceValueDetails.finalValue = (this.priceValueDetails.totalNegotiatePrice * (18 / 100)).toFixed(2);
|
|
2439
2582
|
this.toast.getSuccessToast('Step Price has been added successfully.');
|
|
2440
2583
|
}
|
|
2441
2584
|
if (result.title == 'Edit Step Price') {
|
|
@@ -2453,15 +2596,16 @@ class PaymentsSubscriptionComponent {
|
|
|
2453
2596
|
if (productInfo.length > 2) {
|
|
2454
2597
|
this.priceValueDetails.product[index - 1].showImg = true;
|
|
2455
2598
|
this.priceValueDetails.product[index - 1].showEditDelete = true;
|
|
2456
|
-
this.priceValueDetails.product[index - 1].lastIndex = true;
|
|
2599
|
+
// this.priceValueDetails.product[index - 1].lastIndex = true;
|
|
2457
2600
|
}
|
|
2601
|
+
this.priceValueDetails.product[index - 1].lastIndex = true;
|
|
2458
2602
|
this.priceValueDetails.product.splice(index, 1);
|
|
2459
2603
|
let price = 0;
|
|
2460
2604
|
this.priceValueDetails.product.forEach((item) => {
|
|
2461
2605
|
price = price + item.price;
|
|
2462
2606
|
});
|
|
2463
|
-
this.priceValueDetails.totalNegotiatePrice = price;
|
|
2464
|
-
this.priceValueDetails.finalValue = this.priceValueDetails.totalNegotiatePrice * (18 / 100);
|
|
2607
|
+
this.priceValueDetails.totalNegotiatePrice = price.toFixed(2);
|
|
2608
|
+
this.priceValueDetails.finalValue = (this.priceValueDetails.totalNegotiatePrice * (18 / 100)).toFixed(2);
|
|
2465
2609
|
this.toast.getErrorToast('Column deleted successfully.');
|
|
2466
2610
|
}
|
|
2467
2611
|
});
|
|
@@ -2482,6 +2626,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2482
2626
|
const modalRef = this.modalService.open(UnsubscribeRequestComponent, {
|
|
2483
2627
|
centered: true, size: 'md', scrollable: true
|
|
2484
2628
|
});
|
|
2629
|
+
modalRef.componentInstance.clientName = this.clientinfo.clientName;
|
|
2485
2630
|
modalRef.result.then((result) => {
|
|
2486
2631
|
if (result == 'unsubscribed') {
|
|
2487
2632
|
let params = {
|
|
@@ -2517,8 +2662,13 @@ class PaymentsSubscriptionComponent {
|
|
|
2517
2662
|
if (res && res.code == 200) {
|
|
2518
2663
|
this.priceLoading = false;
|
|
2519
2664
|
this.priceNoData = false;
|
|
2520
|
-
|
|
2521
|
-
|
|
2665
|
+
if (res.data.product.length) {
|
|
2666
|
+
this.priceValueDetails = res.data;
|
|
2667
|
+
this.originalPriceValue = JSON.parse(JSON.stringify(this.priceValueDetails));
|
|
2668
|
+
}
|
|
2669
|
+
else {
|
|
2670
|
+
this.priceNoData = true;
|
|
2671
|
+
}
|
|
2522
2672
|
this.changeDetector.detectChanges();
|
|
2523
2673
|
}
|
|
2524
2674
|
else {
|
|
@@ -2526,29 +2676,34 @@ class PaymentsSubscriptionComponent {
|
|
|
2526
2676
|
this.priceNoData = true;
|
|
2527
2677
|
}
|
|
2528
2678
|
}, (error) => {
|
|
2529
|
-
// console.log(error);
|
|
2530
2679
|
this.priceLoading = false;
|
|
2531
2680
|
this.priceNoData = true;
|
|
2532
2681
|
});
|
|
2533
2682
|
}
|
|
2534
2683
|
calculate(index, type) {
|
|
2535
|
-
if (
|
|
2536
|
-
this.priceValueDetails.product[index].negotiatePrice = this.priceValueDetails.product[index].basePrice * (this.priceValueDetails.product[index].discountPercentage / 100);
|
|
2537
|
-
this.priceValueDetails.product[index].price = (this.priceValueDetails.product[index].basePrice - this.priceValueDetails.product[index].negotiatePrice) * this.priceValueDetails.product[index].storeCount;
|
|
2684
|
+
if (this.priceValueDetails.product[index].discountPercentage < 0 || this.priceValueDetails.product[index].negotiatePrice < 0 || isNaN(this.priceValueDetails.product[index].negotiatePrice) || isNaN(this.priceValueDetails.product[index].discountPercentage)) {
|
|
2538
2685
|
}
|
|
2539
2686
|
else {
|
|
2540
|
-
this.priceValueDetails.product[index].
|
|
2541
|
-
this.priceValueDetails.product[index].
|
|
2687
|
+
this.priceValueDetails.product[index].showDiscountError = false;
|
|
2688
|
+
this.priceValueDetails.product[index].showNegotiateError = false;
|
|
2689
|
+
if (type == 'discount') {
|
|
2690
|
+
this.priceValueDetails.product[index].negotiatePrice = this.priceValueDetails.product[index].basePrice * (this.priceValueDetails.product[index].discountPercentage / 100);
|
|
2691
|
+
this.priceValueDetails.product[index].price = (this.priceValueDetails.product[index].basePrice - this.priceValueDetails.product[index].negotiatePrice) * this.priceValueDetails.product[index].storeCount;
|
|
2692
|
+
}
|
|
2693
|
+
else {
|
|
2694
|
+
this.priceValueDetails.product[index].discountPercentage = (this.priceValueDetails.product[index].negotiatePrice / this.priceValueDetails.product[index].basePrice) * 100;
|
|
2695
|
+
this.priceValueDetails.product[index].price = (this.priceValueDetails.product[index].basePrice - this.priceValueDetails.product[index].negotiatePrice) * this.priceValueDetails.product[index].storeCount;
|
|
2696
|
+
}
|
|
2697
|
+
let negotiatePrice = 0;
|
|
2698
|
+
let price = 0;
|
|
2699
|
+
this.priceValueDetails.product.forEach((item) => {
|
|
2700
|
+
price = price + item.price;
|
|
2701
|
+
negotiatePrice = negotiatePrice + parseInt(item.negotiatePrice);
|
|
2702
|
+
});
|
|
2703
|
+
this.priceValueDetails.negotiatePrice = negotiatePrice.toFixed(2);
|
|
2704
|
+
this.priceValueDetails.totalNegotiatePrice = price.toFixed(2);
|
|
2705
|
+
this.priceValueDetails.finalValue = (this.priceValueDetails.totalNegotiatePrice * (18 / 100)).toFixed(2);
|
|
2542
2706
|
}
|
|
2543
|
-
let negotiatePrice = 0;
|
|
2544
|
-
let price = 0;
|
|
2545
|
-
this.priceValueDetails.product.forEach((item) => {
|
|
2546
|
-
price = price + item.price;
|
|
2547
|
-
negotiatePrice = negotiatePrice + parseInt(item.negotiatePrice);
|
|
2548
|
-
});
|
|
2549
|
-
this.priceValueDetails.negotiatePrice = negotiatePrice;
|
|
2550
|
-
this.priceValueDetails.totalNegotiatePrice = price;
|
|
2551
|
-
this.priceValueDetails.finalValue = this.priceValueDetails.totalNegotiatePrice * (18 / 100);
|
|
2552
2707
|
this.changeDetector.detectChanges();
|
|
2553
2708
|
}
|
|
2554
2709
|
getpaymentinvoice(id) {
|
|
@@ -2609,16 +2764,26 @@ class PaymentsSubscriptionComponent {
|
|
|
2609
2764
|
filter: this.isFilter,
|
|
2610
2765
|
clientId: this.clientId,
|
|
2611
2766
|
searchValue: this.searchInput,
|
|
2612
|
-
export: false
|
|
2767
|
+
export: false,
|
|
2768
|
+
sortColumn: this.sortColumName,
|
|
2769
|
+
sortBy: this.sortBy
|
|
2613
2770
|
};
|
|
2614
2771
|
this.PaymentSubscriptionService.invoiceTableData(filters).pipe(takeUntil(this.destroy$)).subscribe({
|
|
2615
2772
|
next: (e) => {
|
|
2616
2773
|
if (e?.data?.count) {
|
|
2774
|
+
this.invoiceLoading = false;
|
|
2775
|
+
this.invoiceNoData = false;
|
|
2617
2776
|
this.invoiceList = e.data?.data;
|
|
2618
2777
|
this.totalItems = e.data?.count;
|
|
2619
2778
|
this.changeDetector.detectChanges();
|
|
2620
2779
|
}
|
|
2621
2780
|
else {
|
|
2781
|
+
this.invoiceLoading = false;
|
|
2782
|
+
this.invoiceNoData = true;
|
|
2783
|
+
this.searchDisabled = true;
|
|
2784
|
+
if (this.searchInput?.length) {
|
|
2785
|
+
this.searchDisabled = false;
|
|
2786
|
+
}
|
|
2622
2787
|
this.invoiceList = [];
|
|
2623
2788
|
this.totalItems = 0;
|
|
2624
2789
|
this.changeDetector.detectChanges();
|
|
@@ -2659,6 +2824,15 @@ class PaymentsSubscriptionComponent {
|
|
|
2659
2824
|
this.currentPage = parseInt(pageOffset);
|
|
2660
2825
|
this.invoiceTableData();
|
|
2661
2826
|
}
|
|
2827
|
+
invoiceFilter() {
|
|
2828
|
+
this.currentPage = 1;
|
|
2829
|
+
this.invoiceTableData();
|
|
2830
|
+
}
|
|
2831
|
+
sortData() {
|
|
2832
|
+
this.sortBy *= -1;
|
|
2833
|
+
this.changeDetector.detectChanges();
|
|
2834
|
+
this.invoiceTableData();
|
|
2835
|
+
}
|
|
2662
2836
|
searchField() {
|
|
2663
2837
|
this.invoiceTableData();
|
|
2664
2838
|
}
|
|
@@ -2667,7 +2841,11 @@ class PaymentsSubscriptionComponent {
|
|
|
2667
2841
|
}
|
|
2668
2842
|
getProductList() {
|
|
2669
2843
|
this.loading = true;
|
|
2670
|
-
let data =
|
|
2844
|
+
let data = {
|
|
2845
|
+
id: this.clientId,
|
|
2846
|
+
sortColumn: 'storeCount',
|
|
2847
|
+
sortBy: this.sortBy
|
|
2848
|
+
};
|
|
2671
2849
|
this.PaymentSubscriptionService.getProductList(data).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
2672
2850
|
if (res && res.code == 200) {
|
|
2673
2851
|
this.loading = false;
|
|
@@ -2687,7 +2865,6 @@ class PaymentsSubscriptionComponent {
|
|
|
2687
2865
|
getStoreList() {
|
|
2688
2866
|
this.loading = true;
|
|
2689
2867
|
this.PaymentSubscriptionService.getStoreList(this.dynamicData).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
2690
|
-
console.log(res);
|
|
2691
2868
|
if (res && res.code == 200) {
|
|
2692
2869
|
this.loading = false;
|
|
2693
2870
|
this.noData = false;
|
|
@@ -2696,7 +2873,6 @@ class PaymentsSubscriptionComponent {
|
|
|
2696
2873
|
item.checked = this.selectAll;
|
|
2697
2874
|
});
|
|
2698
2875
|
this.totalCount = res.data.count;
|
|
2699
|
-
console.log(this.storeList);
|
|
2700
2876
|
this.changeDetector.detectChanges();
|
|
2701
2877
|
}
|
|
2702
2878
|
else {
|
|
@@ -2794,12 +2970,14 @@ class PaymentsSubscriptionComponent {
|
|
|
2794
2970
|
this.selectedStoreList.splice(index, 1);
|
|
2795
2971
|
}
|
|
2796
2972
|
}
|
|
2797
|
-
if (this.selectedStoreList.length == this.totalCount)
|
|
2973
|
+
if (this.selectedStoreList.length == this.totalCount)
|
|
2798
2974
|
this.selectAll = true;
|
|
2799
|
-
|
|
2800
|
-
else {
|
|
2975
|
+
else
|
|
2801
2976
|
this.selectAll = false;
|
|
2802
|
-
|
|
2977
|
+
if (this.selectedStoreList.length > 1)
|
|
2978
|
+
this.disabledAddIcon = true;
|
|
2979
|
+
else
|
|
2980
|
+
this.disabledAddIcon = false;
|
|
2803
2981
|
let data = {
|
|
2804
2982
|
clientId: this.clientId,
|
|
2805
2983
|
store: this.selectedStoreList
|
|
@@ -2823,7 +3001,6 @@ class PaymentsSubscriptionComponent {
|
|
|
2823
3001
|
this.PaymentSubscriptionService.getNotification(data).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
2824
3002
|
if (res && res.code == 200) {
|
|
2825
3003
|
this.notificationDetails = res.data;
|
|
2826
|
-
console.log(this.notificationDetails, 'details');
|
|
2827
3004
|
this.notificationDetails.notificationList.forEach((item) => {
|
|
2828
3005
|
item.producttraildropDown = false;
|
|
2829
3006
|
});
|
|
@@ -2843,7 +3020,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2843
3020
|
this.PaymentSubscriptionService.unsubscribeApproval(data).pipe(takeUntil(this.destroy$)).subscribe((res) => {
|
|
2844
3021
|
if (res && res.code == 200) {
|
|
2845
3022
|
if (data.type == 'unsubscribe') {
|
|
2846
|
-
this.toast.getErrorToast(
|
|
3023
|
+
this.toast.getErrorToast(`Unsubscribed Tango Suite for ${this.clientinfo.clientName} successfully`);
|
|
2847
3024
|
}
|
|
2848
3025
|
this.notificationList();
|
|
2849
3026
|
this.changeDetector.detectChanges();
|
|
@@ -2858,6 +3035,7 @@ class PaymentsSubscriptionComponent {
|
|
|
2858
3035
|
if (event == 'product') {
|
|
2859
3036
|
this.getProductList();
|
|
2860
3037
|
}
|
|
3038
|
+
this.notificationList();
|
|
2861
3039
|
}
|
|
2862
3040
|
convertUpper(data) {
|
|
2863
3041
|
let [firstWord, secondWord] = data.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
|
|
@@ -2877,18 +3055,48 @@ class PaymentsSubscriptionComponent {
|
|
|
2877
3055
|
if (this.invoicedropDown) {
|
|
2878
3056
|
this.invoicedropDown = false;
|
|
2879
3057
|
}
|
|
3058
|
+
if (this.viewplandropDown) {
|
|
3059
|
+
this.viewplandropDown = false;
|
|
3060
|
+
}
|
|
2880
3061
|
if (this.notificationDetails?.notificationList) {
|
|
2881
3062
|
this.notificationDetails.notificationList.forEach((item) => {
|
|
2882
3063
|
item.producttraildropDown = false;
|
|
2883
3064
|
});
|
|
2884
3065
|
}
|
|
2885
3066
|
}
|
|
3067
|
+
increaseCount() {
|
|
3068
|
+
let currentValue = this.paymentinvoiceform.get('extendPaymentPeriodDays')?.value;
|
|
3069
|
+
this.paymentinvoiceform.get('extendPaymentPeriodDays')?.setValue(currentValue + 1);
|
|
3070
|
+
}
|
|
3071
|
+
sortStoreSize() {
|
|
3072
|
+
this.sortBy *= -1;
|
|
3073
|
+
this.getProductList();
|
|
3074
|
+
}
|
|
3075
|
+
getPriceError(value) {
|
|
3076
|
+
if (value > 0 && !isNaN(value) || value == 0) {
|
|
3077
|
+
return '';
|
|
3078
|
+
}
|
|
3079
|
+
else {
|
|
3080
|
+
return 'error';
|
|
3081
|
+
}
|
|
3082
|
+
}
|
|
3083
|
+
downloadInvoice(data) {
|
|
3084
|
+
this.PaymentSubscriptionService.invoiceDownload(data).subscribe((res) => {
|
|
3085
|
+
if (res) {
|
|
3086
|
+
const blob = new Blob([res], { type: 'application/pdf' });
|
|
3087
|
+
const link = document.createElement('a');
|
|
3088
|
+
link.href = window.URL.createObjectURL(blob);
|
|
3089
|
+
link.target = '_blank';
|
|
3090
|
+
link.click();
|
|
3091
|
+
}
|
|
3092
|
+
});
|
|
3093
|
+
}
|
|
2886
3094
|
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 });
|
|
2887
|
-
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>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\"\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\"\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 mt-6\"\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 {{clientinfo?.currentPlanInfo?.subscriptionType\r\n || '--'}}\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-4\">\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-6\">\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>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-9\"><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-10\"\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-9\"><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}}</span>\r\n </div>\r\n <div class=\"subtext\">Current Plan Info</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-2 me-14\">\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\">\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect 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)\" />\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\"\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=\"(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>No of Stores</th>\r\n <th>Cost Per Store</th>\r\n\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=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput 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 \">\r\n <input class=\"storeinput 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\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product\"> -- </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\"></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\"><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')\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\"></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\">$ {{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 pricingtab\">\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 \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\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 ===\r\n 'monthly' ? '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 ===\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 '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-6\">\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 'inr'\r\n ? 'INR' :'Doller'}}</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.get('extendPaymentPeriodDays')?.value > 0 && 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\"\r\n style=\"text-align: center;\"\r\n [(ngModel)]=\"extendPaymentPeriodDays\" 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><a 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></a></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)?.userType === 'tango' && (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\" >\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n \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 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\"\r\n placeholder=\"Search\" autocomplete=\"off\" (change)=\"searchField()\" />\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown\">\r\n <select class=\"form-select \" aria-label=\"Default select example\">\r\n <option selected>Current Month</option>\r\n <option value=\"1\">Previous Month</option>\r\n <option value=\"2\">Last 3 Mon</option>\r\n \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 text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><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 me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\"\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 <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Invoice #</th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th>Products</th>\r\n <th>Amount</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\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\">{{invoice?.status}}</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><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span><span class=\"productextend\"\r\n *ngIf=\"i>=2\">+{{invoice?.products.length - 2 }}</span></span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.amount}}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><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}.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:#f9fafb!important}input[type=text]{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-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);font-size:14px;font-weight:600;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:65%}.storerange{width:15%!important}.discountprice{width:11%!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}.pricingtab{width:115%}.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}.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}.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}}\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.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"], outputs: ["data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
3095
|
+
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>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>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\">\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=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput 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 \">\r\n <input class=\"storeinput 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\">+{{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\"></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')\" [ngClass]=\"product?.discountPercentage < 0 ? 'error' : ''\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [ngClass]=\"product?.negotiatePrice < 0 ? 'error' : ''\"></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\">$ {{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\">{{getPriceError(product.discountPercentage)}}\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 \"\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 \"\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 ===\r\n 'monthly' ? '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 ===\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 '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-6\">\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 'inr'\r\n ? 'INR' :'Doller'}}</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.get('extendPaymentPeriodDays')?.value > 0 && 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\"\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 ? increaseCount() : 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()\" [disabled]=\"!invoiceList.length\">\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\">{{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\">+{{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:#f9fafb!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%}.storerange{width:15%!important}.discountprice{width:11%!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}\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"], outputs: ["data"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
|
|
2888
3096
|
}
|
|
2889
3097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaymentsSubscriptionComponent, decorators: [{
|
|
2890
3098
|
type: Component,
|
|
2891
|
-
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>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\"\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\"\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 mt-6\"\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 {{clientinfo?.currentPlanInfo?.subscriptionType\r\n || '--'}}\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-4\">\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-6\">\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>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-9\"><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-10\"\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-9\"><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}}</span>\r\n </div>\r\n <div class=\"subtext\">Current Plan Info</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-2 me-14\">\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\">\r\n <div class=\"position-relative \">\r\n <div class=\"form-select dropselect 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)\" />\r\n <lib-filters class=\"me-2\" [dataObject]=\"dataObject\"\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=\"(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>No of Stores</th>\r\n <th>Cost Per Store</th>\r\n\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=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput 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 \">\r\n <input class=\"storeinput 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\">+{{store?.product.length-2}}</span>\r\n </td>\r\n <td *ngIf=\"!store?.product\"> -- </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\"></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\"><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')\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\"></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\">$ {{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 pricingtab\">\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 \"\r\n id=\"discountprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.discountPercentage\"\r\n (change)=\"calculate(i,'discount')\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\"></div>\r\n </td>\r\n <td class=\"storerange\">\r\n <div><input type=\"text\" class=\" form-control \"\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 ===\r\n 'monthly' ? '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 ===\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 '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-6\">\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 'inr'\r\n ? 'INR' :'Doller'}}</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.get('extendPaymentPeriodDays')?.value > 0 && 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\"\r\n style=\"text-align: center;\"\r\n [(ngModel)]=\"extendPaymentPeriodDays\" 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><a 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></a></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)?.userType === 'tango' && (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\" >\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Payment History</span>\r\n \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 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\"\r\n placeholder=\"Search\" autocomplete=\"off\" (change)=\"searchField()\" />\r\n \r\n <div class=\"me-3 monthwidth\">\r\n <div class=\"dropdown\">\r\n <select class=\"form-select \" aria-label=\"Default select example\">\r\n <option selected>Current Month</option>\r\n <option value=\"1\">Previous Month</option>\r\n <option value=\"2\">Last 3 Mon</option>\r\n \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 text-nowrap me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isEdit\"><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 me-4\" *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isDownload\"\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 <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Invoice #</th>\r\n <th>Billing date</th>\r\n <th>Stores</th>\r\n <th>Products</th>\r\n <th>Amount</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\">{{invoice?.invoice}}</div>\r\n <span class=\"badge badge-light-success\">{{invoice?.status}}</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><span *ngFor=\"let product of invoice?.products; let i = index\"><span\r\n [class]=\"getColorClass(product)\"\r\n *ngIf=\"i<2\">{{product}}</span><span class=\"productextend\"\r\n *ngIf=\"i>=2\">+{{invoice?.products.length - 2 }}</span></span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{invoice?.amount}}</div>\r\n </td>\r\n <td>\r\n <span class=\"pointer\"><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}.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:#f9fafb!important}input[type=text]{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-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);font-size:14px;font-weight:600;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:65%}.storerange{width:15%!important}.discountprice{width:11%!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}.pricingtab{width:115%}.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}.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}.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}}\n"] }]
|
|
3099
|
+
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>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>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\">\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=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"d-flex\">\r\n <input class=\"storeinput 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 \">\r\n <input class=\"storeinput 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\">+{{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\"></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')\" [ngClass]=\"product?.discountPercentage < 0 ? 'error' : ''\"></div>\r\n </td>\r\n <td class=\"negprice\">\r\n <div><input type=\"text\" class=\" form-control \"\r\n id=\"negprice\"\r\n style=\"text-transform: capitalize;\"\r\n [(ngModel)]=\"product.negotiatePrice\"\r\n (change)=\"calculate(i,'price')\" [ngClass]=\"product?.negotiatePrice < 0 ? 'error' : ''\"></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\">$ {{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\">{{getPriceError(product.discountPercentage)}}\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 \"\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 \"\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 ===\r\n 'monthly' ? '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 ===\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 '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-6\">\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 'inr'\r\n ? 'INR' :'Doller'}}</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.get('extendPaymentPeriodDays')?.value > 0 && 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\"\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 ? increaseCount() : 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()\" [disabled]=\"!invoiceList.length\">\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\">{{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\">+{{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:#f9fafb!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%}.storerange{width:15%!important}.discountprice{width:11%!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}\n"] }]
|
|
2892
3100
|
}], 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: [{
|
|
2893
3101
|
type: HostListener,
|
|
2894
3102
|
args: ['document:click', ['$event']]
|
|
@@ -4779,7 +4987,8 @@ class TangoManageSettingsModule {
|
|
|
4779
4987
|
UnsubscribeRequestComponent,
|
|
4780
4988
|
SubscriptionApprovalComponent,
|
|
4781
4989
|
ProductConfirmationComponent,
|
|
4782
|
-
ActivityLogsComponent
|
|
4990
|
+
ActivityLogsComponent,
|
|
4991
|
+
ModalContentComponent], imports: [CommonModule,
|
|
4783
4992
|
TangoManageSettingsRoutingModule,
|
|
4784
4993
|
NgbAccordionModule,
|
|
4785
4994
|
NgbModule,
|
|
@@ -4850,6 +5059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
4850
5059
|
SubscriptionApprovalComponent,
|
|
4851
5060
|
ProductConfirmationComponent,
|
|
4852
5061
|
ActivityLogsComponent,
|
|
5062
|
+
ModalContentComponent
|
|
4853
5063
|
],
|
|
4854
5064
|
imports: [
|
|
4855
5065
|
CommonModule,
|