bitwarden · MGibson1 · Apr 20, 2022 · Apr 15, 2022 · Apr 15, 2022 · Apr 15, 2022
diff --git a/jslib b/jslib
diff --git a/src/app/organizations/settings/organization-subscription.component.html b/src/app/organizations/settings/organization-subscription.component.html
@@ -275,6 +275,31 @@ <h3 class="card-body-header">{{ "updateLicense" | i18n }}</h3>
         ></app-update-license>
       </div>
     </div>
+    <div *ngIf="showBillingSyncKey">
+      <h2 class="mt-5">
+        {{ "billingSync" | i18n }}
+      </h2>
+      <p>
+        {{ "billingSyncDesc" | i18n }}
+      </p>
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        (click)="manageBillingSyncSelfHosted()"
+      >
+        {{ "manageBillingSync" | i18n }}
+      </button>
+      <small class="form-text text-muted" *ngIf="billingSyncSetUp">
+        {{ "lastSync" | i18n }}:
+        <span *ngIf="userOrg.familySponsorshipLastSyncDate != null">
+          {{ userOrg.familySponsorshipLastSyncDate | date: "medium" }}
+        </span>
+        <span *ngIf="userOrg.familySponsorshipLastSyncDate == null">
+          {{ "never" | i18n | lowercase }}
+        </span>
+      </small>
+    </div>
   </ng-container>
 </ng-container>
 <ng-template #setupBillingSyncTemplate></ng-template>
+<ng-template #rotateBillingSyncKeyTemplate></ng-template>
diff --git a/src/app/organizations/settings/organization-subscription.component.ts b/src/app/organizations/settings/organization-subscription.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
+import { ModalRef } from "jslib-angular/components/modal/modal.ref";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -9,10 +10,15 @@ import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { OrganizationApiKeyType } from "jslib-common/enums/organizationApiKeyType";
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
 import { PlanType } from "jslib-common/enums/planType";
+import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
 import { Organization } from "jslib-common/models/domain/organization";
+import { OrganizationConnectionResponse } from "jslib-common/models/response/organizationConnectionResponse";
 import { OrganizationSubscriptionResponse } from "jslib-common/models/response/organizationSubscriptionResponse";
 
+import { BillingSyncKeyComponent } from "src/app/settings/billing-sync-key.component";
+
 import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
 
 @Component({
@@ -32,18 +38,24 @@ export class OrganizationSubscriptionComponent implements OnInit {
   adjustStorageAdd = true;
   showAdjustStorage = false;
   showUpdateLicense = false;
+  showBillingSyncKey = false;
   showDownloadLicense = false;
   showChangePlan = false;
   sub: OrganizationSubscriptionResponse;
   selfHosted = false;
   hasBillingSyncToken: boolean;
 
   userOrg: Organization;
+  existingBillingSyncConnection: OrganizationConnectionResponse<BillingSyncConfigApi>;
 
   removeSponsorshipPromise: Promise<any>;
   cancelPromise: Promise<any>;
   reinstatePromise: Promise<any>;
 
+  @ViewChild("rotateBillingSyncKeyTemplate", { read: ViewContainerRef, static: true })
+  billingSyncKeyViewContainerRef: ViewContainerRef;
+  billingSyncKeyRef: [ModalRef, BillingSyncKeyComponent];
+
   constructor(
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
@@ -79,6 +91,19 @@ export class OrganizationSubscriptionComponent implements OnInit {
     this.hasBillingSyncToken = apiKeyResponse.data.some(
       (i) => i.keyType === OrganizationApiKeyType.BillingSync
     );
+
+    if (this.selfHosted) {
+      this.showBillingSyncKey = await this.apiService.getCloudCommunicationsEnabled();
+    }
+
+    if (this.showBillingSyncKey) {
+      this.existingBillingSyncConnection = await this.apiService.getOrganizationConnection(
+        this.organizationId,
+        OrganizationConnectionType.CloudBillingSync,
+        BillingSyncConfigApi
+      );
+    }
+
     this.loading = false;
   }
 
@@ -225,6 +250,24 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
   }
 
+  async manageBillingSyncSelfHosted() {
+    this.billingSyncKeyRef = await this.modalService.openViewRef(
+      BillingSyncKeyComponent,
+      this.billingSyncKeyViewContainerRef,
+      (comp) => {
+        comp.entityId = this.organizationId;
+        comp.existingConnectionId = this.existingBillingSyncConnection?.id;
+        comp.billingSyncKey = this.existingBillingSyncConnection?.config?.billingSyncKey;
+        comp.setParentConnection = (
+          connection: OrganizationConnectionResponse<BillingSyncConfigApi>
+        ) => {
+          this.existingBillingSyncConnection = connection;
+          this.billingSyncKeyRef[0].close();
+        };
+      }
+    );
+  }
+
   get isExpired() {
     return (
       this.sub != null && this.sub.expiration != null && new Date(this.sub.expiration) < new Date()
@@ -328,4 +371,8 @@ export class OrganizationSubscriptionComponent implements OnInit {
   get showChangePlanButton() {
     return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
   }
+
+  get billingSyncSetUp() {
+    return this.existingBillingSyncConnection?.id != null;
+  }
 }
diff --git a/src/app/oss.module.ts b/src/app/oss.module.ts
@@ -157,6 +157,7 @@ import { AddCreditComponent } from "./settings/add-credit.component";
 import { AdjustPaymentComponent } from "./settings/adjust-payment.component";
 import { AdjustStorageComponent } from "./settings/adjust-storage.component";
 import { ApiKeyComponent } from "./settings/api-key.component";
+import { BillingSyncKeyComponent } from "./settings/billing-sync-key.component";
 import { ChangeEmailComponent } from "./settings/change-email.component";
 import { ChangeKdfComponent } from "./settings/change-kdf.component";
 import { ChangePasswordComponent } from "./settings/change-password.component";
@@ -297,6 +298,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ApiKeyComponent,
     AttachmentsComponent,
     BillingSyncApiKeyComponent,
+    BillingSyncKeyComponent,
     BreachReportComponent,
     BulkActionsComponent,
     BulkDeleteComponent,

diff --git a/src/app/settings/billing-sync-key.component.html b/src/app/settings/billing-sync-key.component.html
@@ -0,0 +1,69 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncTitle">
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form
+      class="modal-content"
+      #form
+      (ngSubmit)="submit()"
+      [appApiAction]="formPromise"
+      ngNativeValidate
+    >
+      <div class="modal-header">
+        <h2 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>{{ "billingSyncKeyDesc" | i18n }}</p>
+        <div class="form-group">
+          <label for="billingSyncKey"
+            >{{ "billingSyncKey" | i18n }} <small>(</small><small>{{ "required" | i18n }}</small
+            ><small>)</small></label
+          >
+          <input
+            id="billingSyncKey"
+            type="input"
+            name="billingSyncKey"
+            class="form-control"
+            [(ngModel)]="billingSyncKey"
+            required
+            appAutofocus
+            appInputVerbatim
+          />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <span>{{ "save" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "cancel" | i18n }}
+        </button>
+        <div class="ml-auto">
+          <button
+            #deleteBtn
+            type="button"
+            (click)="deleteConnection()"
+            class="btn btn-outline-danger"
+            appA11yTitle="{{ 'delete' | i18n }}"
+            [disabled]="form.loading"
+          >
+            <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="form.loading" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
+              [hidden]="!form.loading"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/src/app/settings/billing-sync-key.component.ts b/src/app/settings/billing-sync-key.component.ts
@@ -0,0 +1,61 @@
+import { Component } from "@angular/core";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+import { Utils } from "jslib-common/misc/utils";
+import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
+import { BillingSyncConfigRequest } from "jslib-common/models/request/billingSyncConfigRequest";
+import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
+import { OrganizationConnectionResponse } from "jslib-common/models/response/organizationConnectionResponse";
+
+@Component({
+  selector: "app-billing-sync-key",
+  templateUrl: "billing-sync-key.component.html",
+})
+export class BillingSyncKeyComponent {
+  entityId: string;
+  existingConnectionId: string;
+  billingSyncKey: string;
+  setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => void;
+
+  formPromise: Promise<OrganizationConnectionResponse<BillingSyncConfigApi>> | Promise<void>;
+
+  constructor(private apiService: ApiService, private logService: LogService) {}
+
+  async submit() {
+    try {
+      const request = new OrganizationConnectionRequest(
+        this.entityId,
+        OrganizationConnectionType.CloudBillingSync,
+        true,
+        new BillingSyncConfigRequest(this.billingSyncKey)
+      );
+      if (this.existingConnectionId == null) {
+        this.formPromise = this.apiService.createOrganizationConnection(
+          request,
+          BillingSyncConfigApi
+        );
+      } else {
+        this.formPromise = this.apiService.updateOrganizationConnection(
+          request,
+          BillingSyncConfigApi,
+          this.existingConnectionId
+        );
+      }
+      const response = (await this
+        .formPromise) as OrganizationConnectionResponse<BillingSyncConfigApi>;
+      this.existingConnectionId = response?.id;
+      this.billingSyncKey = response?.config?.billingSyncKey;
+      this.setParentConnection(response);
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async deleteConnection() {
+    this.formPromise = this.apiService.deleteOrganizationConnection(this.existingConnectionId);
+    await this.formPromise;
+    this.setParentConnection(null);
+  }
+}
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
@@ -4808,6 +4808,18 @@
   "billingSyncApiKeyRotated": {
     "message": "Token rotated."
   },
+  "billingSync": {
+    "message": "Billing Sync"
+  },
+  "billingSyncDesc": {
+    "message": "Billing Sync provides Free Families plans for members and advanced billing capabilities by linking your self-hosted Bitwarden to the Bitwarden cloud server."
+  },
+  "billingSyncKeyDesc": {
+    "message": "A Billing Sync Token from your cloud organization's subscription settings is required to complete this form."
+  },
+  "billingSyncKey": {
+    "message": "Billing Sync Token"
+  },
   "active": {
     "message": "Active"
   },
@@ -4943,9 +4955,6 @@
       }
     }
   },
-  "lastSync": {
-    "message": "Last Sync"
-  },
   "awaitingSyncSingular": {
     "message": "Token rotated $DAYS$ day ago. Update the billing sync token in your self-hosted organization settings.",
     "placeholders": {
@@ -4963,5 +4972,9 @@
         "example": "1"
       }
     }
+  },
+  "lastSync": {
+    "message": "Last Sync",
+    "Description": "Used as a prefix to indicate the last time a sync occured. Example \"Last sync 1968-11-16 00:00:00\""
   }
 }
diff --git a/src/scss/modals.scss b/src/scss/modals.scss
@@ -68,7 +68,6 @@
 }
 
 .modal-footer {
-  border-radius: 0.3rem 0.3rem 0 0;
   justify-content: flex-start;
   @include themify($themes) {
     background-color: themed("footerBackgroundColor");
+23 −0		common/src/abstractions/api.service.ts
+3 −0		common/src/enums/organizationConnectionType.ts
+13 −0		common/src/models/api/billingSyncConfigApi.ts
+3 −0		common/src/models/request/billingSyncConfigRequest.ts
+15 −0		common/src/models/request/organizationConnectionRequest.ts
+28 −0		common/src/models/response/organizationConnectionResponse.ts
+47 −0		common/src/services/api.service.ts