(fix): changed radios for a button and show errors if disabling fails

src/app/modules/pro/settings/settings.component.html

@@ -904,56 +904,36 @@
                     class="m-proSettings__tab--subscription"
                     formGroupName="subscription"
                   >
-                    <div class="m-proSettings__field--radio hasValidationRow">
-                      <div class="m-proSettings__field--radio">
-                        <div class="m-proSettings__row--label">
-                          <label i18n>
-                            Subscription
-                          </label>
-                        </div>
-                        <div class="m-proSettings__row--input">
-                          <label
-                            for="subscription_enable"
-                            class="m-proSettings__customInputContainer--radio"
-                            i18n
-                            >Enabled
-                            <input
-                              type="radio"
-                              id="subscription_enable"
-                              name="enabled"
-                              [value]="true"
-                              formControlName="enabled"
-                              class="form-control"
-                            />
-                            <span
-                              class="m-proSettings__customInput--radio"
-                            ></span>
-                          </label>
-                          <label
-                            for="subscription_disable"
-                            class="m-proSettings__customInputContainer--radio"
-                            i18n
-                            >Disabled
-                            <input
-                              type="radio"
-                              id="subscription_disable"
-                              name="enabled"
-                              [value]="false"
-                              formControlName="enabled"
-                              class="form-control"
-                            />
-                            <span
-                              class="m-proSettings__customInput--radio"
-                            ></span>
-                          </label>
-                        </div>
+                    <div class="hasValidationRow">
+                      <button
+                        class="m-shadowboxSubmitButton"
+                        type="button"
+                        [disabled]="saveStatus === 'saving'"
+                        [ngClass]="{ saving: saveStatus === 'saving' }"
+                        (click)="cancelSubscription()"
+                      >
+                        <span
+                          class="m-shadowboxSubmitButton__status--unsaved"
+                          i18n
+                        >
+                          Cancel Pro
+                        </span>
+                      </button>
+
+                      <div class="m-proSettings__row--validation">
+                        <p>
+                          Invalid hex code
+                        </p>
                       </div>
                     </div>
                   </div>
                 </div>
               </ng-template>
             </ng-container>
-            <div class="m-shadowboxLayout__footer">
+            <div
+              class="m-shadowboxLayout__footer"
+              *ngIf="activeTab !== 'subscription'"
+            >
               <m-shadowboxSubmitButton
                 [disabled]="
                   !form.valid || form.pristine || saveStatus === 'saving'

src/app/modules/pro/settings/settings.component.ts

@@ -105,9 +105,6 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
     payouts: this.fb.group({
       method: ['usd'],
     }),
-    subscription: this.fb.group({
-      enabled: [true],
-    }),
   });
 
   constructor(
@@ -196,9 +193,6 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
       payouts: {
         method: settings.payout_method,
       },
-      subscription: {
-        enabled: !!this.session.getLoggedInUser().pro,
-      },
     });
 
     this.setTags(settings.tag_list);
@@ -280,6 +274,17 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
     return this.settings[`${type}_image`] + '?cb=' + Date.now();
   }
 
+  async cancelSubscription() {
+    this.error = null;
+    try {
+      await this.service.disable();
+      this.router.navigate(['/', window.Minds.user.name]);
+    } catch (e) {
+      this.error = e.message;
+      this.formToastService.error('Error: ' + this.error);
+    }
+  }
+
   async onSubmit() {
     this.error = null;
     this.saveStatus = 'saving';
@@ -310,12 +315,6 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
         settings.has_custom_background = true;
       }
 
-      if (!this.form.value.subscription.enabled) {
-        await this.service.disable();
-        this.router.navigate(['/', window.Minds.user.name]);
-        return;
-      }
-
       await Promise.all(uploads);
 
       this.settings = {