Finalize the community create and hide active

- If a community is already paid for and active, hide the creation wizard form.

app/src/app/communities/create/create.component.html

@@ -1,4 +1,16 @@
 <!-- <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()"> -->
+
+@if (draftEntry?.record?.tags['status'] === 'active') {
+<div class="margin">
+  <h1>Community created!</h1>
+  <p>
+    Your community has been created and is now active. It is not yet published, but you can start inviting members to it
+    and start using it.
+  </p>
+  <a [routerLink]="['/community', draftEntry.record.id]">Go to community</a>
+</div>
+} @else {
+
 <mat-stepper #stepper [linear]="true" (selectionChange)="onStepChange($event)">
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
@@ -444,5 +456,5 @@ <h3>Payment due</h3>
     }
   </mat-step>
 </mat-stepper>
-
+}
 <!-- </form> -->

app/src/app/communities/create/create.component.ts

@@ -149,8 +149,10 @@ export class CreateComponent implements OnDestroy {
 
           this.secondFormGroup.patchValue(entry.data);
 
-          // Skip to second step, since we have the data.
-          this.stepper.next();
+          if (this.stepper) {
+            // Skip to second step, since we have the data.
+            this.stepper.next();
+          }
 
           // this.selectedProfile.set(null);
           // this.messages.set([]);
@@ -221,6 +223,12 @@ export class CreateComponent implements OnDestroy {
         console.log('Payment is paid');
         this.paymentStatus = 'Paid';
         this.paid = true;
+
+        // this.draftEntry.data.status = 'active';
+        // Persist the community as published and paid for.
+        // This will continue to only be stored on user's DWNs and not official Ariton one just yet,
+        // for that it will require a manual approval.
+        await this.saveDraft(true);
       } else {
         console.log('Payment is not paid');
         this.paymentStatus = 'Not Paid';
@@ -267,7 +275,7 @@ export class CreateComponent implements OnDestroy {
     }
   }
 
-  async saveDraft() {
+  async saveDraft(published = false) {
     if (this.draftDeleted) {
       return;
     }
@@ -278,6 +286,12 @@ export class CreateComponent implements OnDestroy {
     }
 
     if (this.draftEntry) {
+      // If the status is already active, just return and don't allow editing anymore in this UI.
+      if (this.draftEntry.record.tags['status'] === 'active') {
+        console.warn('This community is already ACTIVE! Editing not allowed in this UI.');
+        return;
+      }
+
       const mergedData = {
         ...this.draftEntry.data,
         ...this.firstFormGroup.value,
@@ -288,10 +302,15 @@ export class CreateComponent implements OnDestroy {
       // this.draftEntry.data = mergedData;
       console.log('DRAFT ENTRY UPDATE:', this.draftEntry);
 
-      this.draftEntry = await this.data.update(this.draftEntry.record, mergedData, {
-        type: 'community',
-        status: 'draft',
-      });
+      this.draftEntry = await this.data.update(
+        this.draftEntry.record,
+        mergedData,
+        {
+          type: 'community',
+          status: this.paid ? 'active' : 'draft',
+        },
+        published,
+      );
 
       // this.draftEntry.data = [...this.secondFormGroup.value, ...this.firstFormGroup.value];
     } else {
@@ -301,7 +320,7 @@ export class CreateComponent implements OnDestroy {
         ...this.thirdFormGroup.value,
       };
 
-      this.draftEntry = await this.data.save(mergedData, { type: 'community', status: 'draft' });
+      this.draftEntry = await this.data.save(mergedData, { type: 'community', status: 'draft' }, published);
     }
 
     console.log('SAVE DRAFT DONE!');
@@ -360,10 +379,15 @@ export class CreateComponent implements OnDestroy {
     }
   }
 
-  save() {
+  /** The save operation will first publish the community draft. This ensures that Ariton can access
+   * the draft to publish when payment is received.
+   */
+  async save() {
     this.saved = true;
 
-    this.generateInvoice();
+    await this.saveDraft(true);
+
+    await this.generateInvoice();
   }
 
   premiumPeriod = 'monthly';

app/src/app/data.service.ts

@@ -31,8 +31,8 @@ export class DataService {
     // this.identity.activeAgent().identity.
   }
 
-  async save(data: any, tags: any) {
-    return this.app.storage.save(this.configuration, data, tags);
+  async save(data: any, tags: any, published = false) {
+    return this.app.storage.save(this.configuration, data, tags, published);
   }
 
   async load(tags: any) {
@@ -43,8 +43,8 @@ export class DataService {
     return this.app.storage.get(recordId);
   }
 
-  async update(record: Record, data: any, tags: any) {
-    return this.app.storage.update(record, data, tags);
+  async update(record: Record, data: any, tags: any, published = false) {
+    return this.app.storage.update(record, data, tags, published);
   }
 
   async delete(record: Record) {

app/src/app/storage.service.ts

@@ -20,10 +20,11 @@ export class StorageService {
 
   constructor() {}
 
-  async save<T>(configuration: StorageQueryConfiguration, data: any, tags: any) {
+  async save<T>(configuration: StorageQueryConfiguration, data: any, tags: any, published = false) {
     const { record, status } = await this.identity.web5.dwn.records.create({
       data: data,
       message: {
+        published: published,
         tags: tags,
         protocol: configuration.protocol,
         protocolPath: configuration.protocolPath,
@@ -90,8 +91,8 @@ export class StorageService {
     return entry;
   }
 
-  async update(record: Record, data: any, tags: any) {
-    const { status } = await record.update({ data: data, tags: tags });
+  async update(record: Record, data: any, tags: any, published = false) {
+    const { status } = await record.update({ published: published, data: data, tags: tags });
 
     if (status.code !== 202) {
       throw new Error(`Failed to save data (${status.code}): ${status.detail}`);