@posiwise/user-module 0.0.140 → 0.0.141
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.
|
@@ -756,11 +756,11 @@ class SubscriptionCredentialComponent extends AppBaseComponent {
|
|
|
756
756
|
super.ngOnDestroy();
|
|
757
757
|
}
|
|
758
758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SubscriptionCredentialComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$1.SubscriptionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
759
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SubscriptionCredentialComponent, isStandalone: false, selector: "pw-subscription-credential", viewQueries: [{ propertyName: "passwordValidationModalForRevealCredential", first: true, predicate: ["passwordValidationModalForRevealCredential"], descendants: true }, { propertyName: "passwordValidationModalForEditCredential", first: true, predicate: ["passwordValidationModalForEditCredential"], descendants: true }, { propertyName: "passwordValidationModalForAddCredential", first: true, predicate: ["passwordValidationModalForAddCredential"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><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>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <label id=\"subscription-credential-select-label\">Credential <span class=\"text-danger required-icon\">*</span> </label>\n <p-select\n [attr.aria-labelledby]=\"'subscription-credential-select-label'\"\n [options]=\"uniqueCredential\"\n [placeholder]=\"'Select credential'\"\n optionLabel=\"name\"\n optionValue=\"name\"\n (onChange)=\"selectedOption($event)\">\n </p-select>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4\"\n *ngIf=\"credentialsSelect?.length\">\n <div class=\"card pb-2 pt-2 overflow-visible\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <form [formGroup]=\"form\"\n novalidate\n (ngSubmit)=\"saveCredentials()\">\n <div formArrayName=\"credentials\">\n <div *ngFor=\"\n let credential of credentialsGroup.controls;\n let i = index\n \">\n <div [formGroupName]=\"i\">\n <div class=\"mb-3\">\n <pw-input-container label=\"{{\n credential.get('field').value\n }}\"\n [class.info-circle]=\"\n credential.get('description').value\n \"\n name=\"value\"\n errorMsg=\"Please enter value\">\n <span *ngIf=\"\n credential.get('description')\n .value\n \"\n class=\"tooltiptext gradient-custom-branding\">{{\n credential.get('description')\n .value\n }}</span>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"value\"\n [ngClass]=\"{\n 'is-invalid':\n submitted &&\n credential.get('value')\n .invalid\n }\" id=\"input_value_1\" name=\"input_value_1\"/>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\" >\n {{ 'Button.Back' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!showForm\">\n <div class=\"row\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h2 class=\"mt-3\">Credentials</h2>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n (click)=\"openCredentialsForAdd()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Credential' }}\n </button>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"row my-4\">\n <div class=\"col-12 col-md-6 col-xl-4 mt-3 credential-cards\"\n *ngFor=\"let credential of credentials\">\n <div class=\"card\">\n <h2 class=\"credential-field mt-3\">{{ credential.credential_name }}</h2>\n <div class=\"card-content\"\n *ngFor=\"let subscriptionCredential of credential.credentials\">\n <div class=\"card-header\">\n <div>\n <strong class=\"d-block\">{{ subscriptionCredential.field }}:</strong>\n <input class=\"credential-value\"\n [type]=\"\n credentialName === credential.credential_name\n ? 'text'\n : 'password'\n \"\n readonly\n #input\n [value]=\"subscriptionCredential?.value\" id=\"input_text_5520\" name=\"input_text_5520\" />\n </div>\n </div>\n <div class=\"card-footer\">\n <div class=\"float-end px-2\">\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName !== credential.credential_name\"\n (click)=\"revealCredentials(credential)\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.RevealCredential'\n | transloco\n }}\n </button>\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName === credential.credential_name\"\n (click)=\"hideCredentials()\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.HideCredential'\n | transloco\n }}\n </button>\n <a class=\"me-2 my-1\"\n aria-label=\"Edit Credential\"\n (click)=\"openCredentialsForEdit(credential.credential_name)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"allSubscriptionCredentials?.length === 0 && isLoaded\"\n class=\"clearboth\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.Subscriptions.SubscriptionCredentials.NoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n</ng-container>\n<!-- password validation modal for reveal Credential -->\n<pw-password-validation #passwordValidationModalForRevealCredential\n (successEvent)=\"showCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Edit Credential -->\n<pw-password-validation #passwordValidationModalForEditCredential\n (successEvent)=\"editCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Add Credential -->\n<pw-password-validation #passwordValidationModalForAddCredential\n (successEvent)=\"showEditForm()\">\n</pw-password-validation>\n", styles: [".credential-field{text-align:center}.card .card-header{padding:0 24px}.credentials-field{border:0}.credential-value{border:0;width:100%}.overflow-visible{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SubscriptionCredentialComponent, isStandalone: false, selector: "pw-subscription-credential", viewQueries: [{ propertyName: "passwordValidationModalForRevealCredential", first: true, predicate: ["passwordValidationModalForRevealCredential"], descendants: true }, { propertyName: "passwordValidationModalForEditCredential", first: true, predicate: ["passwordValidationModalForEditCredential"], descendants: true }, { propertyName: "passwordValidationModalForAddCredential", first: true, predicate: ["passwordValidationModalForAddCredential"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><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>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <span id=\"subscription-credential-select-label\" class=\"pw-label-style\">Credential <span class=\"text-danger required-icon\">*</span> </span>\n <p-select\n [attr.aria-labelledby]=\"'subscription-credential-select-label'\"\n [options]=\"uniqueCredential\"\n [placeholder]=\"'Select credential'\"\n optionLabel=\"name\"\n optionValue=\"name\"\n (onChange)=\"selectedOption($event)\">\n </p-select>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4\"\n *ngIf=\"credentialsSelect?.length\">\n <div class=\"card pb-2 pt-2 overflow-visible\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <form [formGroup]=\"form\"\n novalidate\n (ngSubmit)=\"saveCredentials()\">\n <div formArrayName=\"credentials\">\n <div *ngFor=\"\n let credential of credentialsGroup.controls;\n let i = index\n \">\n <div [formGroupName]=\"i\">\n <div class=\"mb-3\">\n <pw-input-container label=\"{{\n credential.get('field').value\n }}\"\n [class.info-circle]=\"\n credential.get('description').value\n \"\n name=\"value\"\n errorMsg=\"Please enter value\">\n <span *ngIf=\"\n credential.get('description')\n .value\n \"\n class=\"tooltiptext gradient-custom-branding\">{{\n credential.get('description')\n .value\n }}</span>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"value\"\n [ngClass]=\"{\n 'is-invalid':\n submitted &&\n credential.get('value')\n .invalid\n }\" id=\"input_value_1\" name=\"input_value_1\"/>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\" >\n {{ 'Button.Back' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!showForm\">\n <div class=\"row\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h2 class=\"mt-3\">Credentials</h2>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n (click)=\"openCredentialsForAdd()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Credential' }}\n </button>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"row my-4\">\n <div class=\"col-12 col-md-6 col-xl-4 mt-3 credential-cards\"\n *ngFor=\"let credential of credentials\">\n <div class=\"card\">\n <h2 class=\"credential-field mt-3\">{{ credential.credential_name }}</h2>\n <div class=\"card-content\"\n *ngFor=\"let subscriptionCredential of credential.credentials\">\n <div class=\"card-header\">\n <div>\n <strong class=\"d-block\">{{ subscriptionCredential.field }}:</strong>\n <input class=\"credential-value\"\n [type]=\"\n credentialName === credential.credential_name\n ? 'text'\n : 'password'\n \"\n readonly\n #input\n [value]=\"subscriptionCredential?.value\" id=\"input_text_5520\" name=\"input_text_5520\" />\n </div>\n </div>\n <div class=\"card-footer\">\n <div class=\"float-end px-2\">\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName !== credential.credential_name\"\n (click)=\"revealCredentials(credential)\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.RevealCredential'\n | transloco\n }}\n </button>\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName === credential.credential_name\"\n (click)=\"hideCredentials()\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.HideCredential'\n | transloco\n }}\n </button>\n <a class=\"me-2 my-1\"\n aria-label=\"Edit Credential\"\n (click)=\"openCredentialsForEdit(credential.credential_name)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"allSubscriptionCredentials?.length === 0 && isLoaded\"\n class=\"clearboth\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.Subscriptions.SubscriptionCredentials.NoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n</ng-container>\n<!-- password validation modal for reveal Credential -->\n<pw-password-validation #passwordValidationModalForRevealCredential\n (successEvent)=\"showCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Edit Credential -->\n<pw-password-validation #passwordValidationModalForEditCredential\n (successEvent)=\"editCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Add Credential -->\n<pw-password-validation #passwordValidationModalForAddCredential\n (successEvent)=\"showEditForm()\">\n</pw-password-validation>\n", styles: [".credential-field{text-align:center}.card .card-header{padding:0 24px}.credentials-field{border:0}.credential-value{border:0;width:100%}.overflow-visible{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
760
760
|
}
|
|
761
761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SubscriptionCredentialComponent, decorators: [{
|
|
762
762
|
type: Component,
|
|
763
|
-
args: [{ selector: 'pw-subscription-credential', standalone: false, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><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>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <
|
|
763
|
+
args: [{ selector: 'pw-subscription-credential', standalone: false, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><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>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <span id=\"subscription-credential-select-label\" class=\"pw-label-style\">Credential <span class=\"text-danger required-icon\">*</span> </span>\n <p-select\n [attr.aria-labelledby]=\"'subscription-credential-select-label'\"\n [options]=\"uniqueCredential\"\n [placeholder]=\"'Select credential'\"\n optionLabel=\"name\"\n optionValue=\"name\"\n (onChange)=\"selectedOption($event)\">\n </p-select>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4\"\n *ngIf=\"credentialsSelect?.length\">\n <div class=\"card pb-2 pt-2 overflow-visible\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <form [formGroup]=\"form\"\n novalidate\n (ngSubmit)=\"saveCredentials()\">\n <div formArrayName=\"credentials\">\n <div *ngFor=\"\n let credential of credentialsGroup.controls;\n let i = index\n \">\n <div [formGroupName]=\"i\">\n <div class=\"mb-3\">\n <pw-input-container label=\"{{\n credential.get('field').value\n }}\"\n [class.info-circle]=\"\n credential.get('description').value\n \"\n name=\"value\"\n errorMsg=\"Please enter value\">\n <span *ngIf=\"\n credential.get('description')\n .value\n \"\n class=\"tooltiptext gradient-custom-branding\">{{\n credential.get('description')\n .value\n }}</span>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"value\"\n [ngClass]=\"{\n 'is-invalid':\n submitted &&\n credential.get('value')\n .invalid\n }\" id=\"input_value_1\" name=\"input_value_1\"/>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\" >\n {{ 'Button.Back' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!showForm\">\n <div class=\"row\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h2 class=\"mt-3\">Credentials</h2>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n (click)=\"openCredentialsForAdd()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Credential' }}\n </button>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"row my-4\">\n <div class=\"col-12 col-md-6 col-xl-4 mt-3 credential-cards\"\n *ngFor=\"let credential of credentials\">\n <div class=\"card\">\n <h2 class=\"credential-field mt-3\">{{ credential.credential_name }}</h2>\n <div class=\"card-content\"\n *ngFor=\"let subscriptionCredential of credential.credentials\">\n <div class=\"card-header\">\n <div>\n <strong class=\"d-block\">{{ subscriptionCredential.field }}:</strong>\n <input class=\"credential-value\"\n [type]=\"\n credentialName === credential.credential_name\n ? 'text'\n : 'password'\n \"\n readonly\n #input\n [value]=\"subscriptionCredential?.value\" id=\"input_text_5520\" name=\"input_text_5520\" />\n </div>\n </div>\n <div class=\"card-footer\">\n <div class=\"float-end px-2\">\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName !== credential.credential_name\"\n (click)=\"revealCredentials(credential)\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.RevealCredential'\n | transloco\n }}\n </button>\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName === credential.credential_name\"\n (click)=\"hideCredentials()\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.HideCredential'\n | transloco\n }}\n </button>\n <a class=\"me-2 my-1\"\n aria-label=\"Edit Credential\"\n (click)=\"openCredentialsForEdit(credential.credential_name)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"allSubscriptionCredentials?.length === 0 && isLoaded\"\n class=\"clearboth\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.Subscriptions.SubscriptionCredentials.NoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n</ng-container>\n<!-- password validation modal for reveal Credential -->\n<pw-password-validation #passwordValidationModalForRevealCredential\n (successEvent)=\"showCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Edit Credential -->\n<pw-password-validation #passwordValidationModalForEditCredential\n (successEvent)=\"editCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Add Credential -->\n<pw-password-validation #passwordValidationModalForAddCredential\n (successEvent)=\"showEditForm()\">\n</pw-password-validation>\n", styles: [".credential-field{text-align:center}.card .card-header{padding:0 24px}.credentials-field{border:0}.credential-value{border:0;width:100%}.overflow-visible{overflow:visible}\n"] }]
|
|
764
764
|
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i1$1.SubscriptionService }, { type: i0.Injector }], propDecorators: { passwordValidationModalForRevealCredential: [{
|
|
765
765
|
type: ViewChild,
|
|
766
766
|
args: ['passwordValidationModalForRevealCredential', { static: false }]
|
|
@@ -860,7 +860,7 @@ class UpdatePaymentDetailsComponent extends AppBaseComponent {
|
|
|
860
860
|
this.isChangePayment = value;
|
|
861
861
|
}
|
|
862
862
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UpdatePaymentDetailsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$1.ScriptLoaderService }, { token: i1$1.ProductService }, { token: i1$1.SubscriptionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: UpdatePaymentDetailsComponent, isStandalone: false, selector: "pw-update-payment-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"update-payment-card_number\">Card Number</label>\n <input type=\"text\"\n id=\"update-payment-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"update-payment-cvc\">CVC</label>\n <input type=\"text\"\n id=\"update-payment-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <
|
|
863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: UpdatePaymentDetailsComponent, isStandalone: false, selector: "pw-update-payment-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"update-payment-card_number\">Card Number</label>\n <input type=\"text\"\n id=\"update-payment-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"update-payment-cvc\">CVC</label>\n <input type=\"text\"\n id=\"update-payment-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"update-payment-exp_month-label\" class=\"pw-label-style\">Exp. Month</span>\n <p-select\n [attr.aria-labelledby]=\"'update-payment-exp_month-label'\"\n [options]=\"months\"\n [appendTo]=\"'body'\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"update-payment-exp_year-label\">Exp. Year</span>\n <p-select\n [attr.aria-labelledby]=\"'update-payment-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year')?.touched &&\n form.get('exp_year')?.errors?.['required']\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 text-center mt-4\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n\n <div class=\"col-12 mt-4 text-end\">\n <button type=\"button\"\n (click)=\"cancel()\"\n class=\"btn btn-outline-default me-2\">\n Cancel\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\">\n Submit\n </button>\n </div>\n </div>\n </form>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".card-block .payment-left{border:1px solid rgb(204,204,204);height:100%}.card-block .payment-left h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-provider{width:30%}@media (max-width: 800px){.payment-provider{width:60%}}.card{width:50%}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }] }); }
|
|
864
864
|
}
|
|
865
865
|
__decorate([
|
|
866
866
|
ValidateForm('form'),
|
|
@@ -870,7 +870,7 @@ __decorate([
|
|
|
870
870
|
], UpdatePaymentDetailsComponent.prototype, "onSave", null);
|
|
871
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UpdatePaymentDetailsComponent, decorators: [{
|
|
872
872
|
type: Component,
|
|
873
|
-
args: [{ selector: 'pw-update-payment-details', standalone: false, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"update-payment-card_number\">Card Number</label>\n <input type=\"text\"\n id=\"update-payment-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"update-payment-cvc\">CVC</label>\n <input type=\"text\"\n id=\"update-payment-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <
|
|
873
|
+
args: [{ selector: 'pw-update-payment-details', standalone: false, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"update-payment-card_number\">Card Number</label>\n <input type=\"text\"\n id=\"update-payment-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"update-payment-cvc\">CVC</label>\n <input type=\"text\"\n id=\"update-payment-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"update-payment-exp_month-label\" class=\"pw-label-style\">Exp. Month</span>\n <p-select\n [attr.aria-labelledby]=\"'update-payment-exp_month-label'\"\n [options]=\"months\"\n [appendTo]=\"'body'\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"update-payment-exp_year-label\">Exp. Year</span>\n <p-select\n [attr.aria-labelledby]=\"'update-payment-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year')?.touched &&\n form.get('exp_year')?.errors?.['required']\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 text-center mt-4\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n\n <div class=\"col-12 mt-4 text-end\">\n <button type=\"button\"\n (click)=\"cancel()\"\n class=\"btn btn-outline-default me-2\">\n Cancel\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\">\n Submit\n </button>\n </div>\n </div>\n </form>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".card-block .payment-left{border:1px solid rgb(204,204,204);height:100%}.card-block .payment-left h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-provider{width:30%}@media (max-width: 800px){.payment-provider{width:60%}}.card{width:50%}\n"] }]
|
|
874
874
|
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i1$1.ScriptLoaderService }, { type: i1$1.ProductService }, { type: i1$1.SubscriptionService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
|
|
875
875
|
|
|
876
876
|
class UpgradeSubscriptionComponent extends AppBaseComponent {
|
|
@@ -1125,7 +1125,7 @@ class UpgradeSubscriptionComponent extends AppBaseComponent {
|
|
|
1125
1125
|
super.ngOnDestroy();
|
|
1126
1126
|
}
|
|
1127
1127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UpgradeSubscriptionComponent, deps: [{ token: i0.Injector }, { token: i1$1.ProductService }, { token: i2.UntypedFormBuilder }, { token: i1.NgbModal }, { token: i1$1.SubscriptionService }, { token: i4$1.Store }, { token: i1$1.ScriptLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: UpgradeSubscriptionComponent, isStandalone: false, selector: "pw-upgrade-subscription", viewQueries: [{ propertyName: "passwordValidationModal", first: true, predicate: ["passwordValidationModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-card_number\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" id=\"upgrade-subscription-exp_month-label\">Exp. Month</label>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_month-label'\"\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" id=\"upgrade-subscription-exp_year-label\">Exp. Year</label>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100) | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton", "inputId"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
1128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: UpgradeSubscriptionComponent, isStandalone: false, selector: "pw-upgrade-subscription", viewQueries: [{ propertyName: "passwordValidationModal", first: true, predicate: ["passwordValidationModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-card_number\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only pw-label-style\" id=\"upgrade-subscription-exp_month-label\">Exp. Month</span>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_month-label'\"\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"upgrade-subscription-exp_year-label\">Exp. Year</span>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100) | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton", "inputId"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
1129
1129
|
}
|
|
1130
1130
|
__decorate([
|
|
1131
1131
|
ValidateForm('form'),
|
|
@@ -1135,7 +1135,7 @@ __decorate([
|
|
|
1135
1135
|
], UpgradeSubscriptionComponent.prototype, "updateCardDetails", null);
|
|
1136
1136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UpgradeSubscriptionComponent, decorators: [{
|
|
1137
1137
|
type: Component,
|
|
1138
|
-
args: [{ selector: 'pw-upgrade-subscription', standalone: false, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-card_number\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" id=\"upgrade-subscription-exp_month-label\">Exp. Month</label>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_month-label'\"\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" id=\"upgrade-subscription-exp_year-label\">Exp. Year</label>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100) | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"] }]
|
|
1138
|
+
args: [{ selector: 'pw-upgrade-subscription', standalone: false, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-card_number\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-card_number\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"upgrade-subscription-cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n id=\"upgrade-subscription-cvc\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only pw-label-style\" id=\"upgrade-subscription-exp_month-label\">Exp. Month</span>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_month-label'\"\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <span class=\"sr-only\" id=\"upgrade-subscription-exp_year-label\">Exp. Year</span>\n <p-select\n [attr.aria-labelledby]=\"'upgrade-subscription-exp_year-label'\"\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-select>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100) | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount | number:'1.2-2' }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"] }]
|
|
1139
1139
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.ProductService }, { type: i2.UntypedFormBuilder }, { type: i1.NgbModal }, { type: i1$1.SubscriptionService }, { type: i4$1.Store }, { type: i1$1.ScriptLoaderService }], propDecorators: { passwordValidationModal: [{
|
|
1140
1140
|
type: ViewChild,
|
|
1141
1141
|
args: ['passwordValidationModal', { static: true }]
|
|
@@ -1750,11 +1750,11 @@ class CommunicationTabComponent extends AppBaseComponent {
|
|
|
1750
1750
|
// });
|
|
1751
1751
|
}
|
|
1752
1752
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CommunicationTabComponent, deps: [{ token: i1$1.CommonService }, { token: i1$1.ProfileService }, { token: i4$1.Store }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1753
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: CommunicationTabComponent, isStandalone: false, selector: "pw-communication-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label [id]=\"'communication-tab-' + idx\">{{ item.name }}</
|
|
1753
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: CommunicationTabComponent, isStandalone: false, selector: "pw-communication-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <span class=\"pw-label-style\" [id]=\"'communication-tab-' + idx\">{{ item.name }}</span>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.enabled\"\n [attr.aria-labelledby]=\"'communication-tab-' + idx\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n\n<pw-no-data [withImage]=\"true\" message=\"You don't have any communication preferences yet.\" *ngIf=\"subscriptions.length === 0 && isLoaded\">\n</pw-no-data>\n", styles: ["label{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }] }); }
|
|
1754
1754
|
}
|
|
1755
1755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CommunicationTabComponent, decorators: [{
|
|
1756
1756
|
type: Component,
|
|
1757
|
-
args: [{ selector: 'pw-communication-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label [id]=\"'communication-tab-' + idx\">{{ item.name }}</
|
|
1757
|
+
args: [{ selector: 'pw-communication-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <span class=\"pw-label-style\" [id]=\"'communication-tab-' + idx\">{{ item.name }}</span>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.enabled\"\n [attr.aria-labelledby]=\"'communication-tab-' + idx\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n\n<pw-no-data [withImage]=\"true\" message=\"You don't have any communication preferences yet.\" *ngIf=\"subscriptions.length === 0 && isLoaded\">\n</pw-no-data>\n", styles: ["label{font-size:15px!important}\n"] }]
|
|
1758
1758
|
}], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1$1.ProfileService }, { type: i4$1.Store }, { type: i0.Injector }] });
|
|
1759
1759
|
|
|
1760
1760
|
class OthersTabComponent extends AppBaseComponent {
|
|
@@ -1813,11 +1813,11 @@ class OthersTabComponent extends AppBaseComponent {
|
|
|
1813
1813
|
super.ngOnDestroy();
|
|
1814
1814
|
}
|
|
1815
1815
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: OthersTabComponent, deps: [{ token: i1$1.CommonService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: OthersTabComponent, isStandalone: false, selector: "pw-others-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label [id]=\"'others-tab-' + idx\"> {{ item?.name }} </
|
|
1816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: OthersTabComponent, isStandalone: false, selector: "pw-others-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <span class=\"pw-label-style\" [id]=\"'others-tab-' + idx\"> {{ item?.name }} </span>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.value === 'true'\"\n [attr.aria-labelledby]=\"'others-tab-' + idx\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div *ngIf=\"isLoaded && !globalConfigs?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.OtherSettings.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
1817
1817
|
}
|
|
1818
1818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: OthersTabComponent, decorators: [{
|
|
1819
1819
|
type: Component,
|
|
1820
|
-
args: [{ selector: 'pw-others-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label [id]=\"'others-tab-' + idx\"> {{ item?.name }} </
|
|
1820
|
+
args: [{ selector: 'pw-others-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <span class=\"pw-label-style\" [id]=\"'others-tab-' + idx\"> {{ item?.name }} </span>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.value === 'true'\"\n [attr.aria-labelledby]=\"'others-tab-' + idx\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div *ngIf=\"isLoaded && !globalConfigs?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.OtherSettings.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
|
|
1821
1821
|
}], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i0.Injector }] });
|
|
1822
1822
|
|
|
1823
1823
|
class SecurityTabComponent extends AppBaseComponent {
|