@posiwise/admin-module 0.0.251 → 0.0.253
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i5$2 from "@angular/common";
|
|
2
2
|
import { CommonModule, DatePipe } from "@angular/common";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, EventEmitter, Injectable, NgModule, Output, Pipe, SecurityContext, ViewChild, ViewChildren, ViewEncapsulation } from "@angular/core";
|
|
4
|
+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, Injectable, Input, NgModule, Output, Pipe, SecurityContext, ViewChild, ViewChildren, ViewEncapsulation, inject } from "@angular/core";
|
|
5
5
|
import * as i10 from "@angular/forms";
|
|
6
6
|
import { FormsModule, ReactiveFormsModule, UntypedFormControl, Validators } from "@angular/forms";
|
|
7
7
|
import * as i13 from "@angular-magic/ngx-gp-autocomplete";
|
|
@@ -75,6 +75,7 @@ import { Subject, finalize, forkJoin, map, of, takeUntil } from "rxjs";
|
|
|
75
75
|
import { catchError, concatMap, debounceTime, filter, finalize as finalize$1, map as map$1, switchMap, take } from "rxjs/operators";
|
|
76
76
|
import * as i3 from "@angular/platform-browser";
|
|
77
77
|
import * as i4$1 from "primeng/tabs";
|
|
78
|
+
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
|
78
79
|
import uniqBy from "lodash/uniqBy";
|
|
79
80
|
import moment from "moment";
|
|
80
81
|
import { StatusCodes } from "http-status-codes";
|
|
@@ -17808,6 +17809,244 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
17808
17809
|
{ type: i6$2.ConfirmDialogService }
|
|
17809
17810
|
]
|
|
17810
17811
|
});
|
|
17812
|
+
const DEFAULT_PROVIDER = "airwallex";
|
|
17813
|
+
var ProductBackupCardComponent = class ProductBackupCardComponent {
|
|
17814
|
+
constructor() {
|
|
17815
|
+
this.submitted = false;
|
|
17816
|
+
this.destroyRef = inject(DestroyRef);
|
|
17817
|
+
this.providers = [{
|
|
17818
|
+
label: "Airwallex",
|
|
17819
|
+
value: "airwallex"
|
|
17820
|
+
}, {
|
|
17821
|
+
label: "Braintree",
|
|
17822
|
+
value: "braintree"
|
|
17823
|
+
}];
|
|
17824
|
+
}
|
|
17825
|
+
ngOnInit() {
|
|
17826
|
+
if (!this.form.contains("second_payment_provider")) this.form.addControl("second_payment_provider", new UntypedFormControl(this.provider || DEFAULT_PROVIDER));
|
|
17827
|
+
const control = this.form.get("second_payment_provider");
|
|
17828
|
+
control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
|
|
17829
|
+
if (!value) control.setValue(DEFAULT_PROVIDER, { emitEvent: false });
|
|
17830
|
+
});
|
|
17831
|
+
if (!control.value) control.setValue(DEFAULT_PROVIDER, { emitEvent: false });
|
|
17832
|
+
}
|
|
17833
|
+
get required() {
|
|
17834
|
+
return !!this.form.get("second_payment_required")?.value;
|
|
17835
|
+
}
|
|
17836
|
+
static {
|
|
17837
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
17838
|
+
minVersion: "12.0.0",
|
|
17839
|
+
version: "22.2.0",
|
|
17840
|
+
ngImport: i0,
|
|
17841
|
+
type: ProductBackupCardComponent,
|
|
17842
|
+
deps: [],
|
|
17843
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
17844
|
+
});
|
|
17845
|
+
}
|
|
17846
|
+
static {
|
|
17847
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
17848
|
+
minVersion: "17.0.0",
|
|
17849
|
+
version: "22.2.0",
|
|
17850
|
+
type: ProductBackupCardComponent,
|
|
17851
|
+
isStandalone: false,
|
|
17852
|
+
selector: "pw-product-backup-card",
|
|
17853
|
+
inputs: {
|
|
17854
|
+
form: "form",
|
|
17855
|
+
provider: "provider",
|
|
17856
|
+
submitted: "submitted"
|
|
17857
|
+
},
|
|
17858
|
+
host: { classAttribute: "col-12 col-md-8" },
|
|
17859
|
+
ngImport: i0,
|
|
17860
|
+
template: "<div class=\"row\" [formGroup]=\"form\">\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && form.get('second_payment_required')?.errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n @if (required) {\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentProvider' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentProvider' | transloco\" name=\"second_payment_provider\" controlId=\"product-second_payment_provider\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-second_payment_provider-label'\"\n [options]=\"providers\"\n formControlName=\"second_payment_provider\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n</div>\n",
|
|
17861
|
+
dependencies: [
|
|
17862
|
+
{
|
|
17863
|
+
kind: "component",
|
|
17864
|
+
type: i2$2.Select,
|
|
17865
|
+
selector: "p-select",
|
|
17866
|
+
inputs: [
|
|
17867
|
+
"id",
|
|
17868
|
+
"scrollHeight",
|
|
17869
|
+
"filter",
|
|
17870
|
+
"panelStyle",
|
|
17871
|
+
"panelStyleClass",
|
|
17872
|
+
"readonly",
|
|
17873
|
+
"editable",
|
|
17874
|
+
"tabindex",
|
|
17875
|
+
"placeholder",
|
|
17876
|
+
"loadingIcon",
|
|
17877
|
+
"filterPlaceholder",
|
|
17878
|
+
"filterLocale",
|
|
17879
|
+
"inputId",
|
|
17880
|
+
"dataKey",
|
|
17881
|
+
"filterBy",
|
|
17882
|
+
"filterFields",
|
|
17883
|
+
"autofocus",
|
|
17884
|
+
"resetFilterOnHide",
|
|
17885
|
+
"checkmark",
|
|
17886
|
+
"dropdownIcon",
|
|
17887
|
+
"loading",
|
|
17888
|
+
"optionLabel",
|
|
17889
|
+
"optionValue",
|
|
17890
|
+
"optionDisabled",
|
|
17891
|
+
"optionGroupLabel",
|
|
17892
|
+
"optionGroupChildren",
|
|
17893
|
+
"group",
|
|
17894
|
+
"showClear",
|
|
17895
|
+
"emptyFilterMessage",
|
|
17896
|
+
"emptyMessage",
|
|
17897
|
+
"lazy",
|
|
17898
|
+
"virtualScroll",
|
|
17899
|
+
"virtualScrollItemSize",
|
|
17900
|
+
"virtualScrollOptions",
|
|
17901
|
+
"overlayOptions",
|
|
17902
|
+
"ariaFilterLabel",
|
|
17903
|
+
"ariaLabel",
|
|
17904
|
+
"ariaLabelledBy",
|
|
17905
|
+
"filterMatchMode",
|
|
17906
|
+
"tooltip",
|
|
17907
|
+
"tooltipPosition",
|
|
17908
|
+
"tooltipPositionStyle",
|
|
17909
|
+
"tooltipStyleClass",
|
|
17910
|
+
"focusOnHover",
|
|
17911
|
+
"selectOnFocus",
|
|
17912
|
+
"multiple",
|
|
17913
|
+
"autoOptionFocus",
|
|
17914
|
+
"autofocusFilter",
|
|
17915
|
+
"filterValue",
|
|
17916
|
+
"options",
|
|
17917
|
+
"appendTo",
|
|
17918
|
+
"motionOptions"
|
|
17919
|
+
],
|
|
17920
|
+
outputs: [
|
|
17921
|
+
"onChange",
|
|
17922
|
+
"onFilter",
|
|
17923
|
+
"onFocus",
|
|
17924
|
+
"onBlur",
|
|
17925
|
+
"onClick",
|
|
17926
|
+
"onShow",
|
|
17927
|
+
"onHide",
|
|
17928
|
+
"onClear",
|
|
17929
|
+
"onLazyLoad"
|
|
17930
|
+
]
|
|
17931
|
+
},
|
|
17932
|
+
{
|
|
17933
|
+
kind: "directive",
|
|
17934
|
+
type: i5$2.NgClass,
|
|
17935
|
+
selector: "[ngClass]",
|
|
17936
|
+
inputs: ["class", "ngClass"]
|
|
17937
|
+
},
|
|
17938
|
+
{
|
|
17939
|
+
kind: "directive",
|
|
17940
|
+
type: i10.NgControlStatus,
|
|
17941
|
+
selector: "[formControlName],[ngModel],[formControl]"
|
|
17942
|
+
},
|
|
17943
|
+
{
|
|
17944
|
+
kind: "directive",
|
|
17945
|
+
type: i10.NgControlStatusGroup,
|
|
17946
|
+
selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
|
|
17947
|
+
},
|
|
17948
|
+
{
|
|
17949
|
+
kind: "component",
|
|
17950
|
+
type: i5.UiSwitchComponent,
|
|
17951
|
+
selector: "ui-switch",
|
|
17952
|
+
inputs: [
|
|
17953
|
+
"size",
|
|
17954
|
+
"color",
|
|
17955
|
+
"switchOffColor",
|
|
17956
|
+
"switchColor",
|
|
17957
|
+
"defaultBgColor",
|
|
17958
|
+
"defaultBoColor",
|
|
17959
|
+
"checkedLabel",
|
|
17960
|
+
"uncheckedLabel",
|
|
17961
|
+
"checkedTextColor",
|
|
17962
|
+
"uncheckedTextColor",
|
|
17963
|
+
"beforeChange",
|
|
17964
|
+
"ariaLabel",
|
|
17965
|
+
"checked",
|
|
17966
|
+
"disabled",
|
|
17967
|
+
"reverse",
|
|
17968
|
+
"loading"
|
|
17969
|
+
],
|
|
17970
|
+
outputs: [
|
|
17971
|
+
"change",
|
|
17972
|
+
"changeEvent",
|
|
17973
|
+
"valueChange"
|
|
17974
|
+
]
|
|
17975
|
+
},
|
|
17976
|
+
{
|
|
17977
|
+
kind: "component",
|
|
17978
|
+
type: i6$2.InputContainerComponent,
|
|
17979
|
+
selector: "pw-input-container",
|
|
17980
|
+
inputs: [
|
|
17981
|
+
"name",
|
|
17982
|
+
"controlId",
|
|
17983
|
+
"useAriaLabelledbyOnly",
|
|
17984
|
+
"label",
|
|
17985
|
+
"labelClass",
|
|
17986
|
+
"tooltipPosition",
|
|
17987
|
+
"required",
|
|
17988
|
+
"errorMsg",
|
|
17989
|
+
"isReadOnly",
|
|
17990
|
+
"showTooltip",
|
|
17991
|
+
"tooltipText",
|
|
17992
|
+
"showTriangle",
|
|
17993
|
+
"afterLabel",
|
|
17994
|
+
"showAfterLabel",
|
|
17995
|
+
"showTriangleText",
|
|
17996
|
+
"isLeftTooltip"
|
|
17997
|
+
]
|
|
17998
|
+
},
|
|
17999
|
+
{
|
|
18000
|
+
kind: "directive",
|
|
18001
|
+
type: i10.FormGroupDirective,
|
|
18002
|
+
selector: "[formGroup]",
|
|
18003
|
+
inputs: ["formGroup"],
|
|
18004
|
+
outputs: ["ngSubmit"],
|
|
18005
|
+
exportAs: ["ngForm"]
|
|
18006
|
+
},
|
|
18007
|
+
{
|
|
18008
|
+
kind: "directive",
|
|
18009
|
+
type: i10.FormControlName,
|
|
18010
|
+
selector: "[formControlName]",
|
|
18011
|
+
inputs: [
|
|
18012
|
+
"formControlName",
|
|
18013
|
+
"disabled",
|
|
18014
|
+
"ngModel"
|
|
18015
|
+
],
|
|
18016
|
+
outputs: ["ngModelChange"]
|
|
18017
|
+
},
|
|
18018
|
+
{
|
|
18019
|
+
kind: "pipe",
|
|
18020
|
+
type: i8$2.TranslocoPipe,
|
|
18021
|
+
name: "transloco"
|
|
18022
|
+
}
|
|
18023
|
+
]
|
|
18024
|
+
});
|
|
18025
|
+
}
|
|
18026
|
+
};
|
|
18027
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
18028
|
+
minVersion: "12.0.0",
|
|
18029
|
+
version: "22.2.0",
|
|
18030
|
+
ngImport: i0,
|
|
18031
|
+
type: ProductBackupCardComponent,
|
|
18032
|
+
decorators: [{
|
|
18033
|
+
type: Component,
|
|
18034
|
+
args: [{
|
|
18035
|
+
selector: "pw-product-backup-card",
|
|
18036
|
+
host: { class: "col-12 col-md-8" },
|
|
18037
|
+
standalone: false,
|
|
18038
|
+
template: "<div class=\"row\" [formGroup]=\"form\">\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && form.get('second_payment_required')?.errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n @if (required) {\n <div class=\"col-12 col-md-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentProvider' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentProvider' | transloco\" name=\"second_payment_provider\" controlId=\"product-second_payment_provider\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-second_payment_provider-label'\"\n [options]=\"providers\"\n formControlName=\"second_payment_provider\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n</div>\n"
|
|
18039
|
+
}]
|
|
18040
|
+
}],
|
|
18041
|
+
propDecorators: {
|
|
18042
|
+
form: [{
|
|
18043
|
+
type: Input,
|
|
18044
|
+
args: [{ required: true }]
|
|
18045
|
+
}],
|
|
18046
|
+
provider: [{ type: Input }],
|
|
18047
|
+
submitted: [{ type: Input }]
|
|
18048
|
+
}
|
|
18049
|
+
});
|
|
17811
18050
|
var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseComponent {
|
|
17812
18051
|
constructor(injector, cdr, productService, modalService, adminService) {
|
|
17813
18052
|
super(injector);
|
|
@@ -18147,7 +18386,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
|
|
|
18147
18386
|
selector: "pw-product-details",
|
|
18148
18387
|
usesInheritance: true,
|
|
18149
18388
|
ngImport: i0,
|
|
18150
|
-
template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type — e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\"\n [attr.aria-label]=\"'Label.Name' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\"\n [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\"\n [attr.aria-label]=\"'Admin.Products.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\"\n [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\"\n [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\"\n [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\"\n [attr.aria-label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.LoginDefaultRoute' | transloco\"\n [label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" name=\"login_default_route\" controlId=\"product-login_default_route\">\n <input type=\"text\" id=\"product-login_default_route\" class=\"form-control\" formControlName=\"login_default_route\"\n [placeholder]=\"'Admin.Products.Placeholder.LoginDefaultRoute' | transloco\"\n [attr.aria-label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiselect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n",
|
|
18389
|
+
template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type — e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\"\n [attr.aria-label]=\"'Label.Name' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\"\n [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\"\n [attr.aria-label]=\"'Admin.Products.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <pw-product-backup-card *rbacAllow=\"'SuperAdmin'\" [form]=\"form\" [provider]=\"data?.second_payment_provider\"\n [submitted]=\"submitted\"></pw-product-backup-card>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\"\n [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\"\n [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\"\n [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\"\n [attr.aria-label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.LoginDefaultRoute' | transloco\"\n [label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" name=\"login_default_route\" controlId=\"product-login_default_route\">\n <input type=\"text\" id=\"product-login_default_route\" class=\"form-control\" formControlName=\"login_default_route\"\n [placeholder]=\"'Admin.Products.Placeholder.LoginDefaultRoute' | transloco\"\n [attr.aria-label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiselect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n",
|
|
18151
18390
|
styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"],
|
|
18152
18391
|
dependencies: [
|
|
18153
18392
|
{
|
|
@@ -18546,6 +18785,16 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
|
|
|
18546
18785
|
type: i11.QuillEditorComponent,
|
|
18547
18786
|
selector: "quill-editor"
|
|
18548
18787
|
},
|
|
18788
|
+
{
|
|
18789
|
+
kind: "component",
|
|
18790
|
+
type: ProductBackupCardComponent,
|
|
18791
|
+
selector: "pw-product-backup-card",
|
|
18792
|
+
inputs: [
|
|
18793
|
+
"form",
|
|
18794
|
+
"provider",
|
|
18795
|
+
"submitted"
|
|
18796
|
+
]
|
|
18797
|
+
},
|
|
18549
18798
|
{
|
|
18550
18799
|
kind: "pipe",
|
|
18551
18800
|
type: i5$2.AsyncPipe,
|
|
@@ -18571,7 +18820,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18571
18820
|
args: [{
|
|
18572
18821
|
selector: "pw-product-details",
|
|
18573
18822
|
standalone: false,
|
|
18574
|
-
template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type — e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\"\n [attr.aria-label]=\"'Label.Name' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\"\n [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\"\n [attr.aria-label]=\"'Admin.Products.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\"\n [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\"\n [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\"\n [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\"\n [attr.aria-label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.LoginDefaultRoute' | transloco\"\n [label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" name=\"login_default_route\" controlId=\"product-login_default_route\">\n <input type=\"text\" id=\"product-login_default_route\" class=\"form-control\" formControlName=\"login_default_route\"\n [placeholder]=\"'Admin.Products.Placeholder.LoginDefaultRoute' | transloco\"\n [attr.aria-label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiselect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n",
|
|
18823
|
+
template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type — e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a>{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\"\n [attr.aria-label]=\"'Label.Name' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\"\n [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\"\n [attr.aria-label]=\"'Admin.Products.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <pw-product-backup-card *rbacAllow=\"'SuperAdmin'\" [form]=\"form\" [provider]=\"data?.second_payment_provider\"\n [submitted]=\"submitted\"></pw-product-backup-card>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\"\n [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\"\n [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\"\n [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\"\n [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiselect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\"\n [attr.aria-label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.LoginDefaultRoute' | transloco\"\n [label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" name=\"login_default_route\" controlId=\"product-login_default_route\">\n <input type=\"text\" id=\"product-login_default_route\" class=\"form-control\" formControlName=\"login_default_route\"\n [placeholder]=\"'Admin.Products.Placeholder.LoginDefaultRoute' | transloco\"\n [attr.aria-label]=\"'Admin.Products.LoginDefaultRoute' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiselect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiselect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n",
|
|
18575
18824
|
styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"]
|
|
18576
18825
|
}]
|
|
18577
18826
|
}],
|
|
@@ -23881,6 +24130,430 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
23881
24130
|
{ type: i6$2.ConfirmDialogService }
|
|
23882
24131
|
]
|
|
23883
24132
|
});
|
|
24133
|
+
var SubscriptionInvoicesComponent = class SubscriptionInvoicesComponent extends AppBaseComponent {
|
|
24134
|
+
get masterSubscriptionId() {
|
|
24135
|
+
return PermissionService.selectedSubscription?.id;
|
|
24136
|
+
}
|
|
24137
|
+
get paymentTypeOptions() {
|
|
24138
|
+
return this.paymentTypes.map((value) => ({
|
|
24139
|
+
value,
|
|
24140
|
+
label: this.translation.translate(`Admin.Subscriptions.Invoices.PaymentType.${value}`)
|
|
24141
|
+
}));
|
|
24142
|
+
}
|
|
24143
|
+
constructor(subscriptionInvoiceService, injector, cdr) {
|
|
24144
|
+
super(injector);
|
|
24145
|
+
this.subscriptionInvoiceService = subscriptionInvoiceService;
|
|
24146
|
+
this.cdr = cdr;
|
|
24147
|
+
this.routers = ROUTERS;
|
|
24148
|
+
this.canOpenProduct = false;
|
|
24149
|
+
this.isLoaded = false;
|
|
24150
|
+
this.loading = true;
|
|
24151
|
+
this.loadFailed = false;
|
|
24152
|
+
this.paymentType = null;
|
|
24153
|
+
this.data = {
|
|
24154
|
+
invoices: [],
|
|
24155
|
+
object_count: 0,
|
|
24156
|
+
unfiltered_count: 0
|
|
24157
|
+
};
|
|
24158
|
+
this.paymentTypes = ["primary", "secondary"];
|
|
24159
|
+
this.page = 1;
|
|
24160
|
+
this.destroyRef = inject(DestroyRef);
|
|
24161
|
+
}
|
|
24162
|
+
ngOnInit() {
|
|
24163
|
+
this.canOpenProduct = this.isGranted("Pages.Admin.Product");
|
|
24164
|
+
this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
|
|
24165
|
+
this.id = Number(params["id"]);
|
|
24166
|
+
this.page = 1;
|
|
24167
|
+
this.isLoaded = false;
|
|
24168
|
+
this.getInvoices();
|
|
24169
|
+
});
|
|
24170
|
+
}
|
|
24171
|
+
onLazyLoad(event) {
|
|
24172
|
+
this.page = HelperService.onTableLazyLoad(event).page;
|
|
24173
|
+
this.getInvoices();
|
|
24174
|
+
}
|
|
24175
|
+
onPaymentTypeChange() {
|
|
24176
|
+
this.page = 1;
|
|
24177
|
+
this.getInvoices();
|
|
24178
|
+
}
|
|
24179
|
+
download(invoice) {
|
|
24180
|
+
const tab = window.open("", "_blank");
|
|
24181
|
+
this.subscriptionInvoiceService.getDownloadUrl(this.id, invoice.id, this.masterSubscriptionId).subscribe({
|
|
24182
|
+
next: ({ url }) => {
|
|
24183
|
+
if (tab) {
|
|
24184
|
+
tab.opener = null;
|
|
24185
|
+
tab.location.href = url;
|
|
24186
|
+
}
|
|
24187
|
+
},
|
|
24188
|
+
error: () => tab?.close()
|
|
24189
|
+
});
|
|
24190
|
+
}
|
|
24191
|
+
amount(cents) {
|
|
24192
|
+
return (cents ?? 0) / 100;
|
|
24193
|
+
}
|
|
24194
|
+
getInvoices() {
|
|
24195
|
+
if (!this.id) return;
|
|
24196
|
+
this.loading = true;
|
|
24197
|
+
this.loadFailed = false;
|
|
24198
|
+
this.subscriptionInvoiceService.getAll(this.id, {
|
|
24199
|
+
subscription_id: this.masterSubscriptionId,
|
|
24200
|
+
page: this.page,
|
|
24201
|
+
page_size: PAGE_SIZE,
|
|
24202
|
+
payment_type: this.paymentType
|
|
24203
|
+
}).subscribe({
|
|
24204
|
+
next: (response) => this.data = response,
|
|
24205
|
+
error: () => this.loadFailed = true
|
|
24206
|
+
}).add(() => {
|
|
24207
|
+
this.loading = false;
|
|
24208
|
+
this.isLoaded = true;
|
|
24209
|
+
this.cdr.markForCheck();
|
|
24210
|
+
});
|
|
24211
|
+
}
|
|
24212
|
+
static {
|
|
24213
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
24214
|
+
minVersion: "12.0.0",
|
|
24215
|
+
version: "22.2.0",
|
|
24216
|
+
ngImport: i0,
|
|
24217
|
+
type: SubscriptionInvoicesComponent,
|
|
24218
|
+
deps: [
|
|
24219
|
+
{ token: i1$1.SubscriptionInvoiceService },
|
|
24220
|
+
{ token: i0.Injector },
|
|
24221
|
+
{ token: i0.ChangeDetectorRef }
|
|
24222
|
+
],
|
|
24223
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
24224
|
+
});
|
|
24225
|
+
}
|
|
24226
|
+
static {
|
|
24227
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
24228
|
+
minVersion: "17.0.0",
|
|
24229
|
+
version: "22.2.0",
|
|
24230
|
+
type: SubscriptionInvoicesComponent,
|
|
24231
|
+
isStandalone: false,
|
|
24232
|
+
selector: "pw-subscription-invoices",
|
|
24233
|
+
usesInheritance: true,
|
|
24234
|
+
ngImport: i0,
|
|
24235
|
+
template: "<pw-loader [isVisible]=\"!isLoaded\"></pw-loader>\n@if (isLoaded) {\n @if (loadFailed) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.Invoices.LoadError' | transloco\" />\n } @else if (data.unfiltered_count === 0) {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Admin.Subscriptions.Invoices.NoDataMessage' | transloco\"\n [description]=\"'Admin.Subscriptions.Invoices.NoDataDescription' | transloco\" />\n } @else {\n <div class=\"primeng-datatable-container actions-collapsed mt table-responsive subscription-invoices\">\n <p-table #dt\n [value]=\"data.invoices\"\n [paginator]=\"data.object_count > PAGE_SIZE\"\n [lazy]=\"true\"\n [lazyLoadOnInit]=\"false\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template #caption>\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select inputId=\"subscription-invoices-payment-type\"\n [options]=\"paymentTypeOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"paymentType\"\n (onChange)=\"onPaymentTypeChange()\"\n [showClear]=\"true\"\n [placeholder]=\"'Admin.Subscriptions.Invoices.FilterPaymentType' | transloco\"\n appendTo=\"body\">\n </p-select>\n </div>\n </div>\n </ng-template>\n <ng-template #header>\n <tr>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.Number' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.Date' | transloco }}</th>\n <th scope=\"col\">{{ 'Label.Product' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.PaymentTypeColumn' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.PaidVia' | transloco }}</th>\n <th scope=\"col\" class=\"text-end\">{{ 'Label.Total' | transloco }}</th>\n <th scope=\"col\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template #body let-invoice>\n <tr>\n <td [attr.data-head]=\"'Admin.Subscriptions.Invoices.Number' | transloco\"><span class=\"invoice-number\">{{ invoice.number }}</span></td>\n <td class=\"col-date\" [attr.data-head]=\"'Admin.Subscriptions.Invoices.Date' | transloco\">{{ invoice.date ? (invoice.date | dateFormat) : '-' }}</td>\n <td class=\"col-product\" [attr.data-head]=\"'Label.Product' | transloco\">\n @if (invoice.product && canOpenProduct) {\n <a [routerLink]=\"[routers.productDetails + invoice.product.id]\">{{ invoice.product.name }}</a>\n } @else {\n {{ invoice.product?.name || '-' }}\n }\n </td>\n <td class=\"col-type\" [attr.data-head]=\"'Admin.Subscriptions.Invoices.PaymentTypeColumn' | transloco\">\n <span class=\"badge\" [ngClass]=\"invoice.payment_type === 'primary' ? 'bg-cyan' : 'bg-warning'\">\n {{ 'Admin.Subscriptions.Invoices.PaymentType.' + invoice.payment_type | transloco }}\n </span>\n </td>\n <td [attr.data-head]=\"'Admin.Subscriptions.Invoices.PaidVia' | transloco\"><span class=\"text-capitalize\">{{ invoice.paid_via }}</span></td>\n <td class=\"col-total text-end\" [attr.data-head]=\"'Label.Total' | transloco\">\n {{ amount(invoice.total_in_cents) | currency: (invoice.currency || 'USD') : 'symbol' : '1.2-2' }}\n </td>\n <td class=\"col-action\" data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (invoice.downloadable) {\n <li role=\"button\" tabindex=\"0\"\n data-cy=\"download-subscription-invoice\"\n [pTooltip]=\"'Admin.Subscriptions.Invoices.Download' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\"\n [attr.aria-label]=\"'Admin.Subscriptions.Invoices.Download' | transloco\"\n (click)=\"download(invoice)\" (keydown.enter)=\"download(invoice)\">\n <i class=\"fa fa-download edit-icon\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li class=\"invoice-download-disabled\" role=\"img\"\n [pTooltip]=\"'Admin.Subscriptions.Invoices.NoFile' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\"\n [attr.aria-label]=\"'Admin.Subscriptions.Invoices.NoFile' | transloco\">\n <i class=\"fa fa-download edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0) {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Search.NoDataMessage' | transloco\"\n [description]=\"'Search.NoDataDescription' | transloco\" />\n } @else {\n <pw-records-summary [showing]=\"data.invoices.length\" [total]=\"data.object_count\" />\n }\n </div>\n }\n}\n",
|
|
24236
|
+
styles: [".subscription-invoices .invoice-number{color:#5a6473;font-variant-numeric:tabular-nums}.subscription-invoices td.col-total,.subscription-invoices td.col-date{white-space:nowrap;font-variant-numeric:tabular-nums}.subscription-invoices .invoice-download-disabled{cursor:not-allowed}.subscription-invoices .invoice-download-disabled .edit-icon,.subscription-invoices .invoice-download-disabled:hover .edit-icon{color:#a8afbc!important}\n"],
|
|
24237
|
+
dependencies: [
|
|
24238
|
+
{
|
|
24239
|
+
kind: "component",
|
|
24240
|
+
type: i2$3.Table,
|
|
24241
|
+
selector: "p-table",
|
|
24242
|
+
inputs: [
|
|
24243
|
+
"frozenColumns",
|
|
24244
|
+
"frozenValue",
|
|
24245
|
+
"tableStyle",
|
|
24246
|
+
"tableStyleClass",
|
|
24247
|
+
"paginator",
|
|
24248
|
+
"pageLinks",
|
|
24249
|
+
"rowsPerPageOptions",
|
|
24250
|
+
"alwaysShowPaginator",
|
|
24251
|
+
"paginatorPosition",
|
|
24252
|
+
"paginatorStyleClass",
|
|
24253
|
+
"paginatorDropdownAppendTo",
|
|
24254
|
+
"paginatorDropdownScrollHeight",
|
|
24255
|
+
"currentPageReportTemplate",
|
|
24256
|
+
"showCurrentPageReport",
|
|
24257
|
+
"showJumpToPageDropdown",
|
|
24258
|
+
"showJumpToPageInput",
|
|
24259
|
+
"showFirstLastIcon",
|
|
24260
|
+
"showPageLinks",
|
|
24261
|
+
"defaultSortOrder",
|
|
24262
|
+
"sortMode",
|
|
24263
|
+
"resetPageOnSort",
|
|
24264
|
+
"selectionMode",
|
|
24265
|
+
"selectionPageOnly",
|
|
24266
|
+
"contextMenuSelection",
|
|
24267
|
+
"dataKey",
|
|
24268
|
+
"metaKeySelection",
|
|
24269
|
+
"rowSelectable",
|
|
24270
|
+
"rowTrackBy",
|
|
24271
|
+
"lazy",
|
|
24272
|
+
"lazyLoadOnInit",
|
|
24273
|
+
"compareSelectionBy",
|
|
24274
|
+
"csvSeparator",
|
|
24275
|
+
"exportFilename",
|
|
24276
|
+
"filters",
|
|
24277
|
+
"globalFilterFields",
|
|
24278
|
+
"filterDelay",
|
|
24279
|
+
"filterLocale",
|
|
24280
|
+
"expandedRowKeys",
|
|
24281
|
+
"editingRowKeys",
|
|
24282
|
+
"rowExpandMode",
|
|
24283
|
+
"scrollable",
|
|
24284
|
+
"rowGroupMode",
|
|
24285
|
+
"scrollHeight",
|
|
24286
|
+
"virtualScroll",
|
|
24287
|
+
"virtualScrollItemSize",
|
|
24288
|
+
"virtualScrollOptions",
|
|
24289
|
+
"virtualScrollDelay",
|
|
24290
|
+
"frozenWidth",
|
|
24291
|
+
"contextMenu",
|
|
24292
|
+
"resizableColumns",
|
|
24293
|
+
"columnResizeMode",
|
|
24294
|
+
"reorderableColumns",
|
|
24295
|
+
"loading",
|
|
24296
|
+
"loadingIcon",
|
|
24297
|
+
"showLoader",
|
|
24298
|
+
"rowHover",
|
|
24299
|
+
"customSort",
|
|
24300
|
+
"showInitialSortBadge",
|
|
24301
|
+
"exportFunction",
|
|
24302
|
+
"exportHeader",
|
|
24303
|
+
"stateKey",
|
|
24304
|
+
"stateStorage",
|
|
24305
|
+
"editMode",
|
|
24306
|
+
"groupRowsBy",
|
|
24307
|
+
"size",
|
|
24308
|
+
"showGridlines",
|
|
24309
|
+
"stripedRows",
|
|
24310
|
+
"groupRowsByOrder",
|
|
24311
|
+
"paginatorLocale",
|
|
24312
|
+
"value",
|
|
24313
|
+
"columns",
|
|
24314
|
+
"first",
|
|
24315
|
+
"rows",
|
|
24316
|
+
"totalRecords",
|
|
24317
|
+
"sortField",
|
|
24318
|
+
"sortOrder",
|
|
24319
|
+
"multiSortMeta",
|
|
24320
|
+
"selection",
|
|
24321
|
+
"selectAll"
|
|
24322
|
+
],
|
|
24323
|
+
outputs: [
|
|
24324
|
+
"contextMenuSelectionChange",
|
|
24325
|
+
"firstChange",
|
|
24326
|
+
"rowsChange",
|
|
24327
|
+
"totalRecordsChange",
|
|
24328
|
+
"selectionChange",
|
|
24329
|
+
"selectAllChange",
|
|
24330
|
+
"onRowSelect",
|
|
24331
|
+
"onRowUnselect",
|
|
24332
|
+
"onPage",
|
|
24333
|
+
"onSort",
|
|
24334
|
+
"onFilter",
|
|
24335
|
+
"onLazyLoad",
|
|
24336
|
+
"onRowExpand",
|
|
24337
|
+
"onRowCollapse",
|
|
24338
|
+
"onContextMenuSelect",
|
|
24339
|
+
"onColResize",
|
|
24340
|
+
"onColReorder",
|
|
24341
|
+
"onRowReorder",
|
|
24342
|
+
"onEditInit",
|
|
24343
|
+
"onEditComplete",
|
|
24344
|
+
"onEditCancel",
|
|
24345
|
+
"onHeaderCheckboxToggle",
|
|
24346
|
+
"sortFunction",
|
|
24347
|
+
"onStateSave",
|
|
24348
|
+
"onStateRestore"
|
|
24349
|
+
]
|
|
24350
|
+
},
|
|
24351
|
+
{
|
|
24352
|
+
kind: "directive",
|
|
24353
|
+
type: i3$3.Tooltip,
|
|
24354
|
+
selector: "[pTooltip]",
|
|
24355
|
+
inputs: [
|
|
24356
|
+
"tooltipPosition",
|
|
24357
|
+
"tooltipEvent",
|
|
24358
|
+
"positionStyle",
|
|
24359
|
+
"tooltipStyleClass",
|
|
24360
|
+
"tooltipZIndex",
|
|
24361
|
+
"escape",
|
|
24362
|
+
"showDelay",
|
|
24363
|
+
"hideDelay",
|
|
24364
|
+
"life",
|
|
24365
|
+
"positionTop",
|
|
24366
|
+
"positionLeft",
|
|
24367
|
+
"autoHide",
|
|
24368
|
+
"fitContent",
|
|
24369
|
+
"hideOnEscape",
|
|
24370
|
+
"showOnEllipsis",
|
|
24371
|
+
"pTooltip",
|
|
24372
|
+
"tooltipDisabled",
|
|
24373
|
+
"tooltipOptions",
|
|
24374
|
+
"appendTo",
|
|
24375
|
+
"pTooltipPT",
|
|
24376
|
+
"pTooltipUnstyled"
|
|
24377
|
+
]
|
|
24378
|
+
},
|
|
24379
|
+
{
|
|
24380
|
+
kind: "component",
|
|
24381
|
+
type: i2$2.Select,
|
|
24382
|
+
selector: "p-select",
|
|
24383
|
+
inputs: [
|
|
24384
|
+
"id",
|
|
24385
|
+
"scrollHeight",
|
|
24386
|
+
"filter",
|
|
24387
|
+
"panelStyle",
|
|
24388
|
+
"panelStyleClass",
|
|
24389
|
+
"readonly",
|
|
24390
|
+
"editable",
|
|
24391
|
+
"tabindex",
|
|
24392
|
+
"placeholder",
|
|
24393
|
+
"loadingIcon",
|
|
24394
|
+
"filterPlaceholder",
|
|
24395
|
+
"filterLocale",
|
|
24396
|
+
"inputId",
|
|
24397
|
+
"dataKey",
|
|
24398
|
+
"filterBy",
|
|
24399
|
+
"filterFields",
|
|
24400
|
+
"autofocus",
|
|
24401
|
+
"resetFilterOnHide",
|
|
24402
|
+
"checkmark",
|
|
24403
|
+
"dropdownIcon",
|
|
24404
|
+
"loading",
|
|
24405
|
+
"optionLabel",
|
|
24406
|
+
"optionValue",
|
|
24407
|
+
"optionDisabled",
|
|
24408
|
+
"optionGroupLabel",
|
|
24409
|
+
"optionGroupChildren",
|
|
24410
|
+
"group",
|
|
24411
|
+
"showClear",
|
|
24412
|
+
"emptyFilterMessage",
|
|
24413
|
+
"emptyMessage",
|
|
24414
|
+
"lazy",
|
|
24415
|
+
"virtualScroll",
|
|
24416
|
+
"virtualScrollItemSize",
|
|
24417
|
+
"virtualScrollOptions",
|
|
24418
|
+
"overlayOptions",
|
|
24419
|
+
"ariaFilterLabel",
|
|
24420
|
+
"ariaLabel",
|
|
24421
|
+
"ariaLabelledBy",
|
|
24422
|
+
"filterMatchMode",
|
|
24423
|
+
"tooltip",
|
|
24424
|
+
"tooltipPosition",
|
|
24425
|
+
"tooltipPositionStyle",
|
|
24426
|
+
"tooltipStyleClass",
|
|
24427
|
+
"focusOnHover",
|
|
24428
|
+
"selectOnFocus",
|
|
24429
|
+
"multiple",
|
|
24430
|
+
"autoOptionFocus",
|
|
24431
|
+
"autofocusFilter",
|
|
24432
|
+
"filterValue",
|
|
24433
|
+
"options",
|
|
24434
|
+
"appendTo",
|
|
24435
|
+
"motionOptions"
|
|
24436
|
+
],
|
|
24437
|
+
outputs: [
|
|
24438
|
+
"onChange",
|
|
24439
|
+
"onFilter",
|
|
24440
|
+
"onFocus",
|
|
24441
|
+
"onBlur",
|
|
24442
|
+
"onClick",
|
|
24443
|
+
"onShow",
|
|
24444
|
+
"onHide",
|
|
24445
|
+
"onClear",
|
|
24446
|
+
"onLazyLoad"
|
|
24447
|
+
]
|
|
24448
|
+
},
|
|
24449
|
+
{
|
|
24450
|
+
kind: "component",
|
|
24451
|
+
type: i4$3.AppLoaderComponent,
|
|
24452
|
+
selector: "pw-loader",
|
|
24453
|
+
inputs: [
|
|
24454
|
+
"isVisible",
|
|
24455
|
+
"closeOnOutsideClick",
|
|
24456
|
+
"autoCloseTimeOut"
|
|
24457
|
+
]
|
|
24458
|
+
},
|
|
24459
|
+
{
|
|
24460
|
+
kind: "directive",
|
|
24461
|
+
type: i5$2.NgClass,
|
|
24462
|
+
selector: "[ngClass]",
|
|
24463
|
+
inputs: ["class", "ngClass"]
|
|
24464
|
+
},
|
|
24465
|
+
{
|
|
24466
|
+
kind: "directive",
|
|
24467
|
+
type: i10.NgControlStatus,
|
|
24468
|
+
selector: "[formControlName],[ngModel],[formControl]"
|
|
24469
|
+
},
|
|
24470
|
+
{
|
|
24471
|
+
kind: "directive",
|
|
24472
|
+
type: i10.NgModel,
|
|
24473
|
+
selector: "[ngModel]:not([formControlName]):not([formControl])",
|
|
24474
|
+
inputs: [
|
|
24475
|
+
"name",
|
|
24476
|
+
"disabled",
|
|
24477
|
+
"ngModel",
|
|
24478
|
+
"ngModelOptions"
|
|
24479
|
+
],
|
|
24480
|
+
outputs: ["ngModelChange"],
|
|
24481
|
+
exportAs: ["ngModel"]
|
|
24482
|
+
},
|
|
24483
|
+
{
|
|
24484
|
+
kind: "component",
|
|
24485
|
+
type: i6$2.NoDataComponent,
|
|
24486
|
+
selector: "pw-no-data",
|
|
24487
|
+
inputs: [
|
|
24488
|
+
"message",
|
|
24489
|
+
"description",
|
|
24490
|
+
"withImage"
|
|
24491
|
+
]
|
|
24492
|
+
},
|
|
24493
|
+
{
|
|
24494
|
+
kind: "component",
|
|
24495
|
+
type: i6$2.RecordsSummaryComponent,
|
|
24496
|
+
selector: "pw-records-summary",
|
|
24497
|
+
inputs: ["showing", "total"]
|
|
24498
|
+
},
|
|
24499
|
+
{
|
|
24500
|
+
kind: "directive",
|
|
24501
|
+
type: i7$2.RouterLink,
|
|
24502
|
+
selector: "[routerLink]",
|
|
24503
|
+
inputs: [
|
|
24504
|
+
"target",
|
|
24505
|
+
"queryParams",
|
|
24506
|
+
"fragment",
|
|
24507
|
+
"queryParamsHandling",
|
|
24508
|
+
"state",
|
|
24509
|
+
"info",
|
|
24510
|
+
"relativeTo",
|
|
24511
|
+
"preserveFragment",
|
|
24512
|
+
"skipLocationChange",
|
|
24513
|
+
"replaceUrl",
|
|
24514
|
+
"browserUrl",
|
|
24515
|
+
"routerLink"
|
|
24516
|
+
]
|
|
24517
|
+
},
|
|
24518
|
+
{
|
|
24519
|
+
kind: "pipe",
|
|
24520
|
+
type: i5$2.CurrencyPipe,
|
|
24521
|
+
name: "currency"
|
|
24522
|
+
},
|
|
24523
|
+
{
|
|
24524
|
+
kind: "pipe",
|
|
24525
|
+
type: i8$2.TranslocoPipe,
|
|
24526
|
+
name: "transloco"
|
|
24527
|
+
},
|
|
24528
|
+
{
|
|
24529
|
+
kind: "pipe",
|
|
24530
|
+
type: i9.DateFormatPipe,
|
|
24531
|
+
name: "dateFormat"
|
|
24532
|
+
}
|
|
24533
|
+
]
|
|
24534
|
+
});
|
|
24535
|
+
}
|
|
24536
|
+
};
|
|
24537
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
24538
|
+
minVersion: "12.0.0",
|
|
24539
|
+
version: "22.2.0",
|
|
24540
|
+
ngImport: i0,
|
|
24541
|
+
type: SubscriptionInvoicesComponent,
|
|
24542
|
+
decorators: [{
|
|
24543
|
+
type: Component,
|
|
24544
|
+
args: [{
|
|
24545
|
+
selector: "pw-subscription-invoices",
|
|
24546
|
+
standalone: false,
|
|
24547
|
+
template: "<pw-loader [isVisible]=\"!isLoaded\"></pw-loader>\n@if (isLoaded) {\n @if (loadFailed) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.Invoices.LoadError' | transloco\" />\n } @else if (data.unfiltered_count === 0) {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Admin.Subscriptions.Invoices.NoDataMessage' | transloco\"\n [description]=\"'Admin.Subscriptions.Invoices.NoDataDescription' | transloco\" />\n } @else {\n <div class=\"primeng-datatable-container actions-collapsed mt table-responsive subscription-invoices\">\n <p-table #dt\n [value]=\"data.invoices\"\n [paginator]=\"data.object_count > PAGE_SIZE\"\n [lazy]=\"true\"\n [lazyLoadOnInit]=\"false\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template #caption>\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select inputId=\"subscription-invoices-payment-type\"\n [options]=\"paymentTypeOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"paymentType\"\n (onChange)=\"onPaymentTypeChange()\"\n [showClear]=\"true\"\n [placeholder]=\"'Admin.Subscriptions.Invoices.FilterPaymentType' | transloco\"\n appendTo=\"body\">\n </p-select>\n </div>\n </div>\n </ng-template>\n <ng-template #header>\n <tr>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.Number' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.Date' | transloco }}</th>\n <th scope=\"col\">{{ 'Label.Product' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.PaymentTypeColumn' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.Subscriptions.Invoices.PaidVia' | transloco }}</th>\n <th scope=\"col\" class=\"text-end\">{{ 'Label.Total' | transloco }}</th>\n <th scope=\"col\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template #body let-invoice>\n <tr>\n <td [attr.data-head]=\"'Admin.Subscriptions.Invoices.Number' | transloco\"><span class=\"invoice-number\">{{ invoice.number }}</span></td>\n <td class=\"col-date\" [attr.data-head]=\"'Admin.Subscriptions.Invoices.Date' | transloco\">{{ invoice.date ? (invoice.date | dateFormat) : '-' }}</td>\n <td class=\"col-product\" [attr.data-head]=\"'Label.Product' | transloco\">\n @if (invoice.product && canOpenProduct) {\n <a [routerLink]=\"[routers.productDetails + invoice.product.id]\">{{ invoice.product.name }}</a>\n } @else {\n {{ invoice.product?.name || '-' }}\n }\n </td>\n <td class=\"col-type\" [attr.data-head]=\"'Admin.Subscriptions.Invoices.PaymentTypeColumn' | transloco\">\n <span class=\"badge\" [ngClass]=\"invoice.payment_type === 'primary' ? 'bg-cyan' : 'bg-warning'\">\n {{ 'Admin.Subscriptions.Invoices.PaymentType.' + invoice.payment_type | transloco }}\n </span>\n </td>\n <td [attr.data-head]=\"'Admin.Subscriptions.Invoices.PaidVia' | transloco\"><span class=\"text-capitalize\">{{ invoice.paid_via }}</span></td>\n <td class=\"col-total text-end\" [attr.data-head]=\"'Label.Total' | transloco\">\n {{ amount(invoice.total_in_cents) | currency: (invoice.currency || 'USD') : 'symbol' : '1.2-2' }}\n </td>\n <td class=\"col-action\" data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (invoice.downloadable) {\n <li role=\"button\" tabindex=\"0\"\n data-cy=\"download-subscription-invoice\"\n [pTooltip]=\"'Admin.Subscriptions.Invoices.Download' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\"\n [attr.aria-label]=\"'Admin.Subscriptions.Invoices.Download' | transloco\"\n (click)=\"download(invoice)\" (keydown.enter)=\"download(invoice)\">\n <i class=\"fa fa-download edit-icon\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li class=\"invoice-download-disabled\" role=\"img\"\n [pTooltip]=\"'Admin.Subscriptions.Invoices.NoFile' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\"\n [attr.aria-label]=\"'Admin.Subscriptions.Invoices.NoFile' | transloco\">\n <i class=\"fa fa-download edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0) {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Search.NoDataMessage' | transloco\"\n [description]=\"'Search.NoDataDescription' | transloco\" />\n } @else {\n <pw-records-summary [showing]=\"data.invoices.length\" [total]=\"data.object_count\" />\n }\n </div>\n }\n}\n",
|
|
24548
|
+
styles: [".subscription-invoices .invoice-number{color:#5a6473;font-variant-numeric:tabular-nums}.subscription-invoices td.col-total,.subscription-invoices td.col-date{white-space:nowrap;font-variant-numeric:tabular-nums}.subscription-invoices .invoice-download-disabled{cursor:not-allowed}.subscription-invoices .invoice-download-disabled .edit-icon,.subscription-invoices .invoice-download-disabled:hover .edit-icon{color:#a8afbc!important}\n"]
|
|
24549
|
+
}]
|
|
24550
|
+
}],
|
|
24551
|
+
ctorParameters: () => [
|
|
24552
|
+
{ type: i1$1.SubscriptionInvoiceService },
|
|
24553
|
+
{ type: i0.Injector },
|
|
24554
|
+
{ type: i0.ChangeDetectorRef }
|
|
24555
|
+
]
|
|
24556
|
+
});
|
|
23884
24557
|
var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
23885
24558
|
static {
|
|
23886
24559
|
this.commaSeparatedEmailsPatternStr = String.raw`/^([^\s@,]+@[^\s@,]+\.[^\s@,]+)(,[^\s@,]+@[^\s@,]+\.[^\s@,]+)*$/`;
|
|
@@ -23909,7 +24582,8 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
|
|
|
23909
24582
|
"subscription",
|
|
23910
24583
|
"products",
|
|
23911
24584
|
"members",
|
|
23912
|
-
"ambassadors"
|
|
24585
|
+
"ambassadors",
|
|
24586
|
+
"invoices"
|
|
23913
24587
|
];
|
|
23914
24588
|
this.commaSeparatedEmails = (control) => {
|
|
23915
24589
|
const raw = control?.value;
|
|
@@ -24104,7 +24778,7 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
|
|
|
24104
24778
|
selector: "pw-subscription-details",
|
|
24105
24779
|
usesInheritance: true,
|
|
24106
24780
|
ngImport: i0,
|
|
24107
|
-
template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiselect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n",
|
|
24781
|
+
template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiselect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>{{ 'Admin.Subscriptions.Invoices.Tab' | transloco }}</a>\n <ng-template ngbNavContent><pw-subscription-invoices></pw-subscription-invoices></ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n",
|
|
24108
24782
|
styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"],
|
|
24109
24783
|
dependencies: [
|
|
24110
24784
|
{
|
|
@@ -24551,6 +25225,11 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
|
|
|
24551
25225
|
type: SubscriptionAgentsListComponent,
|
|
24552
25226
|
selector: "pw-subscription-agents-list"
|
|
24553
25227
|
},
|
|
25228
|
+
{
|
|
25229
|
+
kind: "component",
|
|
25230
|
+
type: SubscriptionInvoicesComponent,
|
|
25231
|
+
selector: "pw-subscription-invoices"
|
|
25232
|
+
},
|
|
24554
25233
|
{
|
|
24555
25234
|
kind: "pipe",
|
|
24556
25235
|
type: i5$2.AsyncPipe,
|
|
@@ -24575,7 +25254,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
24575
25254
|
args: [{
|
|
24576
25255
|
selector: "pw-subscription-details",
|
|
24577
25256
|
standalone: false,
|
|
24578
|
-
template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiselect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n",
|
|
25257
|
+
template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiselect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiselect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>{{ 'Admin.Subscriptions.Invoices.Tab' | transloco }}</a>\n <ng-template ngbNavContent><pw-subscription-invoices></pw-subscription-invoices></ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n",
|
|
24579
25258
|
styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"]
|
|
24580
25259
|
}]
|
|
24581
25260
|
}],
|
|
@@ -36964,6 +37643,7 @@ var AdminModule = class AdminModule {
|
|
|
36964
37643
|
NewsletterItemDetailsComponent,
|
|
36965
37644
|
NewsLetterItemViewComponent,
|
|
36966
37645
|
ProductDetailsComponent,
|
|
37646
|
+
ProductBackupCardComponent,
|
|
36967
37647
|
RoleDetailsComponent,
|
|
36968
37648
|
TagsTabsComponent,
|
|
36969
37649
|
TipComponent,
|
|
@@ -37034,6 +37714,7 @@ var AdminModule = class AdminModule {
|
|
|
37034
37714
|
SubscriptionUsersComponent,
|
|
37035
37715
|
AddMembersComponent,
|
|
37036
37716
|
SubscriptionAgentsListComponent,
|
|
37717
|
+
SubscriptionInvoicesComponent,
|
|
37037
37718
|
SubscriptionInsightTabsComponent,
|
|
37038
37719
|
ContactUsListComponent,
|
|
37039
37720
|
IncidentListComponent,
|
|
@@ -37173,6 +37854,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
37173
37854
|
NewsletterItemDetailsComponent,
|
|
37174
37855
|
NewsLetterItemViewComponent,
|
|
37175
37856
|
ProductDetailsComponent,
|
|
37857
|
+
ProductBackupCardComponent,
|
|
37176
37858
|
RoleDetailsComponent,
|
|
37177
37859
|
TagsTabsComponent,
|
|
37178
37860
|
TipComponent,
|
|
@@ -37243,6 +37925,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
37243
37925
|
SubscriptionUsersComponent,
|
|
37244
37926
|
AddMembersComponent,
|
|
37245
37927
|
SubscriptionAgentsListComponent,
|
|
37928
|
+
SubscriptionInvoicesComponent,
|
|
37246
37929
|
SubscriptionInsightTabsComponent,
|
|
37247
37930
|
ContactUsListComponent,
|
|
37248
37931
|
IncidentListComponent,
|