[AC-1102]Automatic Sync is visible for self hosted Families Orgs (#9565)

* Add the changes to remove automasync for family org

* Remove changes to the form field file

* Rename productType to productTierType

* Add Upload license and License file

* Hide the License and upload License label

* Resolve the issue of Validation required for family org

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html

@@ -224,6 +224,14 @@
     <h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
     <p bitTypography="body1">
       {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
+      <a
+        href="https://bitwarden.com/help/licensing-on-premise/#retrieve-organization-license"
+        target="_blank"
+        rel="noreferrer"
+        appA11yTitle="{{ 'learnMore' | i18n }}"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i
+      ></a>
     </p>
     <div class="tw-flex tw-space-x-2">
       <button

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html

@@ -74,6 +74,7 @@
           [value]="licenseOptions.SYNC"
           [disabled]="disableLicenseSyncControl"
           class="tw-block"
+          *ngIf="showAutomaticSyncAndManualUpload"
         >
           <bit-label
             >{{ "automaticSync" | i18n }}
@@ -114,6 +115,7 @@
           id="manual-upload"
           [value]="licenseOptions.UPLOAD"
           class="tw-mt-6 tw-block"
+          *ngIf="showAutomaticSyncAndManualUpload"
         >
           <bit-label>{{ "manualUpload" | i18n }}</bit-label>
           <bit-hint>
@@ -121,8 +123,14 @@
           </bit-hint>
         </bit-radio-button>
         <ng-container *ngIf="updateMethod === licenseOptions.UPLOAD">
-          <h3 class="tw-font-semibold">{{ "uploadLicense" | i18n }}</h3>
+          <bit-label class="tw-mb-6 tw-block" *ngIf="!showAutomaticSyncAndManualUpload">
+            {{ "licenseAndBillingManagementDesc" | i18n }}
+          </bit-label>
+          <h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold">
+            {{ "uploadLicense" | i18n }}
+          </h3>
           <app-update-license
+            [showAutomaticSyncAndManualUpload]="showAutomaticSyncAndManualUpload"
             [organizationId]="organizationId"
             [showCancel]="false"
             (onUpdated)="licenseUploaded()"

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts

@@ -9,6 +9,7 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { OrganizationConnectionType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/models/response/organization-connection.response";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { BillingSyncConfigApi } from "@bitwarden/common/billing/models/api/billing-sync-config.api";
 import { SelfHostedOrganizationSubscriptionView } from "@bitwarden/common/billing/models/view/self-hosted-organization-subscription.view";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
@@ -32,6 +33,7 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
   organizationId: string;
   userOrg: Organization;
   cloudWebVaultUrl: string;
+  showAutomaticSyncAndManualUpload: boolean;
 
   licenseOptions = LicenseOptions;
   form = new FormGroup({
@@ -111,6 +113,8 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     }
     this.loading = true;
     this.userOrg = await this.organizationService.get(this.organizationId);
+    this.showAutomaticSyncAndManualUpload =
+      this.userOrg.productTierType == ProductTierType.Families ? false : true;
     if (this.userOrg.canViewSubscription) {
       const subscriptionResponse = await this.organizationApiService.getSubscription(
         this.organizationId,

apps/web/src/app/billing/shared/update-license.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="updateLicenseForm" [bitSubmit]="submit">
   <bit-form-field>
-    <bit-label>{{ "licenseFile" | i18n }}</bit-label>
+    <bit-label *ngIf="showAutomaticSyncAndManualUpload">{{ "licenseFile" | i18n }}</bit-label>
     <div>
       <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
         {{ "chooseFile" | i18n }}

apps/web/src/app/billing/shared/update-license.component.ts

@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
@@ -12,16 +13,17 @@ import { UpdateLicenseDialogResult } from "./update-license-types";
   selector: "app-update-license",
   templateUrl: "update-license.component.html",
 })
-export class UpdateLicenseComponent {
+export class UpdateLicenseComponent implements OnInit {
   @Input() organizationId: string;
   @Input() showCancel = true;
+  @Input() showAutomaticSyncAndManualUpload: boolean;
   @Output() onUpdated = new EventEmitter();
   @Output() onCanceled = new EventEmitter();
 
   formPromise: Promise<void>;
   title: string = this.i18nService.t("updateLicense");
   updateLicenseForm = this.formBuilder.group({
-    file: [null, Validators.required],
+    file: [null],
   });
   licenseFile: File = null;
   constructor(
@@ -31,6 +33,13 @@ export class UpdateLicenseComponent {
     private organizationApiService: OrganizationApiServiceAbstraction,
     private formBuilder: FormBuilder,
   ) {}
+  async ngOnInit() {
+    const org = await this.organizationApiService.get(this.organizationId);
+    if (org.plan.productTier !== ProductTierType.Families) {
+      this.updateLicenseForm.setValidators([Validators.required]);
+      this.updateLicenseForm.updateValueAndValidity();
+    }
+  }
   protected setSelectedFile(event: Event) {
     const fileInputEl = <HTMLInputElement>event.target;
     const file: File = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;

apps/web/src/locales/en/messages.json

@@ -8544,5 +8544,8 @@
   },
   "sponsored": {
     "message": "Sponsored"
+  },
+  "licenseAndBillingManagementDesc": {
+    "message": "After making updates in the Bitwarden cloud server, upload your license file to apply the most recent changes."
   }
 }

apps/web/src/locales/en_GB/messages.json

@@ -2420,7 +2420,7 @@
     "message": "Licence file"
   },
   "licenseFileDesc": {
-    "message": "Your licence file will be named something like $FILE_NAME$",
+    "message": "Your license file will be named something like $FILE_NAME$",
     "placeholders": {
       "file_name": {
         "content": "$1",

apps/web/src/locales/en_IN/messages.json

@@ -2420,7 +2420,7 @@
     "message": "Licence file"
   },
   "licenseFileDesc": {
-    "message": "Your licence file will be named something like $FILE_NAME$",
+    "message": "Your license file will be named something like $FILE_NAME$",
     "placeholders": {
       "file_name": {
         "content": "$1",